We provide customers Multi Brand with Header Ecommerce used by big brands, bringing high aesthetics and logic. You can check this demo (pass: 4) to know how E-commerce header works.
The Header Ecommerce is a professional header and also requires more customization than other headers. However, you do not need to worry about this problem, we will guide you in detail so that you can create it.
In this guide, if you have 3 brand pages: WOMEN, MEN, and KIDS.
The WOMEN brand is homepage by default. Let's stick to the steps to build it:
First, add the Header Ecommerce or Header Ecomus (New) section to your Header Group.
There are currently three brands: Women, Men, and Kids. Each brand uses its own template.
The first brand (Women) uses the default Homepage template, so no additional template is required.
Create separate page templates for the remaining two brands: Men and Kids.
Go to Online Store > Pages > create the new pages for brands.
The first brand (Women) uses the Homepage, so no additional page is required.
Then assign them to the page template you just created.
Go to Theme customize > Pages > choose "Men", "Kids" pages to edit.
If you want to import "Men, Kids" template from Ecomus demo, you can follow this guide. You find "page.men.json" and "page.kids.json" to import.
In the "Header brands Ecomus" Navigation, a URL cannot be in two brands.
For example, if you put the "Collection/All" page under both WOMEN and MEN brands, the WOMEN brand will be activated when you access "Collection/All"
Go to Shopify admin > Content > Menu to create a navigation for the header menu.
In Header Ecommerce, you need to follow the structure:
Level 1: Brand pages (Women, Men, Kids)
Women → Links to the Homepage
Men → Links to the Men page
Kids → Links to the Kids page
Level 2: Menus for each brand
Level 3: [is_heading] and level 3 menu item
After completing the setup, save your menu and change the Handle to theme_brands
This is an important step.
To show a megamenu for Level 2, you add a "Mega menu block" and connect it with the key: "Level 1 - Level 2". To configure mega menu, you can check this document.
Example: Women - Shop.
