Header

Ask AI

Open in ChatGPT

Ask ChatGPT about this page

Open in Claude

Ask Claude about this page

1. What is Header?

The Header section is the topmost section of your Shopify store, containing key navigation elements such as the logo, menu, search bar, shopping cart icon, and account access. It ensures seamless navigation and brand recognition for visitors.

2. Section Components

⚠️ Note: This guide only focuses on the settings for the whole Header section. To understand how to set up each block (a.k.a each mega menu style), go to its specific document.

Section		Add a primary navigation area that appears at the top of every page.
Available blocks		Used to add a tab-style menu layout. → Learn how to set up the Tabbed Menu
		Used to add a multi-column menu layout. → Learn how to set up the Column Menu
		Used to add a menu with promotional banners. → Learn how to set up the Banner Menu
		Used to add a menu that highlights specific products. → Learn how to set up the Product Menu
		Used to add a menu that shows all blog posts. → Learn how to set up the Blog Menu
		Used to add a menu that has a contact form & contact information inside. → Learn how to set up the Contact Menu
		Used to add a call-to-action button to the menu. → Learn how to set up the Button on Menu

3. Location & Setup

Go to "Online Store" > "Themes" > "Customize".
Locate the Header setting group.
Click "Add Section".
Search for "Header".
Click on it to add.

4. Highlight features

Desktop & Mobile Layouts: Customize different header layouts for desktop and mobile.
Sticky Header: Keep the header fixed on scroll for better navigation.
Transparent Header Option: Enable a transparent header for modern designs.
7 mega menu styles: Make the header more engaging with 7 different ways to use your mega menu.
Customer Account popup: A built-in account icon that opens a popup with sign-in options and a customizable navigation menu- powered by Shopify's storefront web component.
Flexible Search layout: Choose between a minimized popup or a full-screen search on desktop, and optionally show a persistent search bar on mobile instead of just an icon.

5. Common Use Cases

🤔 How to assign a menu to the header?

You can display your store's menu in the header using the Main Menu setting. Here's how:

STEP 1:

Prepare your menu in the Shopify admin: go to Content > Menus > "Create menu".

STEP 2:

Click on the Header section to open its setting panel.

STEP 3:

Locate the Main menu setting and select the menu you want to display.

STEP 4:

Click "Save" to apply changes.

⚠️ Note: This will show all the menu items you have set up in Shopify Admin as a basic dropdown menu.

🤔 How to enable a sticky header?

Want the header to stay visible when scrolling? Here's how:

STEP 1:

Click on the Header section to open its setting panel.

STEP 2:

Tap on the Sticky header dropdown and choose one of the following options:

None – The header scrolls away with the page.
On scroll up – The header reappears only when scrolling up.
Always – The header stays fixed at the top.
Always, reduce logo size – The header remains sticky while reducing the logo size for better visibility. Adjust the percentage using the Reduce logo by setting.

STEP 3:

Click "Save" to apply changes.

🤔 How to collapse the mega menu when scrolling with a sticky header?

Want to keep your header sticky but save vertical space by hiding the mega menu area as customers scroll down? The Enable collapse on scrolling down setting does exactly that — the header stays visible and sticky, but its mega menu portion tucks away while scrolling.

⚠️ This setting only appears when two conditions are both met:

Desktop layout	Logo on side or Logo on top — not Compact
Sticky header	Always or Always, reduce logo size — not None or On scroll up

If the toggle is not visible, check that both settings above are set to the correct values first.

STEP 1: Set the Desktop layout

Click on the Header section to open its settings panel. Find the Desktop layout setting and choose either Logo on side or Logo on top.

STEP 2: Set the Sticky header

In the same settings panel, find Sticky header and choose either Always or Always, reduce logo size.

STEP 3: Enable the setting

Once both conditions above are met, the Enable collapse on scrolling down toggle will appear below the Sticky header setting. Toggle it ON.

STEP 4:

Click "Save" when done.

🤔 How to enable a transparent header?

A transparent header blends seamlessly into banners and hero images. To enable:

STEP 1:

Click on the Header section to open its settings panel.

STEP 2:

Under Transparent Header, turn on:

Enable on homepage
Enable on collection pages

depending on which pages you want the header to be transparent.

STEP 3: (Optional)

Some more adjustments you might need to make the transparent header fit your vibe:

Upload a Transparent Logo to match the header design.
Adjust the Shadow and its color for both dark/light versions.
Adjust the Text, Text link color for both dark/light versions.

STEP 4:

Click "Save" to apply changes.

🤔 How to set up the Customer Account popup in the header?

As of v1.7.0, the header includes a built-in account icon powered by Shopify's storefront web component. When customers click it, a popup opens with sign-in options (for guests) or a navigation menu (for signed-in customers). The popup colors automatically match your header's color scheme - no extra styling needed.

