Header and announcement bar
The header holds your logo, main menu, search, account, cart, and the country and language selectors. Above it, the announcement bar shows rotating messages or a scrolling ticker.
Before you start
Create your main menu in Content > Menus. Top-level items become the header links; their sub-links open dropdowns or mega menus.
Add your logo in Theme settings > Logo and favicon.
How to set it up
Step 1: Choose the menu and layout
- In the theme editor, click Header in the left sidebar.
- Pick the Menu (1), usually Main menu.
- Choose a Menu hover effect (2) and a Desktop layout (3): logo left with the menu centered or left, or the menu left with the logo centered.
- Set Sticky header: always visible, visible when scrolling up, or none.
Step 2: Set up the icons
- Under Burger menu, Search, Account and Cart, choose for each whether it shows as an icon, icon and text, or text, separately on desktop and mobile.
- The Cart group also sets the item count style (number or dot) and the cart icon.
- Turn on Show country and language selectors to show the pickers in the header. Markets and languages come from Settings > Markets and Settings > Languages in Shopify admin.
Step 3: Make the header transparent (optional)
- Under Transparent header, choose Home page only or All pages.
- Pick the Text color scheme when transparent: usually a light scheme over dark images.
- The first section on the page should have a media background, such as Product Stage, Image banner or Video.
Step 4: Add announcements
- Click Announcement bar above the header and add Message blocks: each has a text and an optional link.
- Choose a Style: rotating messages or a scrolling ticker, and its speed.
Settings reference
Header
| Menu | A menu from Content > Menus. |
|---|---|
| Menu hover effect | Underline follows Theme settings > Buttons > Link hover. Options: Underline, Sliding pill, Text roll, Dot, Dim the others. |
| Show dropdown icons | The small arrow next to menu items with a dropdown or mega menu. |
| Dropdown style | For menu items with links but no mega menu. Attached dropdowns slide down from the header and dim the page, like mega menus. Options: Attached to the header, Floating card. |
| Mobile secondary menu | Small links under the main menu in the mobile drawer. |
| Desktop layout | Options: Logo left, menu center, Logo left, menu left, Menu left, logo center. |
| Full width | Turns this on or off. |
| Sticky header | Options: None, Always, On scroll up. |
| Bottom border | Turns this on or off. |
| Mobile layout | |
| Layout | Phones and tablets. Options: Menu left, logo center, Menu left, logo left, Logo left, menu right. |
| Transparent header | |
| Transparent over first section | The first section should have a media background. Options: Never, Home page only, All pages. |
| Text color scheme when transparent | Colors from Theme settings > Colors. |
| Burger menu | |
| Show on desktop | Opens the Menu drawer section from the Overlays group when it is added; otherwise the header's own menu. |
| Style on desktop | Options: Icon, Icon and text, Text. |
| Style on mobile | Options: Icon, Icon and text, Text. |
| Label | Empty: the usual name, in the shopper's language. |
| Search | |
| Style on desktop | Options: Icon, Icon and text, Text. |
| Style on mobile | Options: Icon, Icon and text, Text. |
| Label | Empty: the usual name, in the shopper's language. |
| Show on | Options: Desktop and mobile, Desktop only, Mobile only. |
| Account | |
| Show account | Turns this on or off. |
| Style on desktop | Options: Icon, Icon and text, Text. |
| Style on mobile | Options: Icon, Icon and text, Text. |
| Label | Empty: the usual name, in the shopper's language. |
| Show on | Options: Desktop and mobile, Desktop only, Mobile only. |
| Customer account menu | Links shown in the account sheet, such as Orders and Profile. |
| Cart | |
| Style on desktop | Options: Icon, Icon and text, Text. |
| Style on mobile | Options: Icon, Icon and text, Text. |
| Label | Empty: the usual name, in the shopper's language. |
| Show on | Options: Desktop and mobile, Desktop only, Mobile only. |
| Item count | Options: Number, Dot. |
| Icon | Options: Bag, Tote, Cart, Basket. |
| Country and language | |
| Show country and language selectors | Turns this on or off. |
| Country/currency | Turns this on or off. |
| Language | Turns this on or off. |
Announcement bar
| Style | Options: Rotating messages, Scrolling ticker. |
|---|---|
| Rotation speed | Slider. |
| Ticker duration | Time for one full loop. Higher is slower. |
Message block
| Text | |
|---|---|
| Link | Where the link goes. |
Section width, corners, padding, color scheme, divider and visibility work the same in every section: see Section layout and spacing. Headings, subheadings and descriptions: see Section headings and text.
How it works
- On screens below 990px the header switches to its mobile layout and the menu opens in the menu drawer.
- Menu items with sub-links open a dropdown (attached to the header or as a floating card). Add a Mega menu block to replace a dropdown with a large panel: see Mega menu.
- With Show on desktop under Burger menu, the menu button also shows on desktop and opens the menu drawer.
Troubleshooting
The header doesn't become transparent.
Check Transparent over first section, and that the first section of the page has a media background. Sections with a plain background keep the header solid.
A menu item has no dropdown.
Only items with sub-links in Content > Menus open a dropdown, unless a Mega menu block is set to that item.