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

Store Design
, , , ,

Topic summary

A Shopify store owner wants to implement a header toggle to switch between two product lines (leather and vegan bags) using separate subdomains (mystore.com and vegan.mystore.com). Each subdomain requires distinct branding, navigation, and collections.

Key Requirements:

  • Toggle should redirect between subdomains
  • Optionally remember customer’s last selection
  • Dynamically update branding/navigation based on selection

Recommended Solution:

  • Use Liquid + JavaScript combination rather than an app
  • Detect subdomain using request.host in Liquid to render appropriate branding/menus
  • Implement JavaScript for toggle redirection functionality
  • Use localStorage or cookies to persist user preference across visits

Implementation Approach:

  • Liquid checks current domain and conditionally renders content
  • JavaScript handles toggle clicks and redirects to correct subdomain
  • Optional: Add localStorage logic to remember preference (with caution to avoid aggressive redirects)

App Alternatives:
No specific apps exist for this exact use case. Rebuy Personalization Engine or Shopify’s Geolocation app offer partial functionality, but a custom solution provides better control.

Code examples provided for both Liquid subdomain detection and JavaScript persistence logic.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

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:

  1. Each subdomain has different branding, navigation, and collections.
  2. 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?

  1. How can I detect the current subdomain and adjust the navigation accordingly?
  2. 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?
  3. 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! :rocket:

2 Likes
2

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 %}
  
{% else %}
  
{% 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!