Header and navigation
The header group holds two sections: the Announcement bar and the Header. Menus are built in your Shopify admin under Content › Menus. The theme decides how they are shown.
Header styles and layouts#
Select the Header section in the theme editor.
| Setting | What it does |
|---|---|
| Style | Scroll edge has no bar: the page blurs and fades as it passes under the header. |
| Desktop layout | Logo centered also centers the logo on mobile, with the menu button on the left. |
- Scroll edge has no visible bar. The page blurs and fades as it passes under the logo and the menu.
- Glass capsule holds the header in a floating rounded bar.
- Solid bar is a full-width bar in the page color.
Logo#
| Setting | What it does |
|---|---|
| Logo | The store name shows as text when no image is chosen. 600 x 200px .png recommended |
| Logo over a dark picture | Used while the header floats over a dark first section on the home page. |
| Logo width on desktop | |
| Logo width on mobile |
Menu#
| Setting | What it does |
|---|---|
| Main menu | |
| Menu layout | With pages at every width, the header shows the first pages of the menu as words on mobile and keeps the rest behind the menu button. |
| Pages shown on mobile | Applies when pages stay in the header on mobile. Short names fit best. |
| Header on the home page | Name, pages, and cart only keeps the home page quiet: search, account, and country move behind the menu button. |
| Dropdown menus | Add a Menu promotion block to show a picture in the dropdown of one menu item. |
| Open dropdown menus on hover | Applies to devices with a mouse. Menus always open with a click, a tap, or the keyboard. |
A menu item with nested links opens a dropdown. With Columns when a menu has three levels, a menu that has second and third level links is set in columns: second level links become column headings. To show products, a picture or a composed panel under a menu item, add a menu panel block, described below.
Menu drawer#
The menu drawer is the panel that opens from the menu button, on mobile and on any screen when Menu layout is set to Menu button at every width.
| Setting | What it does |
|---|---|
| Size | Small is a compact list for long menus. Medium sets the pages as titles. Large adds a number before each page. |
| Secondary menu | Shown in small type under the main menu. Useful for help, shipping, or contact pages. |
| Menu panels on mobile | How a menu item that has a menu panel opens in the drawer. |
| Show social media icons |
Tools: search, account and cart#
| Setting | What it does |
|---|---|
| Search and account | |
| Show search | |
| Show account | Appears when customer accounts are active in your store settings. |
| Customer account menu | |
| Cart |
The account link uses Shopify's customer account component. It appears when customer accounts are turned on under Settings › Customer accounts.
Behavior#
| Setting | What it does |
|---|---|
| Sticky header | The top bar scrolls away with the page. The header stays. |
| Over the first section of the home page | The header floats over the first section, without a background, until the page scrolls. The Scene section has its own setting for this. |
To float the header over a Hero section, use that section's own Start under the header setting. Over the first section of the home page is for any other first section.
Menu panels#
A menu panel replaces the dropdown of one top-level menu item with a richer panel. Panels are blocks of the Header section. There are three kinds.
How a panel finds its menu item#
Every panel block has a Menu item field. Type the name of a top-level item of your main menu exactly as it is written in the menu: same words, same spelling. If the menu item is named Shop, type Shop. The panel then opens under that item on desktop and inside the menu drawer on mobile.
- If the name does not match any top-level item, the panel is not shown.
- If you rename the menu item in your Shopify admin, update the Menu item field of its panel.
- If your store is translated, type the name as it is written in the store's default language.
- One panel per menu item. A menu item without a panel keeps its normal dropdown.
Panel: Products#
| Setting | What it does |
|---|---|
| Shows products under one menu item. The layout follows the number of products: one is a feature, two or three are large cards, four to six a grid, more a strip that scrolls sideways. | |
| Menu item | Type the name of a top-level item of the main menu, exactly as it is written there. The panel opens under that item. |
| Label | A small label above the links. The menu item name is used when this is empty. |
| Products | Hand-picked products. Leave empty to show a collection. |
| Collection | Used when no products are picked. When empty, the panel shows the collection the menu item links to, or all products. |
| Products to show | |
| Show the links of the menu item | Lists the links nested under the menu item beside the products. |
| Show add to cart on the cards | |
| Products on mobile | |
| Width | |
| Color scheme | |
Panel: Index#
| Setting | What it does |
|---|---|
| Sets the links nested under one menu item in columns: second-level links become column headings, third-level links sit under them. | |
| Menu item | Type the name of a top-level item of the main menu, exactly as it is written there. The panel opens under that item. |
| Style | |
| Show product counts | Ledger only. Shows the number of products beside links to collections. |
| Label | Used as the heading when the menu item has two levels only. |
| Note under the first column | |
| Note under the second column | |
| Note under the third column | |
| Note under the fourth column | |
| Footnote | |
| Footnote link label | |
| Footnote link | |
| Width | |
| Color scheme | |
Panel: Feature#
A free composition. Add the Panel: Feature block, then add up to four Tile blocks directly after it in the block list. Tiles belong to the feature panel above them, so their order in the list matters.
| Setting | What it does |
|---|---|
| A free composition under one menu item. Add up to four Tile blocks right after this block: they belong to the panel above them. | |
| Menu item | Type the name of a top-level item of the main menu, exactly as it is written there. The panel opens under that item. |
| Layout | |
| Size | Small keeps the visual low and wide. Large gives it the height of a poster. |
| Label | |
| Show the links of the menu item | |
| Width | |
| Color scheme | |
The tiles you can add:
- Tile: Picture or video: an image or a silent video loop with a heading, a line of text and a link.
- Tile: Statement: one sentence and an optional source.
- Tile: Email signup: a heading, a line of text and an email field. One per header.
- Tile: Collection list: a heading and a list of collections you choose.
- Tile: Blog post: one blog post, with or without its excerpt.
- Tile: Store information: a heading, a short text and a button.
Menu promotion#
The Menu promotion block adds a picture with a heading and a link to the normal dropdown of one menu item. Use it when you want a picture but not a full panel.
| Setting | What it does |
|---|---|
| Menu item | Type the name of a top-level menu item that has a dropdown. The promotion shows in that dropdown on desktop. |
| Image | 960 x 720px .jpg recommended |
| Heading | |
| Text | |
| Link |
Menu badges#
A Menu badge is a small pill after the name of a menu item, such as New. It shows wherever that item is listed: in the header, in dropdowns and panels, and in the menu drawer.
| Setting | What it does |
|---|---|
| A small pill after the name of one menu item, like New or On sale. It shows wherever that item is listed: in the header, in dropdowns and menu panels, and in the menu drawer. | |
| Menu item | Type the name of a menu item exactly as it is written in the navigation. Items of any level work. |
| Label | |
| Tone | Sale uses the sale badge color from theme settings. |
Unlike panels, a badge can target a menu item of any level. The name must still match the menu item exactly. The Sale tone uses Sale color from Theme settings > Product badges.
Announcement bar#
The Announcement bar sits above the header. It can also be added inside a page as a section. Add Message blocks for news and Countdown blocks for a real deadline, up to eight blocks in total.
| Setting | What it does |
|---|---|
| Short news above the header or inside a page: several messages, one after the other or as a moving line, and a countdown to a real date. Add message and countdown blocks. | |
| Messages show as | One at a time needs two messages or more. A moving line stays still for visitors who ask for reduced motion. |
| Change messages automatically | A pause button is always shown while messages change by themselves, and the bar waits while the pointer or the keyboard is on it. |
| Change every | |
| Show previous and next buttons | |
| Show pause button | Messages always wait while the pointer or the keyboard focus is on the bar, and never move for visitors who ask for reduced motion. The button adds a permanent pause. |
| Message width | Keeps the arrows close to the message when messages show one at a time. |
| Time for one pass of the moving line | |
| Side by side messages on mobile | |
| Look | |
| Size | Small is a thin line. Medium is 36 px. Large is 44 px with text at body size. The height is reserved before the page paints, so nothing below it moves. |
| Text | |
| Alignment | |
| Width | |
| Behavior | |
| Show on | |
| Keep at the top while scrolling | Applies in the header group, with a header that is set to stay in view. When off, the bar scrolls away and the header stays. |
| Close button | |
| Show from | Optional. A date and time with a time zone offset, such as 2026-11-20T09:00:00+01:00. Before it the bar is not shown. |
| Show until | Optional, same format. After it the bar is not shown. |
Message block#
| Setting | What it does |
|---|---|
| Icon | Shown before the text. |
| Mark | A word in a small pill before the text, such as New. |
| Text | |
| Link label | Shown after the text. Without a label the whole message is the link. |
| Link |
Countdown block#
A countdown runs to one moment that is the same for every visitor. It does not restart for each visitor and it cannot be set to a rolling deadline.
| Setting | What it does |
|---|---|
| Counts down to one real moment, the same for every visitor. It does not restart: a timer that resets or an invented deadline is not allowed by the Shopify Theme Store. | |
| Icon | |
| Text before the countdown | |
| End date and time | With a time zone offset, such as 2026-11-28T23:59:00+01:00. Without an offset the store time zone is used. Leave empty to hide the block. |
| Show seconds | |
| When the time is over | |
| Text when the time is over | |
| Link label | |
| Link | |
Write dates in the form 2026-11-28T23:59:00+01:00: the date, the letter T, the time on a 24-hour clock, then your offset from UTC. Without an offset the theme uses your store's time zone. The same format is used by Show from and Show until on the bar, by the Notice section and by the password page.
Search panel#
Selecting search in the header opens a panel. Before a visitor types, the panel can show products, quick links and popular searches. While typing, it lists results from Shopify's predictive search. Add the Search panel block to the Header section to change what it shows. Without the block, the panel uses the defaults listed below.
| Setting | What it does |
|---|---|
| What the search panel shows before a word is typed, and which results it lists while typing. Products always come first, as small cards with their prices. | |
| Before typing | |
| Show products | |
| Products heading | |
| Products | Leave empty to show the first products of the collection below, or of the whole catalog. |
| Collection | For example a best sellers collection. |
| Products to show before typing | |
| Show quick links | |
| Quick links heading | |
| Quick links menu | Up to 8 links. Leave empty to use the main menu. |
| Popular searches heading | |
| Popular searches | One search per line, up to 8. Type what your customers really look for. Leave empty to hide. |
| While typing | |
| Products to show while typing | |
| Show search suggestions | |
| Show collections | |
| Show pages | |
| Show blog posts | |
| Results per group | For collections, pages and blog posts. |
Pressing Enter opens the full search results page, described in Collection and search.
Country and language selectors#
Selectors appear only when there is a choice to make: the country selector when your store sells in more than one market, the language selector when your store is published in more than one language. Set up markets under Settings › Markets and languages under Settings › Languages.
There are three places for selectors:
- Header. Selector in the header set to Compact shows short codes, such as CH and EN, that open a list.
- Menu drawer. The drawer always carries the selectors.
- Footer. Selectors in the footer set to Full shows two labeled selectors, with a search field when the list of countries is long.
| Setting | What it does |
|---|---|
| Selector in the header | The compact selector shows codes, such as CH and EN, and opens a list. The menu drawer always carries the selectors. |
| Compact label | |
| Show country selector | Appears when your store sells in more than one market. |
| Show language selector | Appears when your store is published in more than one language. |
The Country suggestion popup can also suggest a better match to a visitor. See Popups and password page.
Footer#
The footer has two modes. Without column blocks it is a quiet two-column foot: links on the left, small print on the right. With column blocks it becomes a classic footer.
| Setting | What it does |
|---|---|
| Add column blocks for a classic footer, or keep only the two quiet columns: links on the left and small print on the right. | |
| Footer menu | |
| Text after the store name | For example: sold by your company name. |
| Show policy links | Lists every policy published in your store settings after the footer menu. A policy already in the menu is not repeated. |
| Country and language | |
| Selectors in the footer | Full shows two labeled selectors, with a search field when the list of countries is long. |
| Show country selector | Appears when your store sells in more than one market. |
| Show language selector | Appears when your store is published in more than one language. |
| Icons | |
| Show social media icons | |
| Show payment icons | |
Blocks you can add:
- Brand (up to 1): Logo, Logo width, Text.
- Menu: Heading, Column menu.
- Text: Heading, Text.
- Image: Heading, Image, Link.
- Social media links (up to 1): Heading.
- Small print row: Label, Text comes from, Text, Show a link to the policy.
- Email signup (up to 1): Heading, Text, Button label, Small print.
- Follow on Shop (up to 1): .
- Also accepts app blocks.
The Small print row block can write itself from Theme settings > Delivery and returns: set Text comes from to delivery, returns or guarantee.