Header and navigation

The Header controls the top navigation area of the storefront.

Open the Header

1. Go to Online Store > Themes > Customize.
2. In the left sidebar, open Header.
3. Adjust the settings and save.

Main Settings

• Color scheme: Controls the header background, text, icon, and link colors. Choose a scheme with enough contrast for your logo and navigation links.
• Mega menu color scheme: Controls the expanded mega menu panel. Use the same color scheme as the header for a seamless menu, or a contrasting scheme if you want the open menu to feel like a separate panel.
• Navigation: Selects the Shopify menu used for the desktop navigation and mobile menu. Edit menu items in Shopify under Online Store > Navigation.
• Logo position: Controls where the logo appears in the header. Use a left logo for a more standard ecommerce layout, or a centered logo for a more editorial/brand-led layout.
• Cart icon: Chooses the icon style used for the cart link. Use the option that best matches your brand language.
• Sticky header: Controls whether the header stays visible while customers scroll. Use this when you want navigation, search, and cart access to remain easy to reach.
• Position header on top of content: Places the header over the first section instead of taking up its own space above the page. This works best with image-led first sections such as Hero Split or Slider.
• Show currency selector: Displays the currency selector when Shopify Markets/multiple currencies are configured.
• Show language selector: Displays the language selector when multiple languages are configured.
• Show search icon: Shows or hides the search icon in the header.
• Show account icon: Shows or hides the customer account icon. This depends on your Shopify customer account settings.

Header spacing is controlled with top/bottom padding for desktop and mobile. Use smaller padding for compact navigation and larger padding for a more spacious editorial header.

Sticky Header

Use Sticky header when you want customers to access navigation, search, account, and cart controls while scrolling.

Common choices:

• Use no sticky header for simple stores or highly visual pages where the header should stay out of the way.
• Use a sticky header for larger catalogs where customers move between collections often.
• Test sticky behavior on mobile, especially if your announcement bar is also visible.

Position Header on Top of Content

Enable Position header on top of content when you want the header to overlay the first section, such as a visual homepage hero.

Use this with first sections that have enough visual space behind the header. If the header overlaps text, buttons, or important imagery, disable this setting or adjust the first section design.