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: Enable this setting to make the header stick to the top of the page as users scroll.
• Show separator line: Enable this option to display a separator line in the header.
• Show shadow: Enable a shadow effect for the Header to provide depth and subtle emphasis.

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