I have a custom headless store using Next.js and Vercel for the frontend and Shopify for the backend. I’m trying to figure out the best way to redirect users back to my custom store after they complete checkout on Shopify.
I’ve explored two solutions but ran into issues with both:
Redirecting Shopify Traffic to My Custom Domain
I currently redirect my-store.shopify.com traffic to my-custom.domain.com. This works except for /cart and /checkout, which I need to keep on Shopify for checkout.
Is there a way to prevent the redirect for just these pages so /cart and /checkout remain on Shopify while everything else redirects?
ChatGPT mentioned there’s a redirect for checkout pages, but I can’t find it—does it exist?
Alternatively, can I handle the entire checkout process (payment, order creation, email sending) purely via GraphQL API?
Updating “Go to Store” URLs in Emails and Checkout
I’ve manually updated the “Go to Store” URLs in email templates via Liquid. However, I can’t modify the checkout page links.
I’ve read about using JavaScript on the checkout page, but that seems deprecated—am I missing something?
Is there an app that can help with this, or another way to control where users are redirected post-checkout?
Would appreciate any insights or recommendations. Thanks in advance!
Thank you for reaching out. I understand your challenge with handling post-checkout redirects and Shopify’s checkout domain restrictions. Here are the best approaches to resolve your concerns:
Redirecting Shopify Traffic While Keeping Checkout Intact:
Shopify automatically redirects store traffic when a custom domain is set, but checkout pages are locked to Shopify’s domain for security reasons. Unfortunately, Shopify doesn’t offer a way to exclude /cart and /checkout from these redirects. However, here’s what you can do:
Use Shopify’s Checkout URL for Cart and Checkout:
Instead of redirecting everything, you can ensure cart and checkout traffic stays on Shopify by linking directly to the Shopify domain when navigating to the cart ({store-name}.myshopify.com/cart) or checkout ({store-name}.myshopify.com/checkout).
Custom Middleware in Next.js If you are handling redirects via Next.js, implement middleware that checks the requested path and prevents redirects for /cart and /checkout.
Handling Checkout & Order Processing via GraphQL API:
If you prefer to keep everything within your custom store, Shopify’s Storefront API lets you create checkouts and process orders. However:
Shopify does not allow handling payments fully via GraphQL unless you use Shopify Plus with a custom checkout flow.
If using Shopify Payments, checkout must be completed on Shopify’s hosted pages.
You can, however, create a draft order via the Admin API and send users to checkout via the checkout URL.
Updating Post-Checkout Redirects & Email Links:
You’ve correctly modified email templates via Liquid. Unfortunately, Shopify doesn’t allow direct modifications to the checkout page for security reasons. However, you can:
Use Shopify Plus (if applicable) : If you’re on Shopify Plus, you can modify checkout scripts and checkout.liquid to adjust the post-checkout behavior.
Use Order Status Page Scripts: If you’re not on Shopify Plus, Shopify allows injecting scripts on the “Thank You” page via the Additional Scripts section in settings. Here, you can add a script to automatically redirect users to your custom store after checkout:
-Apps & Workarounds: There are apps like ReConvert Post Purchase Upsell that allow customizing the post-checkout experience, including redirection.
Let me know if you need further guidance! If you need me to implement these, please feel free to reach out to me anytime.
If I was able to help you, please don’t forget to Like and mark it as the Solution!
For #1: I am confused what you mean. I think what you’re saying is to not set a custom domain (don’t redirect everything). I am using {store-name}.myshopify.com/cart to go to the cart & checkout. The issue is after finishing the order, when users hit “Continue Shopping” they will be directed to the Shopify store and not my custom front end.
I am not sure what you mean by using the Next.js middleware to prevent the re-direct because I thought it’ll happen via Shopify. If I try to redirect back to my {store-name}.myshopify.com/cart, won’t Shopify try to redirect it to {mycustomfrontend}.com/cart and then I’m stuck in a redirect loop?
#3: Can you provide more instructions on where the Additional Scripts can be found? I thought it’s deprecated and the option isn’t available anymore.
It sounds like my best bet is to be on Shopify Plus though.