The Header section appears at the top of every page and provides key navigation and store utilities, including your logo, menu links, search, account, and cart icons.
It helps users explore your store, find products, and access their account seamlessly.
Color scheme
Select the color scheme to control text, background, and icon colors. This helps the header blend with or contrast your store’s design.
Section width
Choose how wide the header spans on the page:
• Page–aligns with the site’s content width.
• Full–stretches across the full viewport width.
Enable sticky header
Keeps the header visible at the top while scrolling, ensuring navigation and cart access remain always available.
Enable transparent header
Makes the header background transparent, typically used over hero banners or slideshows.
Tip: Ensure the first homepage section is a banner or slideshow for the best appearance.
Enable separator line
Adds a thin dividing line below the header for visual separation from page content.
Header layout
Choose the logo and navigation arrangement.
- Logo left
- Logo centered
- Logo top with menu below
- Drawer-style menu
Menu trigger
Determines how the mega menu or dropdown opens:
• On hover–opens when hovering over menu items.
• On click–opens when clicking the item.
Main navigation menu
Select which navigation menu to display in the header (e.g., Main menu, Primary menu). Managed under Online Store → Navigation in Shopify admin.
Show search icon
Displays a magnifying glass icon, allowing customers to search your store directly from the header.
Show account icon
Shows the customer account icon, giving quick access to login, register, or account pages.
Show cart icon
Enables the cart icon in the header, allowing customers to view or open their cart drawer.
Enable voice search
Adds a microphone icon for voice-based product searching (if supported by browser/device).
Mega Menu Block
The Mega Menu Item block allows you to create rich dropdown menus under your main header navigation. It supports multiple layout types, including images, pages, collections, and blogs–giving you flexibility to showcase featured products, promotions, or editorial content directly in the navigation.
Menu item handle
Enter the handle (name) of the top-level menu item that this mega menu belongs to (e.g., collections, our-collections, products). This links the block to its corresponding navigation item.
Item type
Choose the layout style for this mega menu. Available types include:
- Multiple images with links
- Multiple page links
- Featured products from the collection
- Multiple collections
- Blog posts
- Custom content
Section title
Optional title text displayed at the top of the mega menu for visual grouping or branding.
Multiple Images Settings
Use this section to display images with titles and links inside the mega menu — ideal for promoting featured products or categories.
Image 1 / Image 2 / Image 3 / Image 4
Upload up to four images that appear in the mega menu.
Link 1 / Link 2 / Link 3 / Link 4
Add a URL or choose a page, collection, or product to link to each image.
Text 1 / Text 2 / Text 3 / Text 4
Add captions or titles that appear as overlays on each image.
Multiple Pages Settings
Display quick links to selected pages within the dropdown.
Page 1-4
Select up to four pages to feature. Useful for linking to About, Contact, FAQs, or Policy pages.
Products Settings
Feature specific products directly inside the mega menu.
Select a collection for products
Choose a collection whose products will be shown in this mega menu.
Number of products to show
Select how many products (from the chosen collection) to display. Adjustable via a slider.
Multiple Collections Settings
Use this area to promote entire collections within your mega menu.
Collection 1-4
Select up to four different collections to feature. Each appears with its name and thumbnail (if available).
Blog Settings
Feature recent or popular blog posts directly in the mega menu to highlight content and drive engagement.
Blog
Choose which blog (e.g., “News,” “Journal”) to display posts from.
Number of blog posts to show
Set how many recent posts to display from the selected blog.
