Header

Use these recipes as complete starting points. Each one lists the exact Header section and block settings that create the design. The illustrations show the structure; your logo, color scheme, menus, icons, and hero media supply the final character.

Open Online Store → Themes → Customize, then select Header in the header group. Changes made there apply across the store.

Prepare the header once

Before choosing a design:

1. In Content → Menus, create the menu you want shoppers to use. Top-level links are the primary navigation. Links nested beneath them become secondary and third-level navigation.
2. In the Header section, add or keep one Logo, one Menu, and one Icons block.
3. Open the Menu block and set Menu to the menu you created.
4. Set the logo image and width under Theme settings → Logo. If no image is set, the Logo block displays the shop name and controls its weight and letter case.
5. Add Country and language only when the store serves multiple markets or languages.
6. Preview the home page, a product page, a collection page, and a phone width before publishing.

The desktop composition and mobile menu are separate decisions. Finish the desktop recipe first, then complete the mobile setup near the end of this guide.

Choose a design

Design	Best for	Main characteristic
Editorial Studio header	Brands that want a visible rail or a closely related compact variation	Choose a rail without routines, a rail with routines, or a one-row Menu drawer, then choose Soft shadow or Fine outline
Split dock over a hero	Campaigns and highly visual launches	Menu, brand, and utilities float as separate surfaces

Design 1: Editorial Studio header

Choose this when the main menu is part of the brand presentation and shoppers should see the main destinations immediately. Versions A–C use Soft shadow. Versions D–F repeat the same navigation choices with Fine outline.

A. Without routine links

Transparent preview

Solid preview

Header settings

Setting	Value
Header composition	Studio bar
Desktop navigation layout	Navigation rail
Main menu alignment	Center for an editorial balance, or Left for a catalog-led layout
Desktop brand signature	A short phrase, or blank to hide it
Header background style	Transparent or Solid; compare the previews above
Surface finish	Soft shadow
Header behavior	Smart sticky on scroll
Show routine links on desktop	Off

Menu block settings

Setting	Recommended value
Desktop menu font size	Small or Medium
Show submenu arrows	On when the menu has nested links
Desktop menu letter case	Capitalize
Desktop submenu layout	Columns for broad groups; Fly-out panel for compact, deeper groups

Keep top-level labels short and distinctive. If the primary menu cannot fit one line, Manifest temporarily shows the compact Menu drawer instead. The saved Navigation rail setting does not change, and the rail returns automatically when enough space becomes available.

B. With routine links

Transparent preview

Solid preview

Start with every setting from version A, including Surface finish → Soft shadow, then apply only these additional settings:

Location	Setting	Value for the illustrated design
Header section	Main menu alignment	Left
Menu block	Utility menu for desktop and mobile	A small menu containing Search and About Us
Header section	Show routine links on desktop	On
Header section	Show routine links on mobile	Off; configure mobile separately if needed
Header section	Routine links heading	Shop by routine
Header section	Maximum routine links on each device	2

Create the utility menu under Content → Menus, then select it in the Header section’s Menu block. Search and About Us reproduce the screenshot, but you can use any two to five useful shortcuts. Do not repeat every primary link or use this group for policy links.

When space allows, the main menu stays on the left and the routine group sits on the right. When they cannot share one row, the routine group moves to its own row. If the primary main menu itself cannot fit one line, Manifest temporarily switches to the complete Menu drawer so every link remains available.

C. Compact Menu bar

Transparent preview

Solid preview

Start with version A, including Surface finish → Soft shadow, and change one setting:

Location	Setting	Value
Header section	Desktop navigation layout	Menu drawer

That single change removes the visible rail and places a labeled Menu button beside the brand in one compact row. Your main, nested, secondary, and enabled routine links remain available inside the complete menu. The Desktop menu opening style setting then controls whether that button opens a Navigation panel or a Side drawer; it does not change the closed appearance shown here.

Choose a solid or transparent background

