Guides
Header and menus
Build your store's menus, set up the header, dropdown panels and phone menu, and configure the announcement bar above it.
The top of every page is made of three sections in the header area: the Announcement bar, the Header and the Menu drawer. To edit them, go to Online Store > Themes > Customize and select them in the Header group on the left. A few header options live in Theme settings > Brand and Theme settings > Appearance.
Build your menus
The links in the header come from menus you build in your Shopify admin:
- Go to Online Store > Navigation.
- Open a menu, such as Main menu, or select Add menu.
- Add menu items and link each one to a collection, product, page or web address.
- To nest an item, drag it under and slightly to the right of another item.
- Select Save menu.
Propel shows up to three levels:
| Level | On desktop | In the phone menu |
|---|---|---|
| Top-level items | Across the top of the header. An item with sub-links opens a dropdown. | The main list. An item with sub-links has an arrow that opens its own list. |
| Second level | Listed in the item's dropdown. | Listed when the shopper opens the top-level item, after a link to all of that item. |
| Third level | Grouped under their second-level item in the dropdown. | Listed under their second-level item. |
Header
Select the Header section to change these settings.
| Setting | Default | What it does |
|---|---|---|
| Mega menu width | Contained | Desktop dropdowns only. Contained matches the page width. Full width spans the whole screen. |
| Menu | main-menu | The navigation across the top of the header on desktop. Items with sub-links, or with a Mega menu panel block, open a dropdown. |
| Customer account menu | customer-account-main-menu | Links in the account menu for signed-in customers. Used only when customer accounts are turned on. |
| Utility style | Icons | How the search, mode, account and cart controls look on desktop: Icons, Icons with labels or Labels only. Phones always use icons. |
The right side of the header holds:
- Search, which opens a search panel with suggestions as the shopper types.
- Mode, which lets shoppers pick Light, Dark or System. See Colors: palette and color roles.
- Country/Region and Language, shown only when your store has more than one country or language. Both lists open together in one small panel.
- Account, shown when customer accounts are turned on.
- The cart, with its item count. Its name comes from Cart name in Theme settings > Cart and checkout.
On screens narrower than 1200px, the header shows a menu button, your logo, search, account and cart. Mode and the country and language choices move into the menu drawer. On desktop, if the top-level links don't fit on one row (for example after translation), the header switches to the menu button too.
The footer also offers the country, language and mode choices.
Mega menu panel block
By default, a dropdown shows the menu item's name and its sub-links. Add a Mega menu panel block to the Header to give one dropdown its own heading, text and featured product. The Header holds up to 12 blocks.
| Setting | What it does |
|---|---|
| Menu item position (1 = first) | Which top-level item in the header menu this dropdown belongs to. 1 is the first item. |
| Eyebrow | Small label above the dropdown heading. Leave empty to hide. |
| Heading (one line per row) | The dropdown heading. Leave empty to use the menu item's name. |
| Description | Short text under the heading. |
| View all label | Text of the link to the menu item's own page. Leave empty to use the menu item's name. |
| View all meta text | Short extra text beside the View all link, such as a product count. Screen readers skip it. |
| Routes eyebrow | Small label above the list of sub-links. Shows only when the menu item has sub-links. |
| Feature product | Adds a product card to this dropdown. |
| Feature badge label | Badge on the feature product's card. Only used when a feature product is set. |
A top-level item with no sub-links still opens a dropdown when a Mega menu panel block points to it.
If you reorder the menu in Online Store > Navigation, check that each block's Menu item position still matches the item you want.
Menu drawer
The Menu drawer opens from the header's menu button. On phones and tablets it is the main navigation. Below the links it shows the mode choice and, when your store has more than one country or language, the country and language choices. The header's search control opens the drawer's search panel.
| Setting | Default | What it does |
|---|---|---|
| Navigation menu | main-menu | The menu listed in the drawer. Usually the same menu as the Header's Menu. |
| Eyebrow | Empty | Small text above the Menu heading. Leave blank to hide it. |
| Search description | Search products, articles and pages. | Short text shown above the search field. |
Announcement bar
The Announcement bar sits above the header. It holds one or more messages.
Section settings
| Setting | Default | What it does |
|---|---|---|
| Display mode | Single message | Single message, Rotating messages (one at a time, with a counter and arrows) or Stacked messages (every message shows). |
| Stick to top | Off | Keeps the bar pinned to the top of the screen while shoppers scroll. |
| Allow dismiss | Off | Shoppers can close the bar. It comes back when you change the messages. |
| Play messages automatically | Off | Rotating only. Plays through the messages once, with a pause button. It never plays for shoppers who have reduced motion turned on. |
| Autoplay interval (seconds) | 6 | How long each message stays, from 6 to 12 seconds. Only used when Play messages automatically is on. |
| Background color | Empty | Optional. Leave both colors empty to follow the theme in light and dark mode. A custom color stays the same in dark mode. |
| Text color | Empty | Used only with a background color. If it is hard to read, or left empty, light or dark text is chosen automatically. |
Message block
| Setting | What it does |
|---|---|
| Tag | Short label before the message. |
| Message | The message text. Leave empty to hide this message. |
| Link label | Text for a link after the message. |
| Link URL | Where the link goes. The link shows only when both the label and URL are filled in. |
| Countries | Show this message only in these countries: two-letter codes separated by commas, for example GB,IE. Leave empty for all countries. |
Delivery threshold block
This block shows how much more the shopper needs to spend for free delivery, for example "$20.00 to go for free delivery." It uses Free shipping threshold in Theme settings > Cart and checkout. It appears only when Enable free shipping progress bar is on there and the shopper pays in your store currency. You can add one Delivery threshold block.
It has the same Tag, Link label, Link URL and Countries settings as the Message block.
Theme settings for the header
Brand
In Theme settings > Brand:
| Setting | Default | What it does |
|---|---|---|
| Logo | Empty | Shown in the header. Without a logo, the shop name shows instead. |
| Logo width | 140px | Width of the logo in the header, from 40px to 320px. Height follows the image's proportions. |
| Show shop name when no logo | On | Only used when no logo is set. When off, the header shows no shop name (it is still read out to screen readers). |
| Favicon | Empty | The small icon in browser tabs and bookmarks. Use a square image. |
Appearance
In Theme settings > Appearance, under Header layout:
| Setting | Default | What it does |
|---|---|---|
| Sticky header | On | Keeps the header pinned to the top as the page scrolls. Turn it off to reclaim space when you use a large main menu. |
| Close buttons | Text | How drawers, dialogs and messages show Close: Text, Icon or Icon and text. Match the header's Utility style for a consistent look. |