Skip to main content
The Header section is the primary navigation area appearing at the top of every page. It provides brand visibility, main navigation, utilities (search, account, cart), and supports advanced features like mega menus and drawer navigation.

​
What this section controls

This section controls site-wide navigation with the following capabilities:
  • Six layout options for logo and navigation positioning
  • Sticky header option (fixed on scroll)
  • Mega menu support with promotional image cards
  • Mobile drawer navigation with multi-level menus
  • Search bar integration
  • Account and cart icons
  • Announcement bar integration
  • Color scheme and transparency controls
  • Appears on every page across the site

​
Key Features

6 Layout Options

Choose from multiple logo and navigation positioning layouts

Sticky Header

Optional fixed header that stays visible while scrolling

Mega Menu Cards

Add promotional image cards with links inside mega menu dropdowns

Mobile Drawer

Responsive navigation drawer with multi-level menu support

​
Layout Options

The header layout controls how the logo and navigation are positioned within the header, affecting visual hierarchy and available menu space.
Logo on the left, navigation in the center, utilities on the right. Classic balanced layout.Best for: Stores with moderate navigation needs and standard branding
Logo centered at top, full navigation menu centered below it. Two-row header.Best for: Brand-focused stores wanting maximum logo prominence with comprehensive navigation
Layout Selection Tips:
  • Brand-focused store: Logo Centered, Navigation Centered Below
  • Many menu items: Navigation Centered or Navigation Centered Below
  • Minimalist aesthetic: Navigation Drawer
  • Traditional store: Default or Navigation Logo Left

​
Section Settings

Enable Sticky Header
  • Keeps header visible while scrolling
  • Provides constant access to navigation and utilities
  • Default: Enabled
Transparent Header on Scroll
  • Header becomes transparent over page content
  • Useful for hero sections with media backgrounds
  • Default: Disabled
Transparent Header Bottom Border
  • Adds subtle border to transparent header for definition
  • Only visible when header is transparent
  • Default: Enabled
Enable Navigation Drawer Layer
  • Adds show/hide interaction for third-level menu items in drawer
  • Improves clarity with deep navigation structures
  • Default: Enabled
Sticky headers improve navigation accessibility but reduce visible content area. Test on mobile before enabling.
These settings control country/market selector visibility. Only active when Shopify Markets is configured.Enable in Header
  • Shows country selector in main header area
  • Default: Enabled
Enable in Navigation Menu
  • Shows country selector inside navigation drawer
  • Default: Enabled
Country selectors only appear when multiple markets are configured in Shopify Settings → Markets. Both options can be enabled simultaneously.
Control the aspect ratio of promotional image cards in mega menu dropdowns.Desktop Aspect Ratio
  • Auto, Square (1:1), Landscape (4:3, 3:2, 5:4, 16:9, 2:1, 4:1, 8:1), Portrait (3:4, 2:3, 4:5, 9:16, 1:2)
  • Default: 3:4 (Portrait)
Mobile Aspect Ratio
  • Same options as desktop
  • Default: 3:4 (Portrait)
These settings only affect mega menu promo cards added via the “Image Link Text” block type. Standard menu items are not affected.
Section Width
  • Page: Standard page width with margins
  • Fluid: Minimal side margins, edge-to-edge
  • Full: Complete full-width layout
  • Default: Fluid
Color Scheme
  • Choose from available color schemes
  • Default: Scheme 1
Most stores use Fluid width for headers to maximize navigation space while maintaining clean edge-to-edge appearance.

​
Block Types

Blocks enhance the header with promotional content and visual indicators for menu items.

​
Image Link Text Block

Promotional cards displayed inside mega menu dropdowns. Add images, headings, and links to highlight collections, promotions, or featured content.
Menu Item Position
  • Number indicating which top-level menu item to attach this card to
  • Example: 1 = first menu item, 2 = second menu item, etc.
  • Info tooltip explains positioning system
Color Scheme
  • Choose color scheme for the promo card
  • Default: Scheme 1
  • Allows cards to stand out from default header scheme
Menu item positions are numbered from left to right in your navigation. Count your menu items to determine the correct position number.
Image
  • Background or featured image for the card
  • Displays at aspect ratio set in section settings
Content Vertical Alignment
  • Top, Center, or Bottom
  • Default: Center
  • Controls where text appears on the image
Card Title
  • Heading text for the promotional card
  • Default: “Heading goes here”
  • Supports inline rich text formatting
