What this section controls
- Logo display and sizing for desktop and mobile
- Navigation menu structure and layout
- Megamenu promotional cards and badges
- Search, cart, and account utilities
- Sticky header behavior and transparency effects
- Country/language selector placement
Getting started
Locate Header section
The Header section is automatically present at the top of your store. Find it in the left sidebar under Static sections.
Layout options
Choose from 6 header layouts to control navigation and logo placement:- Logo Centered
Default layout - Logo centered with navigation split on left and right sides.Utilities (search, cart, account) appear on the right. Best for brand-focused stores where logo prominence matters most.
General settings
- Sticky Header
- Transparency
Enable sticky header
Header remains visible when scrolling down the page.Default: EnabledKeeps navigation and cart accessible throughout browsing. We recommend leaving this enabled for better user experience.
Logo settings
- Logo Images
- Logo Sizing
Logo
Primary logo image displayed in the header.Upload PNG or JPG with transparent background. Recommended size: 400×100px.Logo for transparent header
Alternative logo used when transparent header is enabled.Use a version with different color (typically white or dark) to ensure visibility against varied backgrounds.SVG code
Paste SVG code directly for vector logo display.Overwrites uploaded image if SVG code is present. SVG logos scale perfectly at any size.
Navigation settings
- Layout
Menu
Primary navigation menu for desktop.Default: main-menuCreate menus in Shopify admin under Online Store > Navigation.Mobile menu
Alternative menu for mobile devices.Leave empty to use the same menu as desktop. Create simplified mobile menu for better small-screen experience.Submenu
Additional menu visible only in navigation drawer layout.Default: main-menuAppears below primary navigation in drawer. Use for secondary links like policies, help center, or social links.
Additional links
Add up to 2 standalone links in header navigation or utilities area (placement depends on layout).- First Link
- Second Link
Additional link placement varies by layout. In centered layouts, links appear in utilities area. In left-aligned layouts, links appear in main navigation.
Country drawer
Control where language and currency selectors appear.Enable in header
Display country/language selector in main header navigation or utilities. Default: Enabled Position depends on selected layout.Enable in navigation drawer
Display country/language selector in navigation drawer menu. Default: Enabled Appears at bottom of drawer menu on both desktop and mobile.
Megamenu settings
Card aspect ratio
Image proportions for megamenu promotional cards on desktop. Options: auto, 1:1, 4:3, 3:4, 3:2, 2:3, 5:4, 4:5, 16:9, 9:16, 2:1, 4:1, 8:1, 1:2Default: 3:4 (portrait)
Card aspect ratio for mobile
Image proportions for megamenu cards on mobile screens. Options: (same as above)Default: 3:4
Aspect ratio only affects promotional cards added via blocks (Image with link and text), not regular menu items.
Design settings
- Width
- Color
Section width
Controls header container width.Options:- Page - Content width (1400px max)
- Fluid - 90% viewport width
- Full - Edge-to-edge (100vw)
Block settings
Add promotional elements to your navigation using blocks.- Image with Link and Text
Add promotional card with image and text to megamenu dropdown.
Available settings
Links the block to a specific top-level menu item.Enter the position number (1, 2, 3, etc.) of the tier 1 menu link. The block appears in that menu item’s dropdown.Example: Enter “2” to attach block to second menu item.
Color scheme
Color scheme
Background and text colors for promotional card.Default: Scheme 1Can differ from header color scheme for visual emphasis.
Image
Image
Card background image.Recommended size based on aspect ratio setting (e.g., 400×533px for 3:4 portrait).
Position
Position
Vertical alignment of card content.Options:
- Top - Content aligned to top
- Center - Content centered vertically
- Bottom - Content aligned to bottom
Heading
Heading
Card title text.Default: “Heading goes here”Supports inline formatting (bold, italic).
Link type
Link type
How visitors interact with the card.Options:
- Button - Shows clickable button with custom text
- Card - Entire card is clickable (no visible button)
Link
Link
Destination URL when clicking card or button.
Best practices
Choose layout strategically
Logo centered works for brand-focused stores. Navigation drawer suits stores with deep navigation hierarchies (10+ categories).
Enable sticky header
Keep sticky header enabled (default) to ensure cart and search remain accessible while customers browse.
Optimize logo sizing
Desktop logos at 100-140px and mobile at 60-100px create balanced proportions. Test on actual devices.
Use transparent header carefully
Transparent header works best on homepage hero images. Ensure sufficient text contrast throughout scrolling.
Simplify mobile navigation
Create separate mobile menu with fewer items (5-7 max) for better small-screen usability.
Match megamenu columns to items
3-5 columns works for most stores. Adjust based on menu item count to avoid awkward spacing.
Position blocks strategically
Attach promotional cards to your most popular or seasonal menu items for maximum visibility.
Limit menu badges
Use 1-2 badges maximum. Focus on promoting new collections or active sales only.
Test country drawer placement
Enable in header for quick access. Enable in drawer for cleaner header appearance. Test both.
Use SVG logos when possible
SVG logos scale perfectly at any size and load faster than PNG/JPG images.
Related guides
Announcement bar
Configure messages and promotions above the header