Section: Header

Everything you'll need to know on how to setup your Header section.

The Header section controls the top navigation bar that appears on every page of your store. It includes your logo, main menu, search, account, cart, optional megamenus, an optional promotional button, sticky behavior, and a transparent-over-hero mode for editorial homepages. Up to 20 megamenu blocks can be added across all menu items.

The Header is a system section that lives in the Header group and applies to every page of your store. You don't add it manually — it's already in place.

1) In the theme editor, click on the Header section in the left sidebar. It's at the top, inside the Header group.

2) The right sidebar opens with all settings grouped by category. Use the headers (Logo, Color Scheme, Navigation menus, etc.) to navigate.

3) Configure each setting as explained below. Changes apply across the whole storefront immediately.

Set your logo in Theme Settings → Logo. Desktop and mobile logos are both configured there.

Main color scheme for the header. Pick from any of the schemes set up in Theme Settings → Colors. Controls the header background, link colors, and icon colors when the header is in its default solid state.

Color scheme for the mobile drawer menu. The off-canvas panel that slides in when visitors tap the hamburger icon. Pick a scheme that contrasts the page behind it.

Optional. Color scheme when header is transparent. Leave empty to use white text. Used on pages where the header floats over a hero image. Pick a scheme with light foreground colors so links remain readable on the photo.

Color scheme for search modal (shown when clicking search icon). Controls the appearance of the search panel that slides in. Often matches the main scheme; pick a different one if you want the search to stand out.

Transparency of the background (95% = almost opaque). Range 0–100%. Default 95%. Lower the value to add a subtle see-through effect; set to 100% for a fully opaque header.

The Shopify navigation menu used for the main header links. Default: main-menu. Create or edit menus in Online Store → Navigation. Any menu (with sub-items for dropdowns) can be selected here.

Text-transform applied to the main menu links: Default, UPPERCASE, lowercase, or Capitalize. Use UPPERCASE for editorial brands, Default for most stores.

Letter spacing for the main menu links. Value in 1/100 em (e.g. 10 = 0.10em). Range -2 to 20. Pair higher values (8–14) with the UPPERCASE transform for an editorial feel.

Text-transform applied to dropdown submenu items: Default, UPPERCASE, lowercase, or Capitalize. Often kept as Default for readability inside dropdowns.

Letter spacing for submenu items. Value in 1/100 em (e.g. 10 = 0.10em). Range -2 to 20.

Text shown on the promotional pill button in the header. For example: HOLIDAY SALE, NEW DROP, or 20% OFF. Leave empty to hide the button.

Where the promotional button links to — typically your current sale collection or campaign landing page.

Adds a clickable location row at the bottom of the mobile drawer menu — useful for store locator links or contact pages.

The location label shown in the drawer footer. Default: Nuestra tienda. For example: Find a store, Visit us, or your physical address.

The URL the location label links to — typically a store locator page or a Google Maps link.

Choose how the logo, menu, and action icons are arranged in the header bar:

• Logo center, menu left — menu links left, logo centered, icons right.
• Logo left, menu center — logo left, menu centered, icons right.
• Logo center, menu bottom — logo + icons on top row, full-width menu on a second row underneath.
• Logo left, menu left — logo and menu both aligned left, icons right.
• Drawer — hamburger menu on both desktop and mobile.

When using the Drawer layout, choose where the logo sits: Left or Center. Only visible when the Header layout is set to Drawer.

Only visible when Header layout is set to Logo center, menu bottom. Controls how the action icons (search, account, cart) balance against the logo in the top row:

• Icons right — all icons grouped on the right side, classic layout. Default.
• Mirrored (split left/right) — icons split between the left and right sides of the logo for a symmetric editorial layout (e.g. search on the left, account + cart on the right).

Tick this box to keep the header visible at the top of the page as visitors scroll down. Default: off.

