Header and footer
Menus and mega menu
Build your navigation: dropdown menus, the mega menu, the image showcase and menu promotions.
On this page
The header navigation is built from a Shopify menu. The type of panel that opens depends only on the depth of your menu: there's no setting to choose.
Create the menu
Open navigation
In your Shopify admin, go to Online StoreNavigation and open the Main menu (handle main-menu), or create a menu.
Add the items
Add top-level items, then drag items under another one to create submenus. Maison shows three levels at most.
Assign it to the header
In the theme editor, in the Header section, choose this menu under Menu.
Dropdown or mega menu
| Item structure | Panel shown |
|---|---|
| No child items | A plain link. |
| Child items, no third level | A dropdown menu: a list of links. |
| At least one child item has its own child items | A mega menu: one column per child item, with its links underneath. |
A top-level item that has child items opens its panel instead of going to a page. Its own page is still reachable through the "View all ..." link at the top of the panel.
The mega menu image showcase
In a mega menu, Maison automatically adds a showcase of two images to the right of the columns. It's built from the first two child items (in menu order) that have an image:
- a link to a collection uses the collection image, or failing that, the photo of the first product in the collection that has one;
- a link to a product uses its main photo;
- a link to an article uses its image.
Other link types (pages, blogs, web addresses) are ignored. If no link has an image, there's no showcase and the columns take the full width. The showcase and menu promotions only appear on desktop (990px and up).
Menu promotion
The Menu promotion block replaces the automatic showcase with editorial content of your choice: an image, a heading, text and a link.
| Setting | Values | What it does |
|---|---|---|
| Menu itemFR: Élément de menu | Text | The exact title of the top-level menu item this promotion appears under, for example Femme. Leave it blank and the promotion is not shown. |
| Image | Image | — |
| Image shapeFR: Forme de l’image |
| — |
| HeadingFR: Titre | Text | — |
| TextFR: Texte | Rich text | — |
| LinkFR: Lien | Link | — |
| Link labelFR: Libellé du lien | Text | — |
Add the block
In the Header section, click Add block > Menu promotion.
Name the menu item
In Menu item, enter the exact title of the top-level item the promotion should appear under, for example Women. Capitalization and surrounding spaces are ignored.
Add the content
Image, heading, text, link and link label.
Good to know:
- The promotion only appears under an item that has child items (a dropdown menu or a mega menu).
- Several promotions can target the same item: one takes a single column, two or more are shown across two columns.
- In a dropdown menu, the promotion appears next to the list, with image and text side by side.
- On phones, promotions appear at the bottom of the item's sub-panel, in the menu drawer.
- Without an image, a placeholder illustration is shown, including on your online store.
- If both a link and its label are filled in, the label becomes an underlined link; otherwise the heading, or failing that the image, carries the link.
The menu drawer
On phones (and on desktop with Desktop navigation > Drawer), the menu opens in a side drawer. You move through the three levels in successive panels, each with a Back button and a "View all ..." link. The country and language selectors are at the bottom of the drawer. Without JavaScript, the drawer still works, in a simplified form.
Customer account menu
The header's Customer account menu setting chooses the menu offered in the account menu (orders, profile...). By default, it's the customer-account-main-menu menu created by Shopify.
Maison 1.0.0