Header

Overview:

The Header section is designed to create the main storefront navigation area. It supports logo customization, mega menu layouts, primary and secondary navigation menus, predictive search, cart functionality, sticky header behavior, responsive spacing, and promotional mega menu banners. This section helps merchants create a professional navigation experience with branding, product discovery, and quick customer access to key store areas.


Blocks Configuration

Mega Menu Block:

The Mega Menu block creates advanced dropdown navigation menus with collections, scrolling marquee banners, and promotional images.

Setting Description
Menu Position Defines the menu item index where the mega menu will appear.
Collections Selects up to 10 collections displayed inside the mega menu.

Marquee Settings:

Setting Description
Marquee Direction Controls scrolling direction such as Top to Bottom or Bottom to Top.
Marquee Speed Controls marquee scrolling speed.
Pause on Hover Pauses scrolling animation when users hover over the marquee.

Promotional Banner One:

Setting Description
Banner Image Uploads the first promotional banner image.
Banner Link Adds a URL link to the first banner.
Open in New Tab Opens the banner link in a new browser tab when enabled.

Promotional Banner Two:

Setting Description
Banner Image Uploads the second promotional banner image.
Banner Link Adds a URL link to the second banner.
Open in New Tab Opens the banner link in a new browser tab when enabled.

Promotional Banner Three:

Setting Description
Banner Image Uploads the third promotional banner image.
Banner Link Adds a URL link to the third banner.
Open in New Tab Opens the banner link in a new browser tab when enabled.

Section Configuration

Site Logo:

Setting Description
Logo Image Uploads the brand logo displayed in the header.
Desktop Logo Width Controls the logo width on desktop devices.
Mobile Logo Width Controls the logo width on mobile devices.

Primary Navigation Menu:

Setting Description
Main Menu Selects the primary Shopify navigation menu displayed in the header.
Menu Weight Adjusts the font thickness of menu links.
Menu Case Changes text transformation style such as Uppercase, Lowercase, Capitalize, or Default.
Menu Font Family Allows switching between default and heading font family styles.
Dropdown Color Scheme Applies a predefined color palette to mega menu dropdown areas.

Secondary Navigation Menu:

Setting Description
Secondary Menu Selects the secondary Shopify menu displayed in the header.
Show Account Icon Displays customer account/login access.
Menu Weight Adjusts secondary menu font thickness.
Menu Case Changes secondary menu text transformation style.
Menu Font Family Allows switching between default and heading font family styles.

Search Settings;

Setting Description
Enable Search Displays the search functionality inside the header.
Enable Predictive Search Enables live predictive search suggestions while typing.

Cart Settings:

Setting Description
Show Cart Displays the cart icon in the header.
Desktop Cart Label Defines the cart label text such as Bag or Cart.

Layout:

Setting Description
Sticky Header Controls sticky behavior such as None, On Scroll Up, or Always Sticky on Scroll.
Container Layout Determines whether the header uses Contained, Contained Content, or Full Width layout.
Container Width Controls the maximum width of the header container on desktop devices.

Color Scheme:

Setting Description
Header Color Scheme Applies a predefined color palette to the header section.
Dropdown Color Scheme Applies a color scheme to mega menu dropdown content.

Inner Spacing:

Setting Description
Top Padding (Desktop) Adds spacing inside the top area of the header on desktop devices by default it's 1px.
Bottom Padding (Desktop) Adds spacing inside the bottom area of the header on desktop devices by default it's 3px.
Left Padding (Desktop) Controls inner left spacing on desktop devices by default it's 70px.
Right Padding (Desktop) Controls inner right spacing on desktop devices by default it's 70px.
Top Padding (Mobile) Adds spacing inside the top area of the header on mobile devices by default it's 7px.
Bottom Padding (Mobile) Adds spacing inside the bottom area of the header on mobile devices by default it's 4px.
Left Padding (Mobile) Controls inner left spacing on mobile devices by default it's 12px.
Right Padding (Mobile) Controls inner right spacing on mobile devices by default it's 12px.

Outer Spacing:

Setting Description
Top Margin (Desktop) Adds spacing outside the top area of the header on desktop devices by default it's 0.
Bottom Margin (Desktop) Adds spacing outside the bottom area of the header on desktop devices by default it's 0.
Left Margin (Desktop) Controls outer left spacing on desktop devices by default it's 0.
Right Margin (Desktop) Controls outer right spacing on desktop devices by default it's 0.
Top Margin (Mobile) Adds spacing outside the top area of the header on mobile devices by default it's 0.
Bottom Margin (Mobile) Adds spacing outside the bottom area of the header on mobile devices by default it's 0.
Left Margin (Mobile) Controls outer left spacing on mobile devices by default it's 0.
Right Margin (Mobile) Controls outer right spacing on mobile devices by default it's 0.

How to Add Mega Menu

Follow these steps to add a mega menu to your store navigation:

  1. Go to Online Store > Themes.
  2. Click Customize on your active theme.
  3. From the top dropdown, select the Header section.
  4. In the left sidebar, click Add Block > Mega Menu.
  5. In the Menu Item Position field, enter the position number of the menu item where the mega menu should appear. Example:
    • Enter 1 for the first menu item
    • Enter 2 for the second menu item
    • Enter 3 for the third menu item
  6. Under Collections, select the collections you want to display inside the mega menu.
  7. Configure the Scroll Settings:
    • Select scrolling Direction
    • Adjust Speed
    • Enable Pause on Hover if required
  8. Add promotional banners:
    • Upload images under First Banner Settings, Second Banner Settings, and Third Banner Settings
    • Add banner links if required
    • Enable Open Link in New Tab if you want links to open separately
  9. Click Save.

Mega Menu Block

The Mega Menu block creates an advanced dropdown menu inside the header navigation. It allows merchants to display collections, scrolling content, and promotional banners to improve navigation and product discovery. This block is useful for showcasing featured categories, promotional campaigns, or seasonal collections.

Menu Settings:

Setting Description
Menu Item Position Defines the menu item index where the mega menu will appear in the main navigation. Example: If the mega menu should appear on the second menu item, enter 2.
Collections Selects up to 10 collections to display inside the mega menu dropdown.

Scroll Settings:

Setting Description
Direction Controls scrolling direction such as Top to Bottom or Bottom to Top.
Speed Controls the scrolling animation speed of the marquee content.
Pause on Hover Pauses scrolling animation when users hover over the mega menu content.

First Banner Settings:

Setting Description
Image Uploads the first promotional banner image displayed inside the mega menu.
Link Adds a URL link to the first banner image.
Open Link in New Tab Opens the banner link in a new browser tab when enabled.

Second Banner Settings:

Setting Description
Image Uploads the second promotional banner image displayed inside the mega menu.
Link Adds a URL link to the second banner image.
Open Link in New Tab Opens the banner link in a new browser tab when enabled.

Third Banner Settings:

Setting Description
Image Uploads the third promotional banner image displayed inside the mega menu.
Link Adds a URL link to the third banner image.
Open Link in New Tab Opens the banner link in a new browser tab when enabled.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us