Header Section

The header is the navigation bar at the top of your store. It includes your logo, main menu, and utility icons (search, cart, account).

Overview

The header appears on every page of your store and helps customers navigate your site. You can customize the menu style, layout, colors, and which icons to display.

Where to Use

The header section is automatically included in the Header Group section, which appears at the top of all pages. You typically won't need to add it manually to templates.

Settings

Content

Menu

  • What it does: Selects which navigation menu to display in the header
  • How to set it up:
    1. Go to Online Store > Navigation in Shopify admin
    2. Create or edit a menu
    3. Add links to collections, products, pages, or custom URLs
    4. Select that menu here
  • Tip: Create a main menu with your most important pages and collections

Layout

Menu Type

Choose how your menu is displayed:

Single Row

  • Logo and menu on the same row
  • Best for: Simple navigation with few menu items
  • Options: Logo left/menu center, Logo center/menu right, Menu left/logo center

Two Row

  • Logo and search on top row, menu on second row
  • Best for: Stores with many menu items or when you want more space
  • Options: Menu can be left, center, or right aligned

Sidebar (Hamburger Menu)

  • Menu hidden behind a hamburger icon (☰)
  • Best for: Clean, minimal look or mobile-first design
  • Menu slides in from the side when clicked

Mega Menu

  • Large dropdown menu with multiple columns
  • Best for: Stores with many categories and subcategories
  • Can show collection/product images
  • Options: Columns, Grid, or Mixed layout

Header Layout (Single Row only)

  • Logo left, menu center - Classic layout with centered navigation
  • Logo center, menu right - Logo centered, menu on the right
  • Menu left, logo center - Menu on left, logo in center

Dropdown Position (Single Row only)

  • Left - Dropdown menus align to the left edge
  • Center - Dropdown menus align to the center
  • Right - Dropdown menus align to the right edge

Menu Position (Two Row only)

  • Left - Menu aligned to the left
  • Center - Menu centered
  • Right - Menu aligned to the right

Menu Width (Two Row & Sidebar)

  • Full width - Menu spans the entire screen width
  • Page width - Menu constrained to page width

Mega Menu Settings

  • Layout: Choose Columns, Grid, or Mixed (columns + featured items)
  • Number of columns: 2, 3, 4, 5, or 8 columns
  • Width: Full width, Page width, or Constrained (800px)
  • Alignment: Left, Center, or Right
  • Show collection/product images: Display images in mega menu dropdowns

Border (Single Row only)

Show Border Bottom

  • Adds a line below the header
  • Useful for separating header from page content

Border Color

  • Choose the color of the border line
  • Default: Light gray (#e5e7eb)

Border Width

  • Set the thickness of the border
  • Examples: 1px, 2px, 0.5rem

Behavior

Sticky Header

  • What it does: Keeps the header visible at the top when scrolling
  • When to use: Helps customers always access navigation and cart
  • Note: Works with store info bar - header adjusts position automatically

Colors

Color Scheme

  • Select a color scheme for the header
  • Controls background color, text color, and link colors
  • Leave empty to use default theme colors

Header Icons & Utilities

Show Search Icon

  • Displays a search icon in the header
  • Opens a search modal when clicked
  • Recommended: Keep enabled for better customer experience

Show Customer Account

  • Displays account/login icon
  • Shows login icon when logged out
  • Shows avatar with initial when logged in
  • Recommended: Keep enabled for customer accounts

Show Cart Icon

  • Displays shopping cart icon with item count
  • Recommended: Always keep enabled

Show Country/Region Selector

  • Allows customers to select their country and currency
  • Only shows if you have multiple countries/currencies set up
  • When to use: If you ship internationally

Show Language Selector

  • Allows customers to select their preferred language
  • Only shows if you have multiple languages enabled
  • When to use: If you have a multilingual store

Mobile Menu Style

Header (Menu button in header)

  • Hamburger menu button appears in the header
  • Traditional mobile menu style

Floating (Fixed button at bottom right)

  • Floating menu button appears at bottom right of screen
  • Stays visible while scrolling
  • Modern, app-like experience

Common Configurations

Simple Store

  • Menu Type: Single Row
  • Header Layout: Logo left, menu center
  • Sticky Header: Enabled
  • Icons: Search, Cart, Account enabled

Large Store with Many Categories

  • Menu Type: Mega Menu
  • Layout: Mixed (columns + featured)
  • Columns: 4-5 columns
  • Show Images: Enabled
  • Sticky Header: Enabled

Minimal/Modern Store

  • Menu Type: Sidebar
  • Mobile Style: Floating
  • Icons: Search, Cart only
  • Sticky Header: Enabled

Two-Row Professional

  • Menu Type: Two Row
  • Menu Position: Center
  • Menu Width: Page width
  • Sticky Header: Enabled

Tips & Best Practices

✅ Do's

  • Keep it simple: Don't add too many menu items (5-7 main items is ideal)
  • Use sticky header: Helps customers navigate and access cart easily
  • Test on mobile: Always preview how your header looks on phones
  • Organize menu: Group related items in dropdown menus
  • Show search: Always enable search for better customer experience
  • Use mega menu wisely: Only if you have many categories to organize

❌ Don'ts

  • Don't overcrowd: Too many menu items can confuse customers
  • Don't hide cart: Always show the cart icon
  • Don't forget mobile: Test how your menu works on mobile devices
  • Don't use tiny text: Ensure menu text is readable

Menu Organization Tips

Creating a Good Menu Structure

  1. Main Categories (5-7 items max)

    • Home
    • Shop (or main category)
    • About
    • Contact
    • etc.

  2. Dropdown Menus

    • Add subcategories under main items
    • Group related collections together
    • Keep dropdowns to 2-3 levels deep maximum

  3. Mega Menu Organization

    • Use columns for different categories
    • Add featured collections/products
    • Include images for visual appeal
    • Keep it organized and easy to scan

Mobile Considerations

  • Floating menu: Great for modern, app-like experience
  • Header menu: Traditional, always accessible in header
  • Test both: Preview on actual mobile devices
  • Keep it simple: Mobile menus should be easy to navigate

Troubleshooting

Menu Not Showing

  • Check: Make sure you've selected a menu in the settings
  • Check: Ensure the menu has items added in Online Store > Navigation

Dropdown Not Working

  • Check: Make sure parent menu items have child items
  • Check: Verify menu structure in Online Store > Navigation

Icons Not Showing

  • Check: Make sure the icon checkboxes are enabled
  • Check: Some icons only show if features are enabled (e.g., language selector needs multiple languages)

Sticky Header Issues

  • Check: If using store info bar, header position adjusts automatically
  • Check: Test scrolling to ensure header stays visible

Related Sections

  • Store Info Bar - Often appears above the header
  • Footer - Navigation at the bottom of pages

Next Steps: