Header

What is the Header section?

The "Header" is a crucial part of your Shopify store, serving as the gateway to your brand and the first point of interaction for your customers. It provides a navigational framework and access to key areas of your site such as product collections, search functionality, and cart overview. A well-structured Header can enhance user experience and increase the efficiency of your site navigation.

Main settings

Layout

• Layout: Choose the layout for the header. The 'Transparent' option only works if the Image banner or Logo banner section is the first section.

General Settings

• Enable sticky page header: Keep the header fixed at the top as users scroll.
• Sticky header always visible: Ensure the sticky header remains visible without auto-hiding during scrolling.
• Sticky header background opacity: Adjust the transparency level of the sticky header's background. This setting works only with the 'Transparent menu' and 'Logo center, drawer menu' layouts.
• Sticky header background blur: Add a blur effect to the sticky header's background. This setting works only with the 'Transparent menu' and 'Logo center, drawer menu' layouts.
• Always blur header: Apply a blur effect to the header across all sections.
• Show separator line: Display a separator line in the header for enhanced structure. This setting is not visible on the homepage when the 'Transparent menu' layout is used.
• Show shadow: Add a shadow effect to the header for visual depth. This setting is not visible on the homepage when the 'Transparent menu' layout is used.

Menu

• Main menu: Select the primary navigation menu for your site, directing customers to various sections such as product categories, about pages, or contact information.
• Teaser menu: Displays three links adjacent to the hamburger menu icon on desktop devices. The teaser menu is only visible when using the 'Logo center, mobile menu' layout setting.
• Mobile footer menu: Choose a specific menu to be displayed in the footer on mobile devices, ensuring tailored and accessible navigation for users on smaller screens.

Header Logo

• Logo image: Upload or select the logo image for the header.
• Large screen logo width: Adjust the width of the logo for large screens.
• Mobile screen logo width: Adjust the width of the logo for mobile screens.

Transparent Header

• Transparent header: To display a transparent header, choose the 'Transparent' layout setting and ensure an Image Banner or Logo Banner is set as the first section.
• Logo image: Select an image to be displayed when the Image Banner is the first section.
• Custom navigation color: Set a custom color for the navigation text.

Drawer

• Title: Set the title for the navigation drawer, which is a collapsible menu that slides in from the side, commonly used in mobile site navigation to maximize space and maintain usability.

Search

• Placeholder text: Input text that will be displayed in the search field before the user begins typing.
• Suggestions title: Input a title for the search suggestions dropdown, prompting users with potential search queries or products as they begin to type in the search field.
• Suggestions menu: Specify the menu from which search suggestions will be generated, helping users navigate directly to popular or highlighted products and collections.

Customize promotion menu blocks

Promotion menus enable the creation of sophisticated navigation bars with multiple columns and offer the flexibility to include up to six images within a single promotion menu block, providing a more dynamic and visually engaging display.

Mobile view example