Render website UI conditionally based on the subdomain

Online Store and Theme Development
, ,
1

Many modern websites and web applications operate across multiple sub-domains to serve different audiences, brands, or purposes (for example, https://www.freedombuilt.com/, https://nautilife.freedombuilt.com/, or https://isaidyes.freedombuilt.com/). In these scenarios, it’s often necessary to conditionally render different UI layouts, styles, or content depending on which sub-domain the visitor is accessing.

Specific Context:
I’m working on a Shopify theme implementation where the same theme needs to load different sections or UI elements dynamically, based on the active sub-domain.

However, I’ve encountered a significant challenge:
When a product is added to the cart on https://www.freedombuilt.com/, the cart does not persist across https://nautilife.freedombuilt.com/ or https://isaidyes.freedombuilt.com/. Carts created on one sub-domain remain isolated and do not carry over to the others.

:white_check_mark: My objective is to ensure that the same cart contents are shared across all sub-domains, so users have a seamless experience when navigating between them.

I’d appreciate any guidance on how to achieve this—thank you in advance!

2

Hi @Ahsan_Ahmed

After digging into this, it appears that there is no supported way to share the cart across subdomains using Liquid themes and the Online Store channel. Each subdomain will have its own isolated cart.

You could attempt to synchronize cart contents between subdomains using JavaScript and the Ajax API, but this would be a hacky solution and could easily break or cause issues with Shopify’s checkout and cart logic. It is not recommended or supported.

If you build your storefront using Hydrogen or a custom headless solution, you have full control over cart management and can implement cross-subdomain cart sharing by setting a default cart cookie domain for all sessions, and then using the Storefront API to fetch, update, or create the cart.