The background treatment does not create a separate header design. Keep the same version and select Header background style → Solid for an opaque header, or Transparent when a compatible full-bleed Hero banner or Product stage opens the page. For a transparent header, set Transparent header text to Light over dark imagery or Color scheme over pale imagery. Pages without compatible opening media use the solid, readable header automatically. On mobile, a Product stage slide set to Fit within the stage also uses an opaque header in the header’s selected color scheme. A filled slide keeps the configured overlay treatment.

Mobile appearance for A, B, and C

Transparent preview

Solid preview

All three desktop versions use the same compact mobile header when routine links are disabled on mobile. To reproduce the screenshot, set Mobile logo position to Start, Mobile menu opening style to Navigation panel, and Show routine links on mobile to Off. Search, account, cart, and the Menu button remain visible in one row. The desktop rail and its alignment do not carry into the mobile layout.

D. With routine links and Fine outline

Transparent preview

Solid preview

Start with every setting from version B and change one setting:

Location	Setting	Value
Header section	Surface finish	Fine outline

This keeps the main menu on the left and the routine group on the right when space allows. The same automatic Menu drawer fallback protects every link when the primary menu cannot fit on one line.

E. Without routine links and Fine outline

Transparent preview

Solid preview

Start with every setting from version A and change one setting:

Location	Setting	Value
Header section	Surface finish	Fine outline

F. Compact Menu bar with Fine outline

Transparent preview

Solid preview

Start with every setting from version C and change one setting:

Location	Setting	Value
Header section	Surface finish	Fine outline

Mobile appearance for D, E, and F

Versions D, E, and F share this compact mobile arrangement. To reproduce the screenshot, set Mobile logo position to Center, Mobile menu opening style to Navigation panel, and Show routine links on mobile to Off. The Menu button moves to the start of the row, while search, account, and cart remain at the end.

Design 2: Split dock over a hero

Choose this for the most visual composition. Split dock separates the Menu button, brand, and utilities into floating surfaces so the opening image remains visible between them.

A. Without routine links

Transparent preview

Solid preview

Header settings

Setting	Value
Header composition	Split dock
Desktop navigation layout	Navigation rail
Desktop menu opening style	Navigation panel
Header background style	Transparent or Solid; compare the previews above
Transparent header text	When the background is Transparent, use Color scheme over pale imagery or Light over dark imagery
Apply soft shadow	On
Header behavior	Smart sticky on scroll
Show routine links on desktop	Off

The Menu button and brand share the left dock while country, search, account, and cart occupy the right dock. Desktop navigation layout → Navigation rail also defines the Studio fallback used on pages that do not begin with compatible full-bleed media. Changing Header background style changes only the surface treatment: Transparent allows the hero to show through the dock, while Solid uses the selected color scheme.

B. With routine links

Transparent preview

Solid preview

Start with every setting from version A, then apply these additional settings:

Location	Setting	Value for the illustrated design
Menu block	Utility menu for desktop and mobile	A small menu containing Search and About Us
Header section	Show routine links on desktop	On
Header section	Show routine links on mobile	Off
Header section	Routine links heading	Shop by routine
Header section	Maximum routine links on each device	2

With the Navigation rail fallback selected, Split dock places enabled routine links below the brand in the left floating surface. If Desktop navigation layout is changed to Menu drawer, the routine links remain available inside the complete menu instead of appearing in that surface.

Mobile appearance for A and B

Transparent preview

Solid preview

Both versions use this mobile arrangement when Show routine links on mobile is off. Set Mobile logo position to Center and Mobile menu opening style to Navigation panel. The Menu button remains at the start, the logo is centered, and search, account, and cart remain at the end.

Split dock appears only when the page opens with a compatible full-bleed Hero banner or Product stage. Everywhere else, Manifest uses the corresponding Studio fallback:

• Navigation rail gives those pages a visible Studio rail.
• Menu drawer gives those pages a compact, one-row Studio header.

This fallback is intentional. It keeps the header readable when there is no opening image for the floating dock to sit over.

Routine links in other designs

Routine links are short, repeated entry points such as Morning, Evening, Sensitive skin, or Travel. They come from the Utility menu for desktop and mobile selected in the Menu block. Design 1B shows the complete setup for a Studio navigation rail. In the other designs, the same menu is placed as follows:

