Header section
The Header section sets Highlight's logo, menu drawer, search, cart, account icon and sticky behaviour on every page.
Applies to: Highlight 4.1.0 and later. Added in: Highlight 1.0.0. Last checked: 2026-10-13 against Highlight 4.1.0.
The Header section is the bar at the top of every page: the logo, a Menu button that opens the menu drawer, and the search, account and cart icons. Highlight always shows its navigation in a drawer, on every screen size.
Where to find it: select Header in the Header group of the theme editor sidebar. The Header is the same on every page, so you can open it from any template.
Logo
- Logo image replaces the store name with your logo. Without an image, the header shows your store name as text.
- Logo image maximum height (25 to 100 px, default 40 px) sets the logo height on desktop. On screens narrower than 1024 px, and in the sticky header after scrolling, the logo is at most 40 px tall.
- On the home page the logo is the page's main heading (H1) for search engines.
Menu drawer
- The Menu button opens a drawer from the side with your menus. It shows up to three levels: a link with child links opens a sub-panel, with a back button.
- Primary navigation is the main menu of the drawer (default: the Main menu).
- Secondary navigation is an optional second menu under it, for example for About, Contact or FAQ.
- Show social icons adds your social icons at the bottom of the drawer.
- Show menu icon labels on desktop shows the words Menu, Search and Cart next to the icons on desktop. On smaller screens only the icons show.
Search and cart
- Show search adds a search icon that opens the search drawer with predictive results. See Predictive search theme settings.
- The cart icon shows the number of items. It opens the cart drawer, or goes to the cart page when Theme settings → Cart → Cart type is Page. See Cart theme settings.
Sticky header
Sticky header sets whether the header stays at the top of the screen while the customer scrolls:
- Disabled: the header scrolls away with the page.
- Always: the header stays visible at the top all the time. Add background color when header is always sticky gives it the store background color, so page content does not show through it, and removes the space above it on desktop.
- Only on scroll up (the default): the header hides while the customer scrolls down and comes back, in a compact version with a background, as soon as they scroll up.
Customer accounts
When customer accounts are turned on in Shopify admin → Settings → Customer accounts, the header shows an account icon. It opens Shopify's sign-in sheet; signed-in customers see their account links there.
- Customer account menu is the menu shown in that sheet for signed-in customers (default: the Customer account main menu). It works only with Shopify's new customer accounts.
- With customer accounts on, the search icon moves to the left of the header, next to the Menu button.
- Highlight 4.0.0 added this account icon and removed the account links from the menu drawer.
Language and country selectors
- Show language selector and Show country/region selector add the selectors at the bottom of the menu drawer. Both are off by default.
- A selector shows only when your store has more than one published language, or more than one country or region in Shopify admin → Settings → Markets.
Setting up the menus
Create the menus in Shopify admin
Open Shopify admin → Content → Menus. Edit the Main menu, or add a new menu, and nest links under a parent to create the second and third levels.
Pick the primary navigation
In the theme editor, select Header and choose your main menu in Primary navigation.
Pick the secondary navigation
Optionally choose a second, shorter menu in Secondary navigation. It shows under the primary menu in the drawer.
Check the drawer
Select Menu in the preview. Links with child links show an arrow and open their own panel.
Why is the menu in a drawer instead of the header?
Because Highlight is designed that way: the header stays clean, with only the logo and icons, and the navigation opens in a drawer on every screen size. Highlight does not support a horizontal menu or a mega menu in the header. A fourth menu level is not shown either; keep your menus to three levels.
Why did the account links move after 4.0.0?
Because Highlight 4.0.0 adopted Shopify's account component. The account links that used to be in the menu drawer were replaced by an account icon in the header, which opens Shopify's sign-in sheet with the Customer account menu. If you do not see the icon, turn on customer accounts in Shopify admin → Settings → Customer accounts.
Why does the logo look smaller when I scroll?
Because the sticky header uses a compact version after scrolling, with the logo at most 40 px tall. The same limit applies on screens narrower than 1024 px. Logo image maximum height applies to the full-size header on desktop.
All Header settings
Every setting, with its type and default.
Logo image (image): Replaces the store name in the header with your logo image.
Logo image maximum height (slider 25 to 100 px, default: 40 px): Sets the logo's maximum height on desktop. On screens narrower than 1024 px and in the compact sticky header, the logo is at most 40 px tall.
Show search (checkbox, default: on): Shows the search icon that opens the search drawer with predictive results.
Show menu icon labels on desktop (checkbox, default: on): Shows the words Menu, Search and Cart next to the header icons on desktop.
Sticky header (dropdown, default: Only on scroll up): Sets whether the header stays at the top while the customer scrolls: Disabled, Always, or Only on scroll up, which hides it while scrolling down and brings it back, compact, when scrolling up. Options: Disabled, Always, Only on scroll up.
Add background color when header is always sticky (checkbox, default: off): Gives the always-sticky header the store background color and removes the space above it on desktop. Used only when Sticky header is Always.
Primary navigation (menu picker, default: the main-menu menu): Sets the main menu of the menu drawer, with up to three levels.
Secondary navigation (menu picker): Sets an optional second menu under the primary menu in the drawer.
Show social icons (checkbox, default: off): Shows the icons from Theme settings → Social at the bottom of the menu drawer.
Header section: Customer accounts
Where to find it: Header group → Header → Customer accounts
Customer account menu (menu picker, default: the customer-account-main-menu menu): Sets the menu in Shopify's account sheet, which opens from the header account icon. Only works with the new customer account component.
Header section: Language selector
Where to find it: Header group → Header → Language selector
Show language selector (checkbox, default: off): Shows a language selector at the bottom of the menu drawer, when the store has more than one published language.
Header section: Country/region selector
Where to find it: Header group → Header → Country/region selector
Show country/region selector (checkbox, default: off): Shows a country/region selector at the bottom of the menu drawer, when the store sells to more than one country or region.
Related pages
- Announcement bar section: the other section of the Header group.
- Predictive search theme settings: what the search drawer finds.
- Cart theme settings: the cart drawer.
- Social theme settings: the profiles behind Show social icons.
Announcement bar
The Announcement bar section shows short messages above or below the Highlight header, with language, country and social icons.
Footer group
The Footer group holds Highlight's Footer section and the Text columns with icons section: menus, newsletter, social links, payment icons and selectors.