⚠️ Prerequisite - New Customer Accounts only: This feature only works if your store uses New customer accounts. Legacy accounts are not supported. To check, go to Shopify Admin > Settings > Customer accounts and make sure you've upgraded.

STEP 1: Enable your preferred sign-in methods (in Shopify Admin)

Go to Shopify Admin > Settings > Customer accounts and look for the Authentication settings. From here, enable the sign-in methods you want to offer:

Shop sign-in- automatically recognizes customers who have a Shop account and signed in on this device before.
Google / Facebook- allows social sign-in if your store has connected these providers.

💡 Note: Only the methods you enable here will appear in the popup. Customers will always see the email field regardless.

STEP 2: Assign a navigation menu to the popup (in Theme Editor)

Click on the Header section to open its settings panel. Find the Customer account menu setting and select the menu you want to display inside the popup.

The default option is Customer account main menu- a Shopify-managed menu that includes links to Orders and Profile.
You can also create a custom menu in Shopify Admin > Content > Menus and assign it here to add or rearrange links.

STEP 3:

Click "Save" when done.

🎯 What it looks like on the storefront:

Sign-out:

Sign-in:

💡 Notes:

The menu is visible in the popup for both signed-out and signed-in customers. Signed-out customers who click on links like Orders or Profile will be redirected to the login page first.
There is no sign-out option inside the popup. Customers can sign out from their Profile page.

🤔 How to customize the Search layout on desktop?

As of v1.8.0, you can choose how the search popup appears on desktop when a customer clicks the search icon. There are two options:

Minimized	Full
Only the search bar and suggestions appear, with the rest of the page dimmed by a partial overlay. This is the new, cleaner design and is set as default.	The search popup expands to cover the full screen (the previous behavior).

STEP 1:

Click on the Header section to open its settings panel.

STEP 2:

Find the Search setting group. Under Desktop search popup layout, choose either Minimized or Full.

STEP 3:

Click "Save" when done.

💡 Note: The Minimized layout is recommended for most stores — it keeps customers focused on the search bar without being visually overwhelming.

🤔 How to show the Search bar on mobile instead of the Search icon?

By default, mobile visitors see a search icon in the header. When tapped, it opens a full-screen search. As of v1.8.0, you can switch this to show a persistent search bar directly in the header on mobile, giving customers quicker access to search.

When enabled:

A full search bar is always visible in the mobile header.
Tapping the bar opens the search popup (new design) below it.
Tapping outside the popup closes it but keeps the search bar visible.
Tapping the X on the search bar closes the popup but does not hide the bar.

When disabled (default):

Only the search icon appears. Tapping it opens the full-screen search popup.

STEP 1:

Click on the Header section to open its settings panel.

STEP 2:

Find the Search setting group. Toggle Show search bar on mobile to ON.

STEP 3:

Click "Save" when done.

🤔 What customization options can you give your Header?

*In the Search* setting group:**
✨ Change the Search bar color scheme	Click on the Header section and scroll down to the Search group. From here: Set Search color scheme (light) to choose which color scheme the search bar uses in light mode. Set Search color scheme (dark) to choose which color scheme the search bar uses in dark mode. 💡 Note: The Search color scheme is independent from the rest of the header's color. The header's overall color scheme (for menu, icons, etc.) is set separately in the Color group of the same section.
*In the Desktop layout* setting group:**
✨ Change the section width, add padding, or add a divider	Click on the Header section, and scroll down to the Desktop layout group to change those settings.
*In the Mobile layout* setting group:**
✨ Add a logo for mobile (light/dark)	Click on the Header section, and scroll down to the Mobile layout group, and you can: Upload an image to Mobile logo (light) / Mobile logo (dark). Adjust the Logo mobile width.

6. Change logs

Version 1.8.0 - June 2026

New – Desktop search popup layout: A new Desktop search popup layout setting lets merchants choose between Minimized (search bar and suggestions with partial overlay — new default) and Full (full-screen popup — previous behavior).
New – Show search bar on mobile: A new toggle allows merchants to show a persistent search bar in the mobile header instead of just a search icon, giving customers quicker access to search.
New – Search color scheme: Search bar colors can now be configured independently via the new Search color scheme (light) and Search color scheme (dark) settings, located directly in the Header section's Search group.

Version 1.7.0 - May 2026

New- Customer Account popup: The header now includes a built-in account icon powered by Shopify's shopify-account web component. Customers can sign in via passwordless, Shop, Google, or Facebook, and access a customizable navigation menu- all without leaving the storefront. Configured via the new Customer account menu setting in the Header section.
Changed- Sticky header: When sticky header is enabled, a new Enable collapse on scrolling down option allows the mega menu portion to be hidden while keeping the header visible as customers scroll.

7. Support Information

Need help? Contact our support team at Omni Themes Support