Header

Theme editor → Header (appears above every page). Limited to one instance.

Logo

• Image — the logo image.
• Transparent header logo — an optional white (or otherwise light) version of the logo, used only by the transparent header. While the header is transparent the white logo is shown, and it cross-fades back to the main logo as soon as the header takes on its background. Ignored unless Transparent header is on and both logos are set.
• Show settings for — pick Desktop or Mobile before setting the width below.
• Width (desktop) — range 1–15rem, default 4rem.
• Width (mobile) — range 1–10rem, default 4rem.

Design

• Backdrop blur — blurs whatever sits behind the header bar, so content scrolling under it is frosted rather than sharp. Default off. On a transparent header the blur only kicks in once the header has taken on its background — there’s nothing to blur while it’s transparent.
• Transparent header — on the home page only, the header starts with no background and its logo, menu and icons turn white, so it sits over a full-bleed hero. The configured color scheme and opacity fade back in as soon as the customer scrolls away from the top, or opens a mega menu. Every other page keeps the normal header. Default off.
  • Pair this with Transparent header logo above, and with Include header offset on the first section, so the hero starts underneath the header rather than below it.
• Color scheme — default Scheme 1.
• Background opacity on scroll — the header background’s opacity once the page is scrolled. Range 0–100%, step 10%, default 90%. Ignored while a transparent header is in its transparent state.
• Layout — arrangement of logo and menu:
  • Logo left, menu centre (default)
  • Logo left, menu left
  • Logo centre, menu left
• Visibility — Always show, or Show on scroll up (header hides as the customer scrolls down, reappears scrolling up). Default: Always show.
• Full width — removes the side margins so the header spans edge-to-edge. Default off.

Navigation

• Menu — the main navigation menu (linked from Shopify’s Navigation settings).
• Secondary menu — an optional extra menu shown next to the header icons (e.g. for a language switcher, “Track order” link, etc.).

Mobile navigation

• Menu link size — size of top-level links in the mobile menu. Base or H0–H6. Default H6.
• Sub-menu link size — size of nested/child links. Default H6.
• Secondary menu link size — size of the secondary menu’s links inside the mobile menu. Default Base.
• Show social media icons — adds the social media icons from theme settings to the bottom of the mobile menu. Default off.

Icons

• Show search icon — default on.
• Show cart icon — default on.
  • Cart icon (only when the cart icon is shown) — Shopping bag, Shopping basket, or Shopping cart. Default: Shopping bag.
• Show account icon — default on.

Blocks

The header supports two special block types, added to the Menu navigation as extra dropdown content (attach a block to a top-level menu item to turn its dropdown into a mega menu):

Mega menu links

A mega menu made of manually-added links, laid out in columns.

• Menu item — the menu item’s name. Used to match this mega menu to its menu item when Menu item link is empty.
• Menu item link (recommended) — pick the same URL used by the actual menu item this mega menu should attach to. This is the reliable way to pair a mega menu with its menu item, since — unlike the menu item name — it doesn’t change if the menu item is renamed or translated.
• Color scheme — the mega menu panel’s color scheme.
• Padding — range 2–10rem, default 4rem.
• Column count — 1–6, default 6.
• Add link items as sub-blocks within it for the actual columns of links.

Mega menu collections

A mega menu that shows a grid of collections instead of plain links.

• Menu item / Menu item link / Color scheme / Padding / Column count — same as above.
• Heading size — H1–H6 for each collection’s title. Default H4.
• Use a different size on mobile — set a separate mobile title size.
• Aspect ratio — 1:1, 4:5, 3:4, 2:3, 4:3, or 16:9 for each collection image. Default 1:1.
• Use a different aspect ratio on mobile — set a separate mobile aspect ratio.
• Collections — pick which collections appear in the grid.