The header holds your logo, navigation, and an optional call-to-action button, with mega menu blocks available for dropdown-style navigation.
Layout
- Desktop layout - Logo left links center, Logo center links left, or Logo top links below. Applies on desktop only; on mobile the logo is always centered.
- Hide when scrolling down - hides the header as visitors scroll down and brings it back as soon as they scroll up.
As visitors scroll, the floating pill automatically condenses into a slim full-width bar pinned to the top of the page, and expands back into the pill when they return to the top. This happens whether or not Hide when scrolling down is on.
Logo
- Logo - if left blank, displays your store name as text.
- Logo width
Navigation
- Navigation menu - choose the menu shown in the header. Add mega menu blocks below to give a top-level item a visual dropdown.
Call to action
- Show link as button - only applies to top-level links.
- Menu item - the name of the top-level menu item the button will be added to. For multiple items, separate with a comma.
- Button style - Solid, Outline, or Link.
Styling
- Color scheme
- Show border - the border style and width are set in Theme settings.
Mega menu blocks
To give a top-level menu item a mega menu dropdown:
- In the theme editor, select the Header section and click Add block.
- Choose Mega menu // auto or Mega menu // custom.
- In the block's Menu item setting, enter the exact name of the top-level menu item it applies to. The block matches the item by its name, so the spelling must match (capitalization doesn't matter).
Add one block per menu item; the item needs a submenu in the navigation menu, or the block renders nothing.
| Block | What it does |
|---|---|
| Mega menu // auto | Turns the menu item's submenu links into a visual dropdown of image cards. Each image is pulled automatically from the linked collection or product; nothing else to set up. Choose an Image ratio for the cards (Square keeps the dropdown compact). |
| Mega menu // custom | Builds a custom dropdown: link columns drawn from the item's submenu, plus a row of featured cards you add as blocks nested inside this one. Toggle Show submenu links as column headings (each first-level submenu link becomes a column heading with its own links listed beneath) and choose an Image ratio for the featured card images. |
Featured cards (custom mega menu)
The custom mega menu's featured cards are added individually: select the Mega menu // custom block and click Add block inside it. Mix and match the three card types in any order. There's no hard limit on the number of cards, but the row doesn't wrap, so each extra card makes the others narrower; we recommend up to four.
| Block | What it does |
|---|---|
| Collection card | Links to a Collection, using its image (or its first product's image). Leave the Heading blank to use the collection's title. |
| Product card | Links to a Product, using its featured image, with an optional Show price line. Leave the Heading blank to use the product's title. |
| Content card | A hand-built card: your own Image, Heading, and Link. |
A card whose picker is still empty shows a placeholder in the theme editor so you can select and configure it, but renders nothing on the storefront.
On mobile, navigation collapses into the menu icon automatically; there's nothing extra to configure.