How can we have multiple store fronts (aka different website urls/themes) but the same backend?

[SweatFree]

Hey guys, I have a quick question.

So, I have one website ( www.sweatfree.co ) and one Shopify backend for it. How do I create more websites & themes but still have the same backed? 

So multiple websites/urls/storefronts but same backend.

[mageplaza-cs]

@SweatFree, I am from Mageplaza - Shopify solution expert.

To have multiple storefronts (websites/URLs/themes) with the same backend in Shopify, you can utilize Shopify Plus and Shopify's Multiple Storefronts feature. This allows you to manage multiple websites under one Shopify account.

Here are the steps and options to achieve this:

1. Use Shopify Plus with Multiple Storefronts

Shopify Plus supports Multiple Storefronts, which enables you to run multiple storefronts from one Shopify account. Each storefront can have its own theme, domain, and even custom designs. The benefit of this is that all these storefronts share the same backend, meaning you can manage inventory, orders, customers, and products across all of them in one place.

• How it works: You create separate storefronts (e.g., different URLs, different themes) and assign each one a different domain or subdomain (e.g., www.store1.com, store2.sweatfree.co).
• Customization: Each storefront can have its own theme or design, tailored to a different target audience or brand.
• Unified Backend: All inventory, customers, and product data are shared across all the storefronts.

Example:

• Main website: www.sweatfree.co
• Secondary storefront: www.sweatfreefitness.com (same backend but different theme and domain)

You can manage both stores from one Shopify account.

2. Create Multiple Themes within a Single Storefront

If you don't want to use Shopify Plus, another option is to use multiple themes within a single Shopify store. In this case, you'll need to configure each theme to target different URLs (either via subdomains or entirely separate domains), but all stores will still share the same backend.

• How to do it:
  1. Create new themes: Customize different themes for each of your storefronts.
  2. Configure URLs: Use subdomains (e.g., shop1.sweatfree.co, shop2.sweatfree.co) or different domains for each store.
  3. Use redirects or apps to point different domains/subdomains to the correct theme and pages.

Note that while this setup allows you to switch between different themes, the products, customer data, and orders will still be shared.

3. Use Shopify’s Multi-Channel Sales (for external sites)

If you are looking to expand to other sales channels like marketplaces, social media platforms, or external websites, you can use Shopify's multi-channel sales features. This doesn’t create full storefronts with separate themes but allows you to sell products from the same backend on different platforms.

• Example: You can integrate Shopify with platforms like Facebook, Instagram, Amazon, and others, and manage inventory from one backend.

4. Custom Solution Using Subdomains

If you're not on Shopify Plus, you can still implement subdomains and theme switching to mimic multiple storefronts. For example, store1.sweatfree.co could have a unique theme, while store2.sweatfree.co could use a different theme. This requires careful management of DNS settings and theme assignments but keeps everything under the same Shopify store.

5. Shopify Apps for Multi-Store Setup

There are third-party apps that can help with setting up and managing multiple storefronts within the same Shopify store :

• Shopify's "Markets" feature: Shopify allows you to create regions and localized experiences for different countries, all managed under the same backend.
  
  

I hope this can be useful to you.
Best regards.

[SweatFree]

Hi @mageplaza-cs , quick follow up question. We have sub-brands within the main brand. So, I wanted them all to be on the same parent domain, but have different look/colour/content. How do I create subdomains and then assign different colour/look/content to it. I know you can do it by markets, where by country I can make them look different. But how do we do it where they look different for different sub-brands? I didn't understand the point number 2 you were trying to explain. 

For example: imagine there are two different brands abc.sweatfree.co and xyz.sweatfree.co

I want both to look different. Say one has green colour and the other has red colour. Since abc.sweatfree.co would have content related to abc, so it has to be different than xyz.sweatfree.co which will have content related to xyz.
 

Right now I believe you can only have custom themes by markets/countries. How do I do custom themes/looks by subdomain?

[SweatFree]

Hi again @mageplaza-cs also aren't we allowed to only have one published theme? Any advice on this and the other followup would be amazing! Thank you! Because what you said in point number 2 is EXACTLY what I'm hoping to do through sub-domains!

[mageplaza-cs]

Hi @SweatFree, 
I apologize for the delay in responding.

Here’s a step-by-step guide to achieving this:

Step 1: Set Up Subdomains

1.1 Configure Subdomains in Your Domain Provider

1. Log in to your domain provider (e.g., GoDaddy, Namecheap, or Google Domains).
2. Navigate to DNS settings.
3. Add CNAME records for each subdomain:
   • Host/Name: subbrand1
   • Value/Points to: your-shopify-store.myshopify.com
4. Save changes.

1.2 Connect Subdomains in Shopify

1. In Shopify Admin, go to Settings > Domains.
2. Click Connect existing domain.
3. Enter your subdomain (e.g., subbrand1.yourstore.com) and follow the instructions.
4. Repeat for each subdomain you want to use.

1.3 Set Up Shopify Markets (Optional)

If you are targeting different regions or audiences:

1. Go to Settings > Markets.
2. Create a market for each subdomain.
3. Assign specific domains (e.g., subbrand1.yourstore.com).

---

Step 2: Assign Different Looks, Colors, or Content

Once subdomains are set up, you can customize the Shopify store to reflect unique styles and content for each subdomain.

Option 1: Use Separate Themes for Each Subdomain

1. In Shopify Admin, go to Online Store > Themes.
2. Publish a different theme for each market or subdomain (this requires Shopify Plus).

---

Option 2: Customize a Single Theme Using Liquid Code

If you’re using a single Shopify store and theme, use conditional logic in Liquid to differentiate styles and content based on the subdomain.

Add Logic for Colors and Styles

1. Edit the theme.liquid file or the relevant layout file.

2. Add conditions to load specific CSS for each subdomain:

{% if request.host contains 'subbrand1' %}
  <link rel="stylesheet" href="{{ 'subbrand1-styles.css' | asset_url }}">
{% elsif request.host contains 'subbrand2' %}
  <link rel="stylesheet" href="{{ 'subbrand2-styles.css' | asset_url }}">
{% endif %}
​

    3. Create subbrand1-styles.css and subbrand2-styles.css in Assets and define unique colors, layouts, and designs.

Customize Content for Each Subdomain

1. Use Liquid conditions to show different headers, footers, or sections:

{% if request.host contains 'subbrand1' %}
  {% include 'subbrand1-header' %}
{% elsif request.host contains 'subbrand2' %}
  {% include 'subbrand2-header' %}
{% endif %}

     2. Create custom header and footer files (subbrand1-header.liquid, etc.) in Sections or Snippets.