Header and footer
Header
Logo, main menu, search, account and cart. Add mega menus, menu highlights and a header button as blocks.
Setting up the menu
- In Shopify admin, go to Content → Menus and build your main menu. Second-level items become dropdown columns, third-level items become links inside them.
- In the theme editor, open Header and pick that menu.
- To turn a top-level item into a rich panel, add a Mega menu block and type the menu item's name in it. See the mega menu guide.
Highlights and the header button
- Menu highlight styles one menu item: a badge such as New or Sale, a colour, or an underline.
- Button adds a call to action next to the icons, for example Shop the edit.
Transparent header
On the home page the header can sit over your first slide or banner. Upload a light Transparent header logo so it stays readable over photos.
Settings
Color scheme
| Setting | What it does |
|---|---|
| Use the store's default color schemeToggle | Toggle |
| Color schemeColour scheme | Shown only when it applies to the options chosen above. |
Layout
| Setting | What it does |
|---|---|
| Header widthDropdown | ContainedFull width |
| LayoutDropdown | Logo left, menu centerLogo center, menu leftLogo center, menu belowLogo center, drawer menu |
Navigation
| Setting | What it does |
|---|---|
| MenuMenu | Menu |
| Add a block below, then set its "For item" to a top-level menu item. | |
| Menu hover effectDropdown | None (subtle fade)UnderlineBackground |
| Bold on hoverToggle | Toggle |
Style
| Setting | What it does |
|---|---|
| Header behaviorDropdown | StaticStickySticky (hide announcement on scroll) |
| Transparent headerToggle | Home page only. Every other page keeps the normal header. |
| Transparent header text colorColour | Shown only when it applies to the options chosen above. |
Logo
| Setting | What it does |
|---|---|
| Desktop logoImage | Image |
| Mobile logoImage | Image |
| Transparent header logoImage | Shown only when it applies to the options chosen above. |
| Store nameText | Shown instead of a logo when no logo image is set. |
| Desktop logo widthSlider | Slider |
| Mobile logo widthSlider | Slider |
Icons
| Setting | What it does |
|---|---|
| Show search iconToggle | Toggle |
| Show account iconToggle | Toggle |
| Show cart iconToggle | Toggle |
| Show cart totalToggle | Shows the running total beside the icon. Hidden below 750px.Shown only when it applies to the options chosen above. |
| Icon sizeDropdown | MediumSmall |
Hamburger menu
| Setting | What it does |
|---|---|
| Icon sizeSlider | Slider |
| PaddingSlider | Slider |
| Show backgroundToggle | Toggle |
| Background colorColour | Shown only when it applies to the options chosen above. |
| Menu icon colorColour | Shown only when it applies to the options chosen above. |
| Corner radiusSlider | Shown only when it applies to the options chosen above. |
Mobile drawer
| Setting | What it does |
|---|---|
| Secondary menuMenu | Menu |
| Show search iconToggle | Toggle |
| Show account iconToggle | Toggle |
| Show social iconsToggle | Toggle |
| Drawer animation speedDropdown | SlowMediumFast |
Spacing
| Setting | What it does |
|---|---|
| Desktop top and bottom paddingSlider | Slider |
| Mobile top and bottom paddingSlider | Slider |
Blocks
Blocks are the pieces you add, remove and reorder inside the section, under Add block.
Mega menu
| Setting | What it does |
|---|---|
| For itemText | Type the exact name of a top-level menu item to attach this mega menu to it. |
| LayoutDropdown | Choose what appears beside the menu columns. Links onlyLinks with collection imagesBannerDropdown list with imageProductsCollectionsBlog postsCustom HTML |
| ContainerDropdown | Set the width of the content wrapper. Use header's containerFull width |
Column images
Uses each linked collection's own image. Set it in Products > Collections.
| Setting | What it does |
|---|---|
| Image shapeDropdown | WideLandscapeSquarePortrait Shown only when it applies to the options chosen above. |
| Shop all button labelText | Leave blank to use "Shop all" with the menu item name.Shown only when it applies to the options chosen above. |
| Shop all button linkLink | Leave blank to link to the menu item itself.Shown only when it applies to the options chosen above. |
Banner
| Setting | What it does |
|---|---|
| Banner styleDropdown | Content belowContent over image Shown only when it applies to the options chosen above. |
| Banner imageImage | Shown only when it applies to the options chosen above. |
| Banner linkLink | Shown only when it applies to the options chosen above. |
| TitleText | Shown only when it applies to the options chosen above. |
| SubtitleText | Shown only when it applies to the options chosen above. |
| Button labelText | Shown only when it applies to the options chosen above. |
| HeadingText | Shown above the products, collections or blog posts.Shown only when it applies to the options chosen above. |
| Custom HTMLHTML | Shown only when it applies to the options chosen above. |
Content sources
| Setting | What it does |
|---|---|
| ProductsProducts | Used by the Products layout. |
| CollectionsCollections | Used by the Collections layout. |
| BlogBlog | Used by the Blog posts layout. |
Menu highlight
| Setting | What it does |
|---|---|
| For itemText | Type the exact name of any menu item, at any level, to highlight it. |
| Highlight styleDropdown | BadgeHand-drawn circleHand-drawn underline |
Badge
| Setting | What it does |
|---|---|
| Badge textText | Shown only when it applies to the options chosen above. |
| Badge shapeDropdown | PillSquareFlag Shown only when it applies to the options chosen above. |
| Badge positionDropdown | Applies on desktop. In the mobile menu the badge always sits beside the item. Above the menu itemBeside the menu item Shown only when it applies to the options chosen above. |
| Badge fillDropdown | FilledOutline Shown only when it applies to the options chosen above. |
| Badge colorColour | Shown only when it applies to the options chosen above. |
| Badge text colorColour | Shown only when it applies to the options chosen above. |
| Badge font sizeSlider | Shown only when it applies to the options chosen above. |
Hand-drawn mark
| Setting | What it does |
|---|---|
| Sketch styleDropdown | Single strokeDouble strokeLoose loop Shown only when it applies to the options chosen above. |
| ColorColour | Shown only when it applies to the options chosen above. |
| ThicknessSlider | Shown only when it applies to the options chosen above. |
| Draw animationDropdown | Applies on desktop. In the mobile menu the mark is always drawn. No animationDraw on page loadDraw on hover Shown only when it applies to the options chosen above. |
Button
| Setting | What it does |
|---|---|
| Button labelText | Text |
| Button linkLink | Link |
| StyleDropdown | Colors come from the header color scheme. PrimaryOutlineText only |
| Attention effectDropdown | A looping animation for a sale or promotion. Use on one button only. NoneGlowPulseShine |