How to redirect the homepage of an online store to the homepage of a third-party built headless site

Shopify Plus
1

We currently have an online store bound to the domain us.xxxx.com. Additionally, we have a headless project built on Shopify, deployed on Netlify, and bound to the domain www.xxxx.com. Currently, we can redirect any page on us.xxxx.com without issue, except for the homepage. For example, for https://us.xxxx.com/pages/affiliate, we know that a 301 redirect to https://www.xxxx.com/affiliate can be configured via Shopify admin → Online Store → URL Redirects.

However, on Online Store → URL Redirects, we are unable to perform a 301 redirect for the homepage, as this is not allowed. Our sole wish is to redirect the root path (i.e., the homepage) of us.xxxx.com to www.xxxx.com using a 301 redirect, rather than using a client-side JavaScript redirect.

jepson_0-1709794173575.png
jepson_0-1709794173575.png2154×962 148 KB

2

Hello @jepson
There is no direct way to redirect your online store to your headless. Similar thing happed with one of my client where I have suggested to use Javascript.

They are happy with solution and using it for more than 1 and half years
Solution: You need to open your theme and edit the code of theme.liquid

Apply this condition on top
{% if request.design_mode %}

at bottom add {% else %}

and insert this JS code

Note: replace www.xxxx.com with your domain

and last put {% endif %}

So in theme customization mode you will see your online store but when someone access it your online store they will redirect to the main headless domain.

I have applied same thing for this store
https://checkout.olivela.com will redirect to the https://www.olivela.com

If you need more assistance please let me know.

3

For SEO purposes, you really want to make sure that your redirects, including http://, https://, have a proper 301 redirect.

The best way I’ve known to do this is to use Cloudflare as your DNS and handle your redirects from there.