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 – Choose the layout for the header. The “Transparent menu” option only works when the Image Banner or Logo Banner section is placed as the first section on the page.
- Enable sticky page header – Keep the header fixed at the top as users scroll down the page.
- Sticky header always visible – Prevents the sticky header from auto-hiding while scrolling — it stays permanently visible.
- Sticky header background opacity – Adjust the transparency level of the sticky header background. Works only with the “Transparent menu” and “Logo center, drawer menu” layouts.
- Sticky header background blur – Add a blur effect to the background of the sticky header. 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, not just limited to the sticky state.
- Show separator line – Display a line below the header for structure and separation. This setting is hidden on the homepage when using the Transparent Menu layout.
- Show shadow – Add a subtle shadow beneath the header for visual depth. This is not displayed on the homepage when the Transparent Menu is used.
Header Logo
- Logo image – Upload or select your main logo to display in the header.
- Large screen logo width – Set the logo width specifically for desktop and larger screen sizes.
- Mobile screen logo width – Set the logo width specifically for smaller mobile screens.
- Main menu – Select the primary navigation menu for your store. This is the main set of links guiding customers to key site areas.
- Teaser menu – Choose a teaser menu to show three quick-access links next to the hamburger icon. This appears only when using the "Transparent menu" layout.
- Mobile footer menu – Select a dedicated menu for the mobile footer, giving users simple navigation on small screens.
Transparent Header
- 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.
Country/Region Selector
- Show country/region selector – Enable a dropdown to let users select their country or region.
- Show country code – Display the country code alongside the selector.
- Show country flag – Show a visual country flag next to the region selection for added clarity.
Language Selector
- Show language selector – Allow users to switch languages via a dropdown. Languages must first be added in your language settings.
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
