Headless Redirect After Checkout

Hydrogen and Storefront APIs
1

Hi,

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:

1. 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?

2. 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!

2

Hi, this is also necessary for Hydrogen sites. You might be able to just use the Hydrogen Redirect theme: GitHub - Shopify/hydrogen-redirect-theme or you could fork that theme and customize how the redirects are made here: hydrogen-redirect-theme/layout/theme.liquid at main · Shopify/hydrogen-redirect-theme · GitHub

3

Hi Bret,

Thanks for replying! Would I be able to use this hydrogen redirect theme with my custom front end? I’m using Next.js, not liquid.

I’m also wondering if I could just use Shopify Plus & put a button there that is pointed to my custom storefront (not necessarily a re-direct)

4

Yes, the redirect theme is intentionally designed for headless usage. It’s because even with headless, you still have a liquid site at myshopify.com, and any link that ends up there needs to get redirected to your real headless domain. Hydrogen and NextJS are the same in this way, both are hosted outside liquid, and liquid links need to end up on the headless sites.

I’m not sure I understand the second question.

5

Hi Bret,

Thank you for the response. That does sound like what I need. I did try previously to redirect my myshopify.com domain to my real headless domain, but I ran into an issue where the checkout as well will get redirected.

If all links that end up to the myshopify.com get redirected via the redirect theme, will the checkout also get re-directed?

RE: Second question - My problem is I don’t have a way to get users to return to my custom storefront after they finish checking out. Currently, the “Continue Shopping” button on the Thank You page takes them back to my store hosted on Shopify. One solution I was considering is doing a re-direct after they finish checking out. Another solution I was thinking about is having a button on the Thank You page that customers can click that will take them back to my custom storefront. However, this button isn’t available on regular Shopify Plan.

I’m wondering if I’m on a Shopify Plus plan, will I gain the ability to add a button to the thank you page and will I be able to assign my custom storefront URL to this button?

6

All headless stores generally should have the redirect liquid theme installed too: GitHub - Shopify/hydrogen-redirect-theme

7

Hi Bret,

I was wondering if you could also answer my second question? Appreciate it!

8

If you setup the redirect theme, the “Continue Shopping” button will automatically forward the user to the headless storefront. I’m not sure about adding a totally new and custom button. I’ll see if I can find out.

9

Hii Bret, Did you find the solution for redirection ?

10

Hi Bret, the redirect theme works well! Thank you