Where the links appear depends on the chosen design:

Design	Routine-link placement
Studio with Navigation rail	In the rail when space allows; otherwise on its own row
Studio with Menu drawer	Inside the complete navigation menu
Split dock with Navigation rail fallback	In the floating routine rail and in the Studio fallback
Split dock with Menu drawer fallback	Inside the complete navigation menu

Use this menu for genuinely useful alternate paths, not for policy links or a second copy of every primary destination.

Build nested menus and promotions

The structure is controlled in Content → Menus:

• Top-level links are primary navigation.
• Links nested one level below are secondary navigation.
• Third-level links use the Desktop submenu layout selected in the Menu block when the visible Navigation rail is active.

Columns

Set Menu block → Desktop submenu layout to Columns when shoppers benefit from seeing several groups and their links at once.

Broad nested menu

Shallow menu

A deeply nested menu uses each secondary link as a column heading and places its third-level links below it. A shallow menu stays compact because there are no third-level groups to expand. Menu promotion blocks appear alongside the links when they are attached to the open top-level item.

Fly-out panel

Set Menu block → Desktop submenu layout to Fly-out panel when the first choice should stay compact and shoppers can open one deeper group at a time.

Nested group open

Shallow menu

Secondary links stay in the parent panel. Opening a link that has children reveals its third-level links in the adjacent panel. A shallow menu does not create an empty fly-out; it remains a single compact panel. Promotions remain in the parent panel.

To add visual content to a menu, add a Menu promotion block in the Header section:

1. Enter the exact top-level link label under Attach to menu item.
2. Choose a Promotion image and its ratio.
3. Add meaningful Alt text.
4. Add the eyebrow, heading, subheading, link, and link label.
5. Add more promotion blocks with the same top-level label to create a browsable promotion rail.

If a promotion does not appear, compare Attach to menu item with the Shopify menu label, including spaces and punctuation.

Set up mobile navigation

Mobile uses the same main menu but has its own presentation settings.

Setting	How to choose
Mobile logo position	Start keeps the row directional; Center creates a symmetrical brand lockup
Mobile menu opening style	Navigation panel gives the menu an editorial overview; Side drawer uses a familiar vertical hierarchy
Show routine links on mobile	Turn on only when those shortcuts are useful on a small screen

Open the phone preview and test at least one menu branch through every nesting level. Also open search, the country and language selector, the account menu, and the cart so the complete header flow is checked rather than only its closed appearance.

Understand the automatic rail fallback

Navigation rail remains the layout you selected. When the primary menu cannot fit on one line, Manifest temporarily switches the Studio header to its compact, one-row Menu drawer. The saved setting is not changed. Every primary, nested, secondary, and enabled routine link remains available in the drawer, and the rail returns when sufficient space becomes available.

Manifest measures again after the browser is resized, web fonts finish loading, the page loads, or the Header section reloads in the theme editor. If keyboard focus is inside the rail when it collapses, focus moves to the visible Menu button.

With JavaScript disabled, navigation wraps instead of clipping. Do not shrink menu text, clip links, or introduce horizontal scrolling to force a long menu into one line. Shorten unclear labels or use the Menu drawer design when a compact header is the intended look.

Add shipping and gift goals to the cart drawer

In Header → Cart drawer, use Cart rewards to show an optional shipping spend goal, a gift spend goal, or both above the cart items. Add the Cart drawer block if it is missing; the Header supports one of these blocks.

Setting	Default	How to use it
Show free shipping progress	Off	Turn on after configuring a matching free shipping rate in Shopify shipping settings
Free shipping threshold	50	Enter the qualifying amount in the store currency, such as 50, 65, or 49.95; appears when shipping progress is on
Show free gift progress	Off	Turn on after configuring a matching gift offer and fulfillment; works independently of shipping progress
Free gift threshold	75	Enter the gift spend goal in the store currency; appears when gift progress is on
Gift name	a free mini cleanser	Name the reward as it should appear in “Add $25.00 to unlock a free mini cleanser.”; a blank name falls back to “a free gift”
Gift link	None	Optionally link to the gift product or offer details; “View your gift” appears after reaching the gift goal
Progress style	Circle	Choose Circle, Rounded bar, or Segmented bar; appears when either progress option is on

