Ecommerce integration with shopify and Cloudflare

Help
1

I am trying to deploy a store using the Next.js/Shopify integration guide for e-commerce. I have my domain set up in Cloudflare and the hosting in Vercel. However, I’m encountering issues or I’m unsure how to properly point to Shopify while displaying my store correctly (currently, I’m only seeing a redirect page, but nothing else). If I point to Vercel, only the homepage works on my site, since the PDP, PLP, checkout, etc., are all configured in Shopify.

What would be the best solution for this? The guide I’m referring to is Vercel and Shopify Integration

2

Hi, @gabriel1085! Welcome to the Vercel Community.

I’ve not set-up this guide before but from what I’m seeing your post, I hope the following pointers can be helpful.

  1. Your domain should be pointed to Vercel, not Shopify as Vercel will handle the routing and serve your Next.js application.
  2. In your Shopify admin, you need to set up your domain as a custom domain, but it should be configured as a subdomain (e.g., shop.yourdomain.com).
  3. In your Vercel project settings, you should add both your main domain (yourdomain.com) and the Shopify subdomain (shop.yourdomain.com) .
    4.Your Next.js application should handle all routes, including product pages (PDP), product listing pages (PLP), and others. You’ll need to implement these pages in your Next.js app and fetch data from Shopify’s Storefront API .
  4. For the checkout process, you’ll need to redirect to Shopify. This can be done by setting up a redirect in your Next.js app for the checkout route

Let us know how that goes!

3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.