Checkout Issues with Headless Shopify Store

Technical Q&A
, , ,

Topic summary

Headless Shopify store using the Storefront API (custom frontend on Vercel) faces two issues: (1) in checkout, clicking the logo sends users to the original myshopify.com domain instead of the custom domain; (2) desire to prevent purchases on the original online store, ensuring all transactions occur via the headless storefront.

Proposed idea from the author: use a dedicated checkout subdomain (e.g., mystorename-checkout.com) to reduce confusion, and ensure the logo links back to the headless site. Unclear on implementation steps.

Latest response: a workaround suggests adding a client-side redirect in theme.liquid for the home page only, using Liquid + JavaScript:

  • If template == ‘index’, run window.location.href to send users to the target domain.
  • Place the script before the head tag.

Status and gaps:

  • The provided solution partially addresses redirect behavior by rerouting the original store’s homepage; it does not directly change the checkout logo destination or handle checkout domain settings.
  • No guidance yet on disabling the original store or restricting purchases there. Discussion remains open.
Summarized with AI on December 30. AI used: gpt-5.
1

Hello Shopify Community,

I recently created a Headless Shopify Store using the Storefront API, and while most things are working smoothly, I’ve encountered two issues that I could use some assistance with:

  1. Logo Redirection Problem in Checkout: When a customer is in the checkout process and clicks on the logo in the top-left corner, they are redirected to the “original” Shopify Store (xxx.myshopify.com) instead of staying on my custom domain. (Hosted on Vercel)

  2. Disabling the Original Store: I’m looking for guidance on how to deactivate the original store to prevent customers from making purchases there. I want all transactions to occur exclusively on my Headless Store.

As a potential solution, I am considering replacing the original store URL with something like “mystorename-checkout.com” (so people don’t get confused, why they suddenly left my domain when in the checkout), aswell as providing the logo with a link to my Headless Store. However, I’m unsure of the steps to achieve this.
Your insights and suggestions on resolving these issues would be greatly appreciated. Thank you for your assistance!

Best regards,
Alex

2

Logo Redirection Problem in Checkout:

{% if template == ‘index’ %}

{% endif %}

Paste this before the Head tag in the theme liquid file and it redirects to the link you put in. BEFORE head tag, not under.