Link Type
  • Button: Shows explicit button element
  • Card: Entire card is clickable (no visible button)
  • Default: Card
Button Text
  • Button label text
  • Only visible when Link Type is “Button”
Button URL
  • Destination link for card or button
  • Required field
Card vs Button Links:
  • Use Card link type for cleaner visual with larger clickable area
  • Use Button link type when you need explicit call-to-action
Small badge labels attached to specific menu items to highlight new features, sales, or important categories.
Menu Item Position
  • Number indicating which menu item to attach the badge to
  • Same numbering system as Image Link Text blocks
Badge Label
  • Text displayed in the badge
  • Keep short: “NEW”, “SALE”, “HOT”
Badge Style
  • Square: Rectangle badge shape
  • Round: Circular/pill badge shape
  • Default: Round
Effective Badge Usage:
  • Keep text to 3-5 characters for best visibility
  • Use for temporary promotions (“SALE”) or permanent highlights (“NEW”)
  • Don’t overuse - limit to 1-2 badges for maximum impact
  • Round badges work better for short text, square for slightly longer labels

​
Mega Menu Setup

1

Create Menu Structure

Go to Shopify Admin → Navigation and create a menu with multiple levels. Top-level items become the main menu, second-level items appear in dropdowns.
2

Add Promo Cards

In Theme Customizer, click Add block → Image Link Text. Set the menu item position to match where you want the card to appear.
3

Configure Card

Upload an image, add heading text, set the URL, and choose link type. The card will appear in that menu’s dropdown.
4

Adjust Column Count

Use the Menu Column Count setting to control how many columns the mega menu uses (1-6 columns).

​
Mobile Behavior

Automatic Drawer

All layouts automatically convert to drawer navigation on mobile devices

Separate Mobile Menu

Optional mobile-specific menu for simplified navigation

Collapsible Levels

Multi-level navigation collapses into accordion-style expandable sections

Drawer Layer

Third-level menu items can hide/show for cleaner mobile experience

​
Best practices

Navigation structure

Limit top-level menu items to 5-7 for optimal readability. Use second level for category organization (appears in dropdowns/mega menus). Third level for subcategories (appears in drawer layer if enabled). Keep menu link names concise, especially for mobile.

Logo optimization

Use transparent PNG for logos with complex shapes, SVG is ideal for simple logos (text, geometric shapes). Logo width 100-140px works well for most stores. Mobile logo should be 60-100px for best balance. Provide transparent header logo for sections with hero images.

Mega menu cards

Use high-quality images optimized for web (compressed). Keep card titles short and impactful (2-4 words). Link to collections or featured product pages. Align card position numbers carefully with your menu structure and test mega menus on desktop before finalizing.

Menu item limits

Avoid too many top-level menu items creating horizontal overflow. Balance comprehensive navigation with clean design. Consider second-level menus for additional categories instead of adding more top-level items.

Performance considerations

Use appropriately sized logo files to prevent slowing page load. Test sticky header mobile scroll performance before enabling. Optimize mega menu images for fast loading without sacrificing quality.

Transparent header usage

Works best with hero sections that have full-width images or videos. Requires good contrast between header text and background content. Use transparent header logo (lighter/darker version) for optimal visibility. Bottom border helps define header boundary without solid background.

​
Common Header Layouts

​
Classic E-commerce

Layout: Default
Logo: 120px, centered branding
Menu: 5-6 top-level items with dropdowns
Additional Links: "Sale" with red badge
Sticky: Enabled

​
Minimal Boutique

Layout: Logo Centered, Navigation Centered Below
Logo: 140px SVG, large brand presence
Menu: 4 simple categories
Mega Menu: Promotional cards on "Shop" and "Collections"
Sticky: Disabled for cleaner scroll

​
Mobile-First Store

Layout: Navigation Drawer
Logo: 100px, left-aligned
Menu: Extensive multi-level structure
Drawer Layer: Enabled for deep categories
Additional Links: "New Arrivals", "Best Sellers"

​
Traditional Retail

Layout: Navigation Logo Left
Logo: 110px, professional appearance
Menu: 6-7 categories aligned left
Menu Column Count: 3 for compact mega menus
Sticky: Enabled for utility access
  • Shopify Admin → Navigation: Create and manage header menus
  • Shopify Settings → Markets: Configure markets for country selector
  • Theme Settings → Colors: Define color schemes used in header
  • Theme Settings → Typography: Control font families for header text