How to Add a Toggle in the Header to Switch Between Two Brands on One Shopify Store?

[Dev_Lehavi]

Hi everyone,

I’m managing a single Shopify store that sells two different product lines—leather bags and vegan bags. I want to implement a toggle switch in the header that allows customers to switch between these two lines.

Requirements:

1. Each brand has its own subdomain:
   • vegan.mystore.com → Vegan line
   • mystore.com → Leather line (default)
2. Each subdomain has different branding, navigation, and collections.
3. The toggle should:
   • Redirect users to the correct subdomain when clicked.
   • Remember the customer’s last selection (optional).
   • Dynamically update branding/navigation based on the selection.

Questions:

1. What’s the best way to implement this toggle? Should I use JavaScript, Liquid, or an app?
2. How can I detect the current subdomain and adjust the navigation accordingly?
3. Is there a way to persist the customer’s selection (e.g., using cookies or local storage) so they stay on the same product line when returning to the site?
4. Are there any Shopify apps that support this kind of multi-brand navigation toggle?

I’d appreciate any guidance, examples, or relevant Shopify documentation!

Thanks in advance! 🚀

[mageplaza-cs]

Hi @Dev_Lehavi 

I am from Mageplaza - Shopify solution expert.

This is a great setup and a common use case for multi-brand stores using subdomains on Shopify. You want a header toggle that can switch between mystore.com (Leather) and vegan.mystore.com (Vegan), with branding and navigation updating accordingly.

1. What’s the best way to implement the toggle? JavaScript, Liquid, or an app?
Best approach: A combination of Liquid for rendering the toggle, and JavaScript for handling redirection and persistence (cookies or localStorage).

Here’s a typical workflow:

• Use Liquid to check current domain/subdomain and render branding/navigation.
• Use JS in the toggle button to redirect to the correct subdomain.
• Optional: Use localStorage or cookies to remember the user’s preferred brand.

You don’t need an app unless you want advanced segmentation or user accounts syncing across domains.

2. How can I detect the current subdomain and adjust the navigation accordingly?
Use Liquid and Javascript:

Option A – Using request.host in Liquid:

{% assign is_vegan = request.host contains 'vegan' %}

{% if is_vegan %}
  <!-- Vegan brand navigation -->
{% else %}
  <!-- Leather brand navigation -->
{% endif %}

This will dynamically change content, menus, logos, colors, etc., based on the subdomain.

Option B – JavaScript fallback:

const currentDomain = window.location.hostname;
if (currentDomain.includes("vegan")) {
  // Adjust DOM or branding via JS
}

3. How to persist customer selection (e.g., stay on Vegan if they come back)?

You can use localStorage or cookies.

Example using localStorage:

// When user clicks toggle:
document.querySelector('#brand-toggle').addEventListener('click', function () {
  const current = window.location.hostname;
  if (current.includes("vegan")) {
    localStorage.setItem("preferred_brand", "leather");
    window.location.href = "https://mystore.com";
  } else {
    localStorage.setItem("preferred_brand", "vegan");
    window.location.href = "https://vegan.mystore.com";
  }
});

Optional Auto-Redirect on First Visit:

document.addEventListener("DOMContentLoaded", function () {
  const preferred = localStorage.getItem("preferred_brand");
  const host = window.location.hostname;
  if (preferred === "vegan" && !host.includes("vegan")) {
    window.location.href = "https://vegan.mystore.com";
  } else if (preferred === "leather" && host.includes("vegan")) {
    window.location.href = "https://mystore.com";
  }
});

You should avoid forcing redirect too aggressively, or it may annoy returning users.

4. Are there any Shopify apps that support this kind of multi-brand toggle?

There are no specific apps designed for toggling subdomain branding with this exact behavior. However, here are options that might help:

Useful Apps:

• Rebuy Personalization Engine – For personalizing product recommendations/branding (paid)
• Geolocation App by Shopify – Detects locale/language but can be customized for brand

But your use case is fairly custom — building the toggle manually gives you more control.

Please let me know if it works as expected!

Best regards!