Header
Use the settings from the current section to build the Header as required.
Header
The Header includes additional subsections such as the Topline, Search, Menu dropdowns, Badges, and Contact info. Hide any subsection by clicking on the eye icon that appears when a title is hovered over.
Logo position Choose where the logo appears:
Left
Center
Menu position Choose where the navigation menu appears:
Left
Center
Combine these settings to create different layouts:
Logo left + Menu left – Logo followed by the menu.
Logo left + Menu center – Logo on the left, menu centered.
Logo center + Menu center – Centered logo with menu below.
Logo center + Menu left – Centered logo with menu aligned left.
Layout
Sticky header Control how the header behaves when scrolling:
None – Sticky header is disabled.
On scroll up – Appears only when scrolling up.
Always – Always visible while scrolling.
Disable sticky header on mobile Turns off sticky behavior on mobile devices.
Sticky bottom shadow Adds a subtle shadow below the header.
Bottom shadow on mobile Choose when the shadow appears:
None - Shadow is disabled.
Show on subpages only - Disabled on the Home page, while keeping it on all other pages.
Show always – Always visible.
Utilities
The features described below appear in the Topline.
Country/region selector
Note! Displays a country/region selector (requires store market setup). Read more information in the 'Markets' help page.
Required steps:
Apply settings in Shopify admin -> Settings -> Markets.
Turn on the optionin the current section.
Language selector
Note! Displays a language switcher (requires a translation app). Read the 'Localization and translation' help page for the details.
Recommended app: Shopify Translate & Adapt app
Required steps:
Install the app and apply the desired configurations.
Enable the option in the current section.
Social media links
Required steps:
Link social accounts in Theme settings -> Social media.
Activate the option in the Header.
Note! On mobile devices, selectors and social icons appear under the Menu drawer once the hamburger icon is pressed.
Open search
Additional settings are available in the Search.
Control how search appears in the header:
Enabled – Displays the Search bar on the right side of the navigation menu.
Disabled – Shows the search icon instead, alongside other header icons.
Customer account
Control how customer accounts appear and behave in your store.
Manage whether the customer account option is shown.
Note! Legacy customer accounts are not supported.
Login type Choose how customers sign in:
Popup – Opens a login pop-up without leaving the page.
Menu (Pop-up only) Select a menu to display within the customer account pop-up.
Login page – Redirects to a separate login page.
Color
To set specific colors for tab labels and top menu items, use the settings in the Tab item color and Menu item color section groups.
Text / Text hover Set colors for tab labels, top menu items, and header icons (Contact info, Account, Cart, and Search).
Background Set the main header background color.
Tabs and navigation bar background Set the background color for the second header line (when the Tab navigation is enabled).
Tab item color
Text / Text hover Set colors for tab labels.
Menu item color
Text / Text hover Set colors for top menu links.
Show background on hover Highlights menu items when hovered.
Background hover / active Set the highlight background color
Background gradient hover / active Apply a gradient effect to the highlight.
Last updated