Header
The bar at the top of every page: your logo, navigation, search, and the account and cart icons.
What it’s for. Getting people where they’re going. It carries your logo, the main menu (with mega-menu dropdowns), predictive search, and the cart and account links. On phones it collapses into a hamburger that opens a slide-in menu drawer.
When to use it. It’s part of the Header group, so it shows on every page automatically. You don’t add it like a normal section — edit it under Header in the theme editor, and it updates everywhere at once.
Ways to use it
- Mega menu by game — point the menu at a Shopify navigation menu, then build mega-menu columns (Magic, Pokemon, Lorcana…) so one dropdown shows everything organized in up to four columns, with an optional promo image for new releases.
- Search-forward shop — turn on search and pick the full-width style with quick-filter chips (MTG, Pokemon, Yu-Gi-Oh!) so people can jump straight into a game.
- Clean and simple — centered logo, search as an icon, just the essentials.
Tips
- Menus come from Shopify navigation (
Online Store > Navigation). The header just points at one — to add or reorder links, edit the menu there, not here. Add child links to a menu item to get a normal dropdown. - The mega menu opens on whichever top-level link matches the mega-menu trigger word (default “Browse”). Spell it the same in both places or the big dropdown won’t appear.
- Sticky keeps the header pinned as people scroll; “show on scroll up” hides it going down and brings it back when they scroll up.
- Predictive search shows live results as people type, capped by your max-results setting.
- The cart icon shows a live item count; the account icon can be hidden if you don’t want it.
- On phones, set Mobile search to Icon in the header bar to put a magnifier beside the cart that opens the menu drawer with the search field already focused: search becomes one tap from anywhere. Pair it with Account icon on mobile set to In the menu drawer to free up the bar slot it uses.
Settings
Header behavior
| Setting | Type | What it does |
|---|---|---|
| Enable sticky header | On / off | Default: false |
| Transparent header on homepage | On / off | Header will be transparent over hero sections |
| Text color when transparent | Dropdown | Light, Dark |
| Show header on scroll up | On / off | Header hides when scrolling down and reappears when scrolling up. Requires sticky header to be enabled. |
| Use hamburger menu on desktop | On / off | Show the hamburger menu icon on desktop instead of the full navigation. Menu slides in from the right when clicked. |
Logo
| Setting | Type | What it does |
|---|---|---|
| Logo image | Image | — |
| Logo position | Dropdown | Left, Center |
| Logo height (px) | Number | Enter any pixel height. The header grows to fit. |
| Logo: top & bottom spacing | Slider | Default: 0 |
| Logo: left & right spacing | Slider | Default: 0 |
Navigation
| Setting | Type | What it does |
|---|---|---|
| Main menu | Menu | Default: main-menu |
| Navigation placement | Dropdown | Where the desktop menu sits. A centered logo always places the menu below. (Inline (beside logo), Below (own row)) |
Mega menu
| Setting | Type | What it does |
|---|---|---|
| Mega menu trigger | Text | Enter the exact menu item title that should trigger the mega menu (e.g., “Browse” or “Shop”) |
| Number of columns | Dropdown | How many columns to display in the mega menu (1 column, 2 columns, 3 columns, 4 columns) |
Search
| Setting | Type | What it does |
|---|---|---|
| Show search | On / off | Default: true |
| Search style | Dropdown | Inline (always visible), Full width between logo & icons, Below header (full width), Icon (click to expand) |
| Search icon position | Dropdown | Left, Right |
| Quick-filter chips position | Dropdown | Chips only show with the full-width search style. (Right, Left) |
| Mobile search | Dropdown | Bar shows a compact always-visible search below the header on mobile instead of inside the menu drawer. Icon puts a magnifier beside the cart that opens the menu drawer with the search field focused — pair it with “Account icon on mobile” set to In the menu drawer to free up the slot. The icon follows Mobile placement below, so it moves into the drawer with the other icons when that is set to In the menu drawer. (In the menu drawer, Bar below header, Icon in the header bar) |
| Show quick searches | On / off | One-tap buttons below the search box. Each adds its word to the search (e.g. tapping “Pokemon” searches your text plus “Pokemon”) — they’re search shortcuts, not category filters. Hidden in the inline (in-bar) style, which has no room for a second row; they show in the full-width, popover, and drawer placements. |
| Quick search terms | Text | Comma-separated words tapped to add to the search. Use terms that appear in your product titles/types (e.g. game names). |
| Maximum results | Slider | Default: 6 |
Account
| Setting | Type | What it does |
|---|---|---|
| Show account icon | On / off | Default: true |
| Account icon on mobile | Dropdown | Applies below 990px only, and only when “Show account icon” is on. In the menu drawer frees the bar slot — for the mobile search icon, typically — while keeping login one tap away. Ignored when Mobile placement below is set to In the menu drawer, which already moves every icon there. (In the header bar, In the menu drawer, Hidden) |
| Icon size | Slider | The search, account, and cart icons. |
| Mobile placement | Dropdown | Where the search, account, and cart icons sit on mobile. Auto keeps them in the bar, unless the logo is centered — a wide centered logo leaves no room, so they move into the menu drawer. (Auto, In the header bar, In the menu drawer) |
Call to action
| Setting | Type | What it does |
|---|---|---|
| Button label | Text | Shows a button after the header icons. Leave blank to hide. |
| Button link | Link | — |
| Position | Dropdown | Above and below stack the button in its own row on desktop — useful when the bar gets crowded. On mobile they behave like “after the icons”. (Left (before the logo), Right (after the icons), Right (above the icons), Right (below the icons)) |
| Button style | Dropdown | Solid, Outline |
| Button size | Dropdown | The header grows to fit the larger sizes. (Small, Medium, Large) |
| Mobile placement | Dropdown | The bar is tight on small screens, so the drawer is the default — it pins the button at the bottom of the menu. Choose the bar to keep it beside the icons. (In the header bar, In the menu drawer) |
Social media
| Setting | Type | What it does |
|---|---|---|
| Show social media icons | On / off | Display social media links in the header. Configure URLs in Theme Settings > Social media. |
| Social icons position | Dropdown | Desktop only. Icons come from the social links in theme settings. (Left (before the logo), Right (with the icons)) |
| Icon size | Slider | Default: 16 |
Currency
| Setting | Type | What it does |
|---|---|---|
| Show currency selector | On / off | Lets shoppers switch currency. Only appears when multiple currencies are available through Shopify Markets. |
| Selector display | Dropdown | Currency code (USD $), Country name (United States · USD $) |
Blocks
This section supports blocks — repeatable content items you add, configure, and reorder inside the section.
Block: Menu column
| Setting | Type | What it does |
|---|---|---|
| Heading | Text | Leave blank to use the menu title |
| Menu | Menu | — |
| View all link | Link | — |
| View all text | Text | Default: View all |
Block: Promotional image
| Setting | Type | What it does |
|---|---|---|
| Image | Image | — |
| Link | Link | — |
| Heading | Text | Default: New arrivals |
| Text | Text | Default: Shop the latest releases |
Was this page helpful?
Spotted something wrong, or want to suggest an improvement? Email support → — your message goes straight to engineering.