Skip to main content
The header is the primary navigation area of your store and appears consistently across pages. It plays a key role in brand recognition, navigation clarity, and access to essential store actions like search, cart, and account access. A well-configured header helps customers orient themselves quickly while keeping navigation flexible and scalable. Header section overview

​
What this section controls

This section controls the layout, behavior, and content of the store header, including navigation structure, logo display, utilities, and advanced menu features such as mega menus and drawers.

​
Getting started

1

Open Theme Customizer

From Shopify admin, access the Theme Customizer.
2

Locate Header

The Header section is pre-added at the top in the left sidebar.
Location of header in Theme Customizer

​
Layout options

Choose how the logo and navigation are positioned within the header. This setting affects the visual hierarchy and available space for menu items.
The logo is centered, with navigation distributed around it. Best for brand-focused stores with moderate navigation needs.Logo centered layout

​
Key settings

​
Enable sticky header

Keeps the header visible while customers scroll the page, ensuring constant access to navigation.Sticky header setting
Sticky headers improve navigation accessibility but reduce visible content area. Test on mobile before enabling.

​
Borders for navigation elements

Adds borders to the inward-facing edges of the first and last navigation elements. This can help visually separate navigation items without adding extra spacing.Navigation borders setting

​
Enable navigation drawer layer

Adds a show/hide interaction to third-level menu items inside the navigation drawer. This improves clarity when working with deeper navigation structures.Navigation drawer layer setting

​
Country drawer settings

Controls how the country selector is displayed across the header and navigation. These options only appear when multiple countries are configured in your store settings.
Displays the country selector directly in the header. Its position depends on the selected header layout and may appear in the main navigation or utilities area.Country selector in header
Displays the country selector inside the desktop and mobile navigation drawer.Country selector in navigation drawer
Controls which menus are used across desktop and mobile navigation. These settings reference menus created in your Shopify admin under Navigation.
Select the primary Shopify menu used for desktop navigation. This is your main navigation structure.Primary menu setting

​
Mobile menu

Select a Shopify menu specifically for mobile navigation. If left empty, the primary menu is used.This allows you to simplify or restructure navigation for smaller screens.Mobile menu setting
Create a simplified mobile menu with fewer top-level items for better usability on small screens.

​
Mega menu settings

These settings control the appearance and spacing of mega menu layouts. Mega menus appear when hovering over top-level navigation items on desktop.
Controls the size of top-level menu item labels inside the mega menu.Available options: S, M, LParent link size optionsControls the size of parent links that do not contain submenus.Available options: S, M, LParent without submenu size

​
Best practices

Keep navigation concise

Limit top-level items to 5-7 to avoid overwhelming customers. Use mega menus for deeper structures.

Simplify mobile menus

Create a dedicated mobile menu with fewer items and clearer hierarchy.

Reserve mega menus wisely

Use mega menus for categories with clear visual structure and multiple subcategories.

Test sticky headers

Balance accessibility with screen space, especially on mobile devices.
Custom SVG code requires technical knowledge. Test thoroughly across browsers before deploying to ensure consistent rendering.

Announcement bar

Configure announcement messages above the header

Footer section

Set up footer navigation and content blocks