Header

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

🤔 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 > Menu > “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 to open its dropdown, you can choose between 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 amount using the Reduce logo by setting.

STEP 3: Click “Save” to apply changes.

🤔 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 

depends on your demand to make the header transparent on which page.

STEP 3: (Optional)

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

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

STEP 4: Click “Save” to apply changes.

🤔 What customization options can you give your Header?