The Header is one of the main navigation areas of the Maison theme. It can display your logo, navigation menu, search, customer account, shopping cart, product comparison, language and country/region selectors, and Mega menu content.
Maison also provides separate desktop and mobile layout controls, sticky header behavior, transparent header support, menu highlighting, custom colors, and spacing settings.
Section overview
The Header includes settings for:
- Language and country/region selectors
- Logo and homepage H1 behavior
- Desktop and mobile navigation menus
- Seven desktop header layouts
- Sticky header behavior
- Search, account, cart, and comparison icons
- Icon size
- Mobile logo position
- Mobile language and country/region selectors
- Mobile social media icons and contact information
- Transparent header text color
- Menu item highlighting and tags
- Custom section colors
- Section width, divider, and spacing
- Mega menu blocks with promotional image or video content
Maison supports up to 5 Mega menu blocks in the Header.
STEPS:
Open the Header settings
The Header is part of the theme's Header group and is available across the storefront.
- Open the Maison theme editor.
- Select Header from the Header group.
- Configure the languages/countries, logo, navigation, toolbar, mobile, transparent header, highlight, color, and section settings as needed.
- Click Save when finished.
Configure the logo
The Header uses the logo configured globally under Theme settings > Logo.
Available logo settings include:
| Setting | Description |
|---|---|
| Logo | Selects the main desktop logo. |
| White logo | Selects an alternate desktop logo for the transparent header. |
| Logo width | Sets the maximum desktop logo width. |
| Mobile logo | Selects a separate logo for mobile devices. If not set, Maison uses the main logo. |
| Mobile white logo | Selects the mobile version of the white logo. If not set, Maison uses the desktop white logo. |
| Mobile logo width | Sets the maximum width of the mobile logo. |
The Header section also includes:
| Setting | Description |
|---|---|
| Enable logo as H1 on home page | Uses the logo container as the H1 heading on the home page for SEO purposes.  |
If no logo is selected, Maison displays the store name instead.
Select the desktop and mobile menus
Use the menu settings to control the navigation displayed in the Header.
| Setting | Description |
|---|---|
| Menu | Selects the main navigation menu used in the desktop Header. |
| Mobile menu | Selects a separate menu for the mobile Menu Drawer. |
If Mobile menu is not selected, Maison uses the main Menu for the mobile Menu Drawer.
Choose the desktop Header layout
Maison provides seven desktop Header layouts.
| Header layout | Description |
|---|---|
| Logo left, menu left | Places the logo on the left with the navigation aligned to the left. |
| Logo left, menu center | Places the logo on the left with the navigation centered. |
| Logo left, menu drawer | Places the logo on the left and uses the menu drawer instead of displaying the full desktop navigation. |
| Logo center, menu left | Centers the logo while keeping the navigation on the left. |
| Logo center, menu split | Centers the logo and divides the main navigation between the left and right sides of the logo. |
| Logo center, menu below | Centers the logo and displays the navigation below it. |
| Logo center, menu drawer | Centers the logo and uses the menu drawer instead of displaying the full desktop navigation. |
To change the layout:
- Open the Header settings.
- Locate Header layout.
- Select the desired layout.
- Preview the Header on desktop.
- Click Save.
When using a drawer layout, you can also configure Menu icon text to display text next to the menu icon.
Configure the Sticky header
The Sticky header setting controls whether the Header remains accessible while customers scroll.
Available options include:
| Setting | Description |
|---|---|
| None | The Header scrolls away with the page. |
| Always | Keeps the Header sticky while customers scroll. |
| On scroll up | Shows the sticky Header when customers scroll upward. |
Choose the behavior that best fits your storefront navigation.
Configure the Header toolbar
The Header toolbar can display shortcuts to key storefront features.
Available settings include:
| Setting | Description |
|---|---|
| Show search icon | Displays the search entry in the Header. |
| Show account icon | Displays the customer account entry. |
| Show shopping cart | Displays the shopping cart entry. |
| Show compare icon | Displays the product comparison entry when Product comparison is enabled in Theme settings. |
| Icons size | Controls the size of Header toolbar icons. |
Available Icons size options are:
- Extra large
- Large
- Medium
- Small
Configure language and country/region selectors
Maison can display localization selectors in the desktop Header.
| Setting | Description |
|---|---|
| Show language selector | Allows customers to switch between available storefront languages. |
| Show country/region selector | Allows customers to switch between available countries or regions. |
| Show country name | Displays the country name together with its currency information. |
Show country name is available only after Show country/region selector is enabled.
The language selector requires at least two languages configured for the store, and the country/region selector requires multiple markets to be available. Please check this article for more information about the feature.
Configure the mobile Header and Menu Drawer
Maison provides separate controls for the mobile Header.
Available settings include:
| Setting | Description |
|---|---|
| Mobile logo position | Positions the mobile logo in the center or on the left. |
| Show language selector | Displays the language selector in the mobile Menu Drawer. |
| Show country/region selector | Displays the country/region selector in the mobile Menu Drawer. |
| Show social media icons | Displays configured social media links inside the mobile Menu Drawer. |
| Contact information | Adds custom contact information inside the mobile Menu Drawer. |
Available Mobile logo position options are:
- Center
- Left
The mobile Menu Drawer can also display the customer account and product comparison entries when their related Header settings are enabled.
Set up a Transparent header
Maison supports a transparent Header when the first section on the page supports transparent header behavior, such as the Slideshow section. Please check this article, it shows you more detail about how to set up the transparent header.
Use the following Header setting:
| Setting | Description |
|---|---|
| Transparent header text | Controls the Header text and icon color while the Header is transparent. |
For the logo, configure White logo and, if needed, Mobile white logo under Theme settings > Logo.
When the Header is displayed transparently over media, the alternate white logo can be used to maintain visibility.
Highlight specific menu items
The Menu highlight settings allow you to make selected navigation items stand out.
First choose a Highlight type:
| Highlight type | Description |
|---|---|
| None | Does not apply special highlighting. |
| Text highlight | Applies a visual highlight style to selected menu item labels. |
| Tag | Adds a small text tag to selected menu items. |
When using Text highlight, enter the exact menu item labels in Menu item labels, one label per line.
Available Highlight style options include:
- Colored text
- Background highlight
- Underline
- Fancy underline
- Marker
- Stencil
- Scribble
If Scribble is selected, you can also choose a scribble style:
- Circle
- Simple underline
- Sketch underline
- Squiggle underline
- Squiggle underline (alt)
Depending on the selected style, you can configure the Highlight color and Highlight gradient.
Add menu tags
Use the Tag highlight type to add labels such as New, Hot, or Sale beside selected menu items.
Enter one rule per line in Menu highlights using this format:
Menu item | Tag
For example:
Shoes | New
Sale | Hot
The menu item label must match the navigation item you want to target.
You can also configure:
| Setting | Description |
|---|---|
| Tag text color | Controls the text color of the menu tag. |
| Tag background color | Controls the background color of the menu tag. |
Add a Mega menu
Use a Mega menu block to create a larger dropdown for a top-level navigation item.
Maison supports up to 5 Mega menu blocks in the Header.
To add a Mega menu:
- Open the Header section.
- Click Add block.
- Select Mega menu.
- In Menu item, enter the exact name of the top-level menu item that should use the Mega menu.
- Add and configure Promotion blocks if needed.
- Click Save.
The Menu item value must match the navigation label you want to replace with the Mega menu.
The Mega menu can display the selected menu item's child and grandchild links together with promotional content.
On mobile, the same Mega menu content is available inside the expandable Menu Drawer navigation.
Please refer to this article, it shows you how to set up the mega menu.
Add Promotion content to a Mega menu
Each Mega menu can include Promotion blocks for visual campaign or product content.
A Promotion block supports image or video media.
| Setting | Description |
|---|---|
| Media type | Chooses between Image and Video. |
| Image | Selects the promotional image. |
| Alt text | Adds accessibility text for the media. |
| Image fit | Controls whether the image uses Cover or Contain. |
| Source | Selects an uploaded video or an external video URL. |
| Video | Selects an uploaded video. |
| URL | Adds an external YouTube or Vimeo video. |
| Cover image | Adds a preview image for an external video. |
| Video fit | Controls whether the video uses Cover or Contain. |
| Aspect ratio | Controls the media aspect ratio. |
| Link | Makes the Promotion clickable. |
| Open link in new tab | Opens the destination in a new tab. |
| Corner radius | Controls the media corner radius. |
| Overlay opacity | Controls the strength of the media overlay. |
| Overlay color | Sets the overlay color when opacity is greater than zero. |
| Size | Controls the Promotion block size. |
The Promotion content area can include customer-facing content blocks such as headings, text, buttons, icons, images, videos, dividers, and spacers.
Configure Header colors
The Header can use the global theme colors or custom colors for this section.
Available settings include:
| Setting | Description |
|---|---|
| Custom colors | Enables section-specific Header colors. |
| Text color | Controls the Header text and icon color. |
| Background color | Controls the Header background color. |
| Background gradient | Applies a gradient background and overrides the solid background color when set. |
Use Transparent header text separately for the Header's transparent state.
Configure section width and spacing
Use the section settings to control the Header container and spacing.
| Setting | Description |
|---|---|
| Section width | Controls the Header content width. |
| Show section divider | Adds a divider to the Header section. |
| Spacing | Controls Header padding on desktop and mobile. |
Available Section width options are:
- Narrow
- Page
- Wide
- Full
Preview the Header on both desktop and mobile after changing width or spacing.
Troubleshooting
If the Header does not display as expected, check the following:
- Make sure the correct Menu is selected.
- If the mobile navigation is incorrect, check Mobile menu. If it is empty, Maison uses the main Menu.
- If the desktop menu is not visible, check whether a drawer Header layout is selected.
- If the logo does not appear, configure it under Theme settings > Logo.
- If the transparent Header logo is difficult to see, add a White logo and adjust Transparent header text.
- Make sure a compatible first section is used when you want a transparent Header.
- If the compare icon does not appear, enable Product comparison in Theme settings as well as Show compare icon in the Header.
- If the language selector does not appear, make sure multiple languages are configured and assigned to the appropriate markets.
- If the country/region selector does not appear, confirm that the store has the required markets configured.
- If a highlighted menu item is not working, confirm that the entered label matches the menu item label.
- For menu tags, use the
Menu item | Tagformat on each line. - If a Mega menu does not appear, confirm that its Menu item exactly matches the corresponding top-level navigation item.
- If Mega menu Promotion content does not display correctly, check the media, size, link, and nested content settings.
- Save your changes and preview the storefront on both desktop and mobile after updating the Header.
Need Further Assistance
If you encounter any issues or need additional help with your Maison theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
Share:
How to Set Up Predictive Search in Maison
How to Set Up the Comparison Table Section in Maison