Header & Navigation

The header is the top navigation area of your store, containing your logo, navigation menu, search, and cart icon.

Accessing Header Settings

1. Open the theme editor
2. Click on Header in the left sidebar (under Header group)

Logo Settings

Adding Your Logo

1. Click Select image under Logo
2. Upload your logo file (PNG or SVG recommended)
3. Click Save

Recommended: Upload a logo that’s at least 200px wide for crisp display on all devices.

Logo Size

Control logo height on different devices:

Tip: Start with the default size and adjust based on your logo’s proportions.

Logo Position

Choose where to display your logo:

• Left - Standard position, navigation to the right
• Center - Centered logo, navigation split on both sides
• Right - Logo on the right, navigation on the left

Navigation Menu

The header automatically uses your store’s Main menu for navigation.

Setting Up Navigation

1. Go to Shopify Admin → Online Store → Navigation
2. Click on Main menu
3. Add menu items for your key pages and collections
4. Use Add menu item and nest items to create dropdowns

Navigation Best Practices

• Keep main menu items to 5-7 for best usability
• Use clear, concise labels
• Group related items in dropdowns
• Put most important pages first

Header Behavior

Hide on Scroll

When enabled, the header hides when scrolling down and reappears when scrolling up.

Setting: Header → Behavior → “Hide on scroll”

• Enabled (default) - Header hides on scroll for more content space
• Disabled - Header stays visible at all times

Header Icons

The header includes these utility icons:

Cart Icon Badge

The cart icon displays a badge showing the number of items in the cart. The badge:

• Appears automatically when items are added
• Updates in real-time without page reload
• Uses your theme’s accent color

Mobile Header

On mobile devices, the header adapts:

• Logo centers automatically
• Navigation collapses into a hamburger menu
• Tap the menu icon (☰) to open the mobile navigation
• Search, account, and cart icons remain visible

Mobile Menu Features

• Full-screen navigation overlay
• All menu items with dropdowns
• Language/currency selector at the bottom
• Tap outside or use close button to dismiss

Search Functionality

The header includes an integrated search:

1. Click the search icon
2. Search overlay appears with input field
3. Type to see predictive search results
4. Press Enter or click a result to navigate

See: Search for detailed search configuration.

Common Tasks

Change logo size

1. Header section → Logo settings
2. Adjust “Logo height mobile” and “Logo height desktop”

Add a new menu item

1. Shopify Admin → Online Store → Navigation
2. Edit Main menu
3. Add menu item

Create dropdown menus

1. In Navigation, click Add menu item
2. Add the parent item
3. Drag child items under it to nest them

Make header always visible

1. Header section → Behavior
2. Uncheck “Hide on scroll”

Troubleshooting

Logo appears blurry

• Upload a higher resolution image (at least 2x the display size)
• Use SVG format for crisp logos at any size

Navigation not showing

• Ensure Main menu has items in Shopify Admin → Navigation
• Check that menu items are linked to valid pages

Menu items not linking correctly

• Verify the links in your navigation menu
• Ensure linked pages are published

Need more help? Contact support