Requesting help 404 Not Found Checkout Shopify Headless Store

[jarrodai (G-DIsGood)]

Hello Vercel Community and thank you.

I’m requesting help to diagnose and resolve a blocking checkout issue on my store https://crownedcurls.ad . Customers are currently being sent to a 404 “Page Not Found” when transitioning to checkout, preventing sales.

Environment

• Store URL: https://crownedcurls.ad

• Platform: Shopify (Storefront API)

• Frontend: Headless Next.js app deployed on Vercel (custom domain)

• Theme: Custom headless storefront (no Liquid theme controlling checkout)

• Key Apps: No known checkout-modifying apps active; no subscription/upsell apps involved; no page builders touching cart/checkout
  Problem

• User action: Add product to cart → click “Checkout” or “Buy Now”

• Expected: Redirect to Shopify’s secure checkout

• Actual: Redirect lands on a 404 page

• Example failing URL: https://crownedcurls.ad/cart/c/hWN47Y4tyq9jFJ9RzkEbe4VW?key=5f5882f32f4d83be25c57c6a96770f0f
  What I’ve Already Done

• Use the official checkoutUrl returned by Shopify Storefront API without modification:

  • Cart creation and updates return checkoutUrl via GraphQL ( CREATE_CART_MUTATION , ADD_TO_CART_MUTATION , GET_CART_QUERY ).
  • Checkout links are generated by passing the raw checkoutUrl straight through (no host rewriting).

• Removed app-level redirects that could interfere:

  • Kept a redirect for /checkouts/:path* to Shopify’s checkout domain only; removed any cart redirect so the cart page functions locally.

• Added live instrumentation and logging to isolate the failure point:

  • On product page, logs before redirect: { source: ‘product’, action: ‘add_to_cart_redirect’ | ‘buy_now_redirect’, cartId, productId, variantId, checkoutUrl, finalUrl, timestamp } .
  • On cart page, logs on “Checkout” click: { source: ‘cart’, cartId, checkoutUrl, finalUrl, timestamp } .
  • These confirm the browser is navigating to the exact checkoutUrl provided by Shopify.

• Validated browser-side behaviors:

  • Tested incognito with extensions disabled.
  • Cleared caches; performed hard reloads.
  • Observed persistent 404 on the top-level navigation in multiple flows.

• Environment configuration sanity checks:

  • Verified NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN and NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN .
  • Optional NEXT_PUBLIC_SHOPIFY_CHECKOUT_DOMAIN support exists, but production currently uses Storefront API checkoutUrl directly.

• Confirmed no custom scripts on the frontend that rewrite checkout URLs or block navigation.
  What I Need

Best regards,

Jarrod

[system]

There’s another community post with 404 debugging tips that might be helpful. Please give these solutions a try and let us know how it goes.

Debugging 404 Errors

Sometimes things don’t go as expected when deploying a website. If you see a 404 on your site, that means the page or resource couldn’t be found. There are many possible causes, and the absence of something can be tricky debug if you don’t know where to look. Here are some things you can do to find the cause and fix it. Debugging Tips Check the error code If you see a mostly white screen with 404: NOT_FOUND along with a Code and and ID then you can click the blue info box below the error deta…

A human should be around soon to offer more advice. But you can also get helpful information quickly by asking v0.

[pawlean (Pauline P. Narvas)]

Hi, @jarrodai! Welcome to the Vercel Community

The example URL you shared showed the ERR_TOO_MANY_REDIRECTS error message. Can you review this guide?

How do I resolve "err_too_many_redirects" when using a Cloudflare proxy with...

[jarrodai (G-DIsGood)]

Thank you. For shopify I had to go to settings>domains and make the *.myshopify the primary.

[pawlean (Pauline P. Narvas)]

Thanks for sharing