How to Customize the Header?
STEP 1
Access your Shopify Admin's Theme Library to open the theme customizer.
STEP 2
Make sure you are on the Sections tab and search for the Header group.
STEP 3
Click on the Header section to open it's settings.
⚙️ Header Settings Overview
Here’s an overview of all settings available in the Header section:
Layout
Menu on center – Centers your navigation menu when the Desktop logo position is set to Middle left.
Sticky header – Choose how the sticky header behaves when scrolling.
Options:Always, reduce logo size
Always
On scroll up
None
Note: Make sure to enable the Sticky header in Theme Settings > Professional Widgets.
Transparent header – Displays the header transparently over hero sections for a sleek look.
Show separator line – Adds a subtle divider below the header.
Desktop Settings
Show search – Displays a search icon in the header.
Open dropdown on hover – Opens dropdown menus when hovered (instead of clicked).
Desktop logo position – Choose where to place your logo:
Top center
Top left
Middle center
Middle left
Desktop menu – Select your main menu (e.g., Main Menu).
Desktop menu type – Choose how the menu appears:
Dropdown
Mega menu
Note: This option is for the Mega Menu Widget.
Drawer
Note: This will display a hamburger icon menu for a drawer slide out.
The menu type will automatically adjusts for mobile.
Mobile Settings
Mobile menu – Choose the menu displayed on mobile. If left blank, the desktop menu will be used.
Secondary menu – Optionally display another menu showing only first-level items.
Secondary menu title – Add a label for the secondary menu (only shown if enabled).
Show separator line above the secondary menu – Adds a line for visual separation.
Mobile logo position – Choose between Center or Left.
Color Schemes
Default color scheme – Choose a base color scheme (e.g., Custom).
Custom color scheme – Select from your theme’s available schemes (e.g., Scheme 2).
Menu color scheme – Set a separate color scheme for the menu area.
Transparent header color scheme – Define colors when the header is transparent.
Selectors
Country/region selector – Enable for desktop and/or mobile to allow users to switch markets.
To add countries or regions, go to Settings > Markets in your Shopify Admin.
Language selector – Enable for desktop and/or mobile to allow switching between translations.
To add languages, go to Settings > Languages in your Shopify Admin.
Customer Accounts
Show avatar – Displays the customer avatar when logged in with Shop.
To manage customer accounts, go to Settings > Customer Accounts in Shopify.
Spacing
Bottom margin – Controls spacing below the header (default: 0).
Top padding / Bottom padding – Adjust vertical spacing.
Options: Small, Medium, Large, or custom pixel value.