Behavior when sticky is enabled: Always (header is always visible) or On scroll up (header hides when scrolling down and slides back in when scrolling up). On scroll up is recommended for mobile-heavy product pages.

Master switch. When ticked, the header floats transparently over the first section on selected page types. Hover or scroll past the hero to switch back to the solid main scheme. Default: off.

When transparent, header uses transparent color scheme if set, otherwise uses white text. On hover/scroll it returns to the main color scheme.

Tick this box to activate transparent mode on the home page. Default: on. Use only when your home page has a full-width hero or slideshow at the very top.

Tick this box to activate transparent mode on collection pages. Default: off. Useful when collection pages have a banner image at the top.

Tick this box to activate transparent mode on product pages. Default: off. Only use if your product pages start with a full-bleed image gallery.

The Header supports three megamenu types as blocks: Promotion Megamenu, Collections Megamenu, and Products Megamenu. Click Add block inside the Header section to choose. You can add up to 20 megamenu blocks across all types. Each block attaches to a navigation menu item by name.

Displays up to three promotional cards inside the dropdown of a menu item. Each card has its own image, heading, link, and link text — perfect for showcasing campaigns directly in the navigation.

Enter the exact menu item name to attach this promotion megamenu. The match is case-sensitive. For example: if your nav item is Sale, type Sale, not sale.

The first promotional card. Set Image 1 (1200 × 1200 px recommended), Heading 1, Link 1, Link text 1, and optionally tick Open in new tab. Leave the image empty to hide this slot.

The second promotional card. Same fields as Promotion 1 — Image 2, Heading 2, Link 2, Link text 2, and Open in new tab.

The third promotional card. Same fields as Promotion 1 and 2.

Displays a grid of collection cards with two optional promotional images on the side. Attach to a top-level menu item to show its sub-collections in a polished megamenu.

Enter the exact menu item name to attach this collections megamenu. The match is case-sensitive. The collections that appear are read from the sub-items nested under this item in Online Store → Navigation.

Two optional promotional images shown alongside the collection grid. Each image has a label and a link. Use them to spotlight key collections (e.g. Knitwear, Fall looks) within the megamenu.

The first promotional image inside the Collections Megamenu. Set the image, an Image label 1 (e.g. Knitwear), and an Image link 1.

The second promotional image inside the Collections Megamenu. Same fields — image, label, link.

Displays a horizontal carousel of product cards from a chosen collection — perfect for highlighting bestsellers or a featured collection directly inside a menu dropdown.

Enter the exact menu item name to attach this products megamenu. Case-sensitive match. For example: type Featured to attach to the Featured nav item.

The label shown above the products carousel inside the megamenu. Default: Featured Products. Customize per block — e.g. Bestsellers, New arrivals, or Just dropped.

The collection whose products appear in the carousel. Pick from your store's collections.

Maximum number of products to display in the carousel, between 3 and 12. Default: 6. Lower values (3–4) feel premium; higher values (8–12) work for content-rich brands.

The Menu item field must match your navigation item name exactly — including capital letters and spaces. For example, if your nav item is New Arrivals, the field must contain New Arrivals, not new arrivals or New-Arrivals.

Check both: Enable transparent header must be on, AND the matching page-type checkbox (Use on Home, Use on Collections, or Use on Products) must also be ticked. Both are required for transparent to activate on a given page.

The maximum is 20 megamenu blocks total across Promotion, Collections, and Products Megamenu types combined. If you reach the limit, remove unused blocks before adding more.

Always keeps the header visible at the top no matter how the visitor scrolls. On scroll up hides the header when scrolling down (giving more screen for content) and slides it back in the moment the visitor scrolls up. On scroll up is recommended for mobile and product pages where screen space is precious.

Yes — add a separate megamenu block for each nav item. Each block has its own Menu item field. You can mix types (Promotion on Sale, Collections on Shop, Products on Featured) on different items simultaneously, up to the 20-block limit.