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.
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. |
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. (In the menu drawer, Bar below header) |
| 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 |
| 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.