Header Design
Choose from Classic, Closed, Titles, or Vertical header layouts, each offering unique styling and menu options.
The Header Design chapter explains the different layout styles available for your store’s header and main navigation. Each design offers unique structural and visual options to match your brand’s look and usability goals.
You can choose between Classic, Closed, Titles, or Vertical menu styles — each with its own set of customizable features such as badges, contact information, icons, and top bars. These layouts define how your navigation, links, and header elements are displayed across your store.
Classic Menu
The Classic Menu layout offers a traditional, horizontal navigation bar — perfect for stores that prefer a familiar and easy-to-navigate design.
Includes:
Badges – Add small labels (e.g., New, Sale, Hot) to highlight specific menu items or categories.
Mega Menu – Expand your dropdown menus into larger panels with multiple columns, images, and links. Ideal for stores with many product categories.
Top Bar – A slim bar above the header for extra content such as contact info, login links, or language/currency selectors.
Purpose: To create a classic and well-balanced header suitable for a wide range of store types.
Closed Menu
The Closed Menu layout uses a compact, toggle-based navigation (often a hamburger icon). This design is ideal for minimalist or mobile-focused stores.
Includes:
Badges – Highlight specific menu items or collections with visual tags.
Contact Information – Display essential details like your phone number, email, or store address.
Menu Images – Add small images or thumbnails to menu links for a more visual browsing experience.
Top Bar – An optional section for announcements, shortcuts, or additional links.
Purpose: To provide a clean and space-saving navigation layout that keeps the header simple and modern.
Titles Menu
The Titles Menu layout emphasizes text-based navigation with clean typography and minimal design elements. It’s ideal for brands focusing on simplicity and clarity.
Includes:
Contact Information – Show your business or customer service details directly in the header.
Main Menu Icons – Add icons beside main menu links for improved readability and style.
Mega Menu – Enhance dropdowns with structured layouts and images when displaying larger product ranges.
Top Bar – A customizable section for secondary information or links.
Purpose: To create a straightforward, typography-driven header with a focus on clarity and brand identity.
Vertical Menu
The Vertical Menu layout places navigation along the side of the page rather than at the top, offering a distinctive look and extra space for content-rich menus.
Includes:
Contact Information – Add store address, email, or phone details for quick access.
Main Menu – Display your navigation links vertically along the sidebar.
Items – Adjust the order and style of individual menu items to fit your layout.
Top Bar – Optional section at the top for extra details or quick links.
Purpose: To deliver a modern, sidebar-style navigation that stands out and supports content-heavy or creative store layouts.
Switching Between Header Types
To choose which header style is active in your store, go to Sections → Header. Here, you will see the available header types. Only one header type should be visible or enabled at a time. Any additional header types must be hidden or removed to avoid layout conflicts.
For example, in this case the Classic header is visible, and the other header types are hidden:
If you have configured multiple header types but are unsure which one to use, we recommend keeping only your preferred header visible and hiding (or removing) all others. Here, the Vertical menu header is enabled, while the other header styles are removed:
If you want to switch to another header layout:
Hide the currently active header.
Click Add section.
Scroll to the Header design category.
Select the header type you want to add.
Each header style has its own layout and settings. You can explore them in the documentation:
Additional Modifications for the Header
You can further customize the appearance and layout of your store’s header to better match your design preferences.
In the theme editor, go to: Sections → Header → Desktop header design
Here you can find key layout options for your header:
Logo position – Set the logo alignment to Center to display it neatly in the middle of the header.
Menu position – Also set to Center to keep navigation links evenly aligned beside the logo.
Additionally, you’ll see the option Menu item number to split. This feature lets you control how many menu items appear on the left and right sides of the centered logo. You can set any value from 0 to 20, depending on how you want your menu items to be distributed.
This setup helps create a balanced, visually appealing header design — especially useful for stores with multiple navigation links and a central logo layout.
Automatic Transfer of a Header from Another Layout/Skin
Shopify does not support automatic migration of theme files. Because of this, all layout or header changes must be transferred manually.
Before you start
Make sure you have two copies of the theme:
Your current theme
A second theme copy where the desired header layout already exists or was imported
It is more convenient to open the code editor of each theme in separate browser tabs.
In both themes, open files: Online Store → Themes → Edit code → Sections→ header-group.json
In the theme that contains the header you want, open header-group.json and copy the entire content of the file.
Open header-group.json in your current theme and paste the copied content to apply that header’s structure and settings, without manually configuring each option.
Press Save to confirm the changes.
Last updated