Section settings

The Header section defines your store’s main navigation area, including the logo, menu, icons, and optional call-to-action elements. It’s the first element customers see when visiting your site and plays a key role in usability and branding.

Enable sticky header

Keeps the header visible as users scroll down the page. Helps improve navigation and visibility on long pages.

Style

Header layout options:

  • Logo above menu: Stacks the logo above navigation links.

  • Logo beside menu: Places logo and menu horizontally side-by-side.

  • Mobile drawer menu: Displays navigation in a collapsible drawer (ideal for minimalist or mobile-first layouts).

  • Logo center menu left: Centers the logo, with menu items on the left.

Border and Icons

  • Show border: Displays a subtle line below the header for added separation.

  • Border color: Supports transparency. This does not apply to transparent headers.

  • Border opacity: Adjusts the visibility of the border line.

  • Show icons: Toggles all header icons (search, cart, and log in).

  • Cart icon shape: Displays the cart icon in a circular button style when enabled.

  • Cart icon style options: Bag - Minimal shopping bag design, and Cart - Traditional shopping cart icon.

Logo, Layout, and Navigation

  • Logo image: Image picker (Recommended size: 300px by 100px) Learn more

  • Desktop width: Controls the maximum logo width on desktop.

  • Mobile width: Defines the logo width for smaller screens.

  • Main menu: Assign your main navigation menu here. Dropdowns are supported based on the theme design.

  • Mobile menu: Will be deprecated. Use the Mobile Menu section instead.

  • Search: Displays a search icon in the header.

  • Social icons: Shows social media icons based on links configured in Theme Settings -> Social media.

Call to action, Language selector, and Country/Region selector

  • Button text: Adds a CTA button in the header.

  • Button link: Define the URL the button links to.

  • Button color: Options are Black, White, Primary, and Secondary.

  • Show language selector: Displays a dropdown for customers to choose a store language. Only available if multiple languages are published. To add a language, go to your language settings.

  • Show globe icon: Adds a globe icon next to the language dropdown for visual clarity.

  • Show country/region selector: Displays a dropdown for choosing a country or region. Required for multi-market stores. To add a country/region, go to your markets settings.

  • Show country name: Displays the full name of the selected country next to the flag or currency code.

  • Show country flag: Displays a small flag icon for visual identification of the selected region.

  • Menu item: Highlights a specific navigation link.

  • Color: Use this to visually emphasize the link.

Transparent header and Mobile menu

  • Logo: Use the PNG format for overlays (Recommended size: 300px by 100px). Learn more

  • Enable transparent headers per page type: Home page, Collection pages, Article pages, Static pages, and Product pages.

  • Product page logo: Use a white or light version of your logo for visibility.

  • Secondary menu: Deprecated, will be replaced by the Mobile Menu section.

  • Navigation menu: Displays below the header on mobile.

Last updated