Circle places a small circular meter around the icon beside the message. Rounded bar uses a slim, 6px pill-shaped track. Segmented bar divides the track into eight sections. Shipping alone uses a delivery icon; enabling a valid gift goal uses a gift icon. All styles use the same totals and goals and respect the global interface animation speed, No motion, and reduced motion.

With shipping alone, a $50 goal and a $38 cart show “You are $12.00 away from free shipping!” at 76%. At $50, the meter is full and the message reads “You’ve unlocked free shipping!”

With a $50 shipping goal and a $75 gift goal, the same $38 cart still names the $12 remaining for shipping, but the meter measures 38/75 toward the final tier. At $50, the shipping row shows “✓ Goal reached”, and the message changes to “Add $25.00 to unlock a free mini cleanser.” At $75, both rows show that their goals are reached, the meter fills completely, and the gift link appears if set. Gift progress also works alone. If the gift threshold is lower than shipping, the message names the gift first and then shipping; equal thresholds reach both goals together. Removing items or applying discounts updates the message, reached labels, link visibility, and meter in both directions.

The Cart drawer block owns the toggles, thresholds, gift copy, gift link, and style. Shopify cart data owns the total after discounts, including paid samples and gift wrapping. Free items do not increase progress. Shopify shipping settings own actual rates. The merchant owns the gift offer and fulfillment. No metafields or apps are required for the display.

This is a progress display. It does not add a gift, change prices, apply a discount, or create a shipping rate. Configure and test the matching offer separately. For a Shopify Buy X get Y offer, customers must add the gift themselves. Use the gift link to make it easy to find. Shopify discount eligibility can use different products or spending rules from this cart-total display. Only enable progress when the offer applies to all products and shoppers in the store currency and matches the displayed total after discounts. Verify discounts, combinations, and checkout eligibility before publishing; a reached display goal does not verify Shopify discount eligibility.

Both goals hide for an empty cart or another presentment currency. Shipping progress also hides when the cart does not require shipping; the gift goal can still display. A blank, zero, or negative threshold disables that goal without affecting the other. The theme editor shows setup notes for invalid thresholds and a currency note when the preview market differs from the store currency. Choose a market using the store currency to preview the goals. Existing saved shipping settings retain their values; gift progress is off by default.

The display updates when the drawer opens and after quantities, removals, samples, and gift wrapping change. Its translated message announces changes to screen readers. Check below, exactly at, and above each threshold, then remove an item to cross back below it. Test the gift link with keyboard navigation and verify the matching offer and shipping rate at checkout.

Finish the shared details

These settings can be applied to every recipe:

• Color scheme controls the solid header and fallback colors.
• Header behavior can be Smart sticky on scroll, Always sticky, or Static. Smart sticky is the balanced default because it returns when a shopper scrolls upward.
• Blur background behind open menus separates navigation, search, and localization surfaces from the page beneath them.
• The Icons block selects outline or filled icons, hover behavior, search and account visibility, the account menu, and the cart icon.
• The Country and language block controls how the current country or currency is labeled. Add it only when the corresponding Shopify Markets options are configured.

Before publishing, check the header with the longest translated labels you expect to support. The automatic fallback protects access to every link, but the chosen design should still look deliberate in the languages your store serves.

Navigation defaults and editor behavior

New Header menu pickers default to Shopify’s Main menu, which exists in a fresh store. Customer account menu keeps Shopify’s native account links while Main menu or an empty value is selected; choose a separate account menu for custom links. Utility menu for desktop and mobile omits a duplicate of the primary navigation; choose a separate menu for useful shortcuts. Existing saved selections remain.

Editor reloads preserve only the theme-owned quick-view selection. Shopify keeps control of section scrolling and focus. Quick view preserves language/market URL prefixes. The Cart rewards settings and saved values remain intact.