Header

The header is the masthead at the top of every page: your mark, the navigation, and the search, account, and cart controls. In Lapels it is one Header section, and it renders on every template automatically.

What it does: Carries your brand and the route to everything else.

On desktop it is two rows. The wordmark or logo sits between the search icon and the account and cart cluster, then a hairline-ruled band holds the navigation. On phones the navigation moves into a slide-in drawer, opened by the menu button.

Header, footer, and overlays live in section groups

Lapels keeps three groups of sections that are not part of any one page:

• The Header group holds the Header section, and an optional Announcement bar above it. The Header itself cannot be removed or moved into the page body.
• The Footer group holds the Footer section. See Footer.
• The Overlay group holds the cart drawer, the search drawer, and quick view. They are always present and always configured rather than added. See Cart drawer.

Open Online Store → Themes → Customize and you will find all three groups in the left-hand sidebar, above and below the page’s own sections. Whatever you set there applies storewide.

Set up the header

1. 1 Add your brand mark
2. 2 Build the main menu
3. 3 Attach the menu
4. 4 Choose how the bar behaves
5. 5 Turn on the controls you need

1 Add your brand mark

Go to Theme settings → Brand and upload a Logo, plus an Inverse logo if your header uses a dark color scheme. Set a Wordmark there too. It is what shows when no logo suits the ground the header is standing on. See Brand.

2 Build the main menu

In your Shopify admin, go to Content → Menus and build the menu you want in the header. Nesting depth decides whether an item becomes a plain link, a drop-down, or a mega menu. See Navigation and menus.

3 Attach the menu

Back in the editor, open the Header section and set Main menu to the menu you built. The default is your store’s main-menu.

4 Choose how the bar behaves

Under Behavior, decide whether the bar follows the page down (Sticky header, and Sticky on desktop only if you also run the mobile navigation bar) and whether it floats over the first section (Sit over the hero).

5 Turn on the controls you need

Under Navigation and Localization, switch on Show search, Show the account link, and the country and language selectors as your store needs them.

← Back

Next →

Header settings

Open the Header section in the Header group of the editor.

Setting	What it does	Default
Color scheme	The ground and ink for the whole masthead. The drop-downs, the mega menus and the mobile drawer carry no scheme of their own. They inherit this one, so a single choice colors the entire navigation.	scheme-paper

Behavior

Setting	What it does	Default
Sticky header	Keeps the header at the top of the screen as the page scrolls.	On
Sticky on desktop only	The header scrolls away with the page on phones and stays pinned on desktop. Turn it on if you use the Mobile navigation bar, so a small screen does not carry two navigation bars at once.	Off
Sit over the hero	Floats the header over the first section until the page scrolls. It wins over Sticky header, so on that page the bar travels away with the hero.	Off
Blur strength	Softens the picture behind the floating header so the wordmark and links stay readable over a busy photograph. None, Subtle, Medium, or Strong. Only shown when Sit over the hero is on.	Medium

Note

Sticky header and Sit over the hero are exclusive by design. A transparent bar pinned over ordinary page content would be unreadable, so where Sit over the hero applies, sticky stands down. On every other template the header is opaque and the sticky setting takes effect as usual.

Brand

Setting	What it does	Default
Branding	Whether the masthead shows your Logo or your Wordmark. Upload the logo itself under Theme settings → Brand.	Logo
Wordmark	The name set in type. Leave it blank and the header uses the wordmark from Theme settings → Brand, then your store name.	None
Logo height	Height of the logo in pixels on desktop, 12–100. Height drives the size, so logo files of any proportion line up on the same optical line.	24 px
Logo height on mobile	The same, for phones, 12–100.	18 px

Upload the files themselves under Theme settings → Brand, not here. See The logo and the wordmark below.

Navigation

Setting	What it does	Default
Main menu	The menu the header renders. Pick any menu you built in Content → Menus.	Main menu
Show search	Shows the search icon in the bar. The panel it opens is the Search section in the Overlay group.	On
Show account	Shows the account control. It appears only when your store has customer accounts turned on.	On

The cart icon has no toggle. It is always in the bar, with a live count badge that hides when the cart is empty. Whether it opens the drawer or the cart page is set once in Theme settings → Cart. See Cart.

Localization

Setting	What it does	Default
Show country and currency selector	Offers a country and region picker, which also sets the currency.	Off
Show language selector	Offers a language picker.	Off

Both selectors appear only when your store actually gives the visitor a choice: more than one country published in Settings → Markets, or more than one language in Settings → Languages. Switching a setting on does not add a control your store cannot fill.

The logo and the wordmark

The header mark is not an upload on this section. It comes from Theme settings → Brand, and Lapels picks which file to use from the brightness of the header’s own color scheme:

1. On a dark scheme it uses your Inverse logo.
2. On a light scheme it uses your Logo, falling back to the logo in your Shopify Settings → Brand.
3. If the file the ground calls for was never uploaded, the header shows your Wordmark instead.

That last step is deliberate. The two logo files are two inks, not two copies of one mark, so Lapels never substitutes one for the other. A dark logo on a dark bar is not a softer landing than your store’s name set in type that every scheme is contrast-checked on.

The wordmark falls back through the Header section’s own Wordmark field, then Theme settings → Brand, then your store name. The masthead is never empty.

Sit over the hero does not change that reading. Over the hero the bar has no ground of its own. It is your photograph, softened. So the mark is still chosen from the header’s color scheme, which is also what colors the links standing beside it. Pick the scheme whose ink suits the picture you put behind it.

Caution

If you use a dark color scheme on the header, upload an Inverse logo. Without one, those pages show the wordmark rather than your mark.

Navigation, drop-downs, and mega menus

The links themselves live in your Shopify admin under Content → Menus. The Header section only points at a menu. How deeply you nest items decides whether a top-level entry is a plain link, a drop-down, or a full-width panel.

The Mega menu block is how you promote one top-level item to a full-width panel. Add it from the Header section’s Add block menu. The section holds up to 8 blocks in total, counting mega menus and custom links together.

Block setting	What it does	Default
Menu item name	The name of the top-level menu item this panel attaches to, typed exactly as it reads in your menu. Matching ignores case and stray spaces. The item needs sub-items in Content → Menus, because an item with nothing under it is never promoted.	None
Columns	How many link columns the panel holds, 2–6. It is a ceiling rather than an exact count: a short menu settles into fewer, and a second promotion leaves room for fewer still.	4
Show image on each link	Gives each link a picture borrowed from the collection, product, or article it points at. A menu item that carries a third level ignores this and shows titled columns of links instead.	On

Each panel can also carry up to two promotions, pinned to its end. Leave them empty for links alone.

Promotion setting	What it does	Default
Image	The picture for the promotion.	None
Heading	The promotion’s headline.	None
Text	A supporting line under the heading.	None
Link	Where the promotion goes.	None
Link label	The wording of the link. Only shown once Link is set.	Shop the edit (first promotion), empty (second)

The Second promotion group repeats the same five fields. Two promotions sit side by side on desktop and stack on mobile, and because they take more of the panel, the link columns drop to a maximum of two.

Full detail is on Navigation and menus. That covers menu depth, the three panel shapes, the image ratio, and mobile behavior.

Custom link blocks

Besides the mega menus, the header takes Custom link blocks: a single icon-and-label control placed in the masthead itself, beside search, account and cart. It is how you add a wishlist, a store locator, a repairs booking, or a phone number to the bar without touching the main menu.

Block setting	What it does	Default
Icon	One mark from the theme’s set, such as Home, Storefront, Grid, Tag, Heart, Journal, Envelope, Telephone, Map pin, Speech bubble, Support, Worldwide, Repairs or Clock, plus the rest of the making icons.	Heart
Label	The control’s name. It is what a screen reader announces, and on a wide screen it is printed beside the icon.	”Wishlist”
Link	Where it goes.	None
Position	Left puts it with the menu, Right with search, account and cart.	Left
Hide on mobile	Keeps it off small screens, where the bar has least room.	Off

Tip

The masthead is narrow and every control in it competes with the menu. One custom link is usually the most a header can carry without the brand mark losing its space. On a phone, Hide on mobile plus a Mobile navigation bar entry is almost always the better arrangement.

Search, account, cart, and localization

• Search is an icon that opens the search drawer. It is a real link to your search page underneath, so it is never a dead control. Configure the panel itself on Search drawer.
• Account is Shopify’s own account control: on stores using customer accounts it opens a sign-in sheet in place rather than routing away, and its links come from your customer-account-main-menu menu in Content → Menus. On stores still on legacy accounts the same control is a plain link to the sign-in page. It stays in the bar at every screen size.
• Cart shows a count badge and announces changes politely to screen readers. It opens the cart drawer or the cart page depending on Theme settings → Cart.
• Country and language open a small panel from a globe button. The button announces the current values in full, for example “Country and language, Canada (CAD) · English”. Below 960 px the pickers move to the foot of the navigation drawer, so only one copy is ever in the page.

Keyboard and accessibility

The masthead is operable end to end without a pointer:

• A Skip to content link is the first thing in the page. Press Tab on arrival and it appears. Press Enter and focus jumps past the whole header to the page’s main content.
• Every top-level item with children carries a small expand button beside its link. The link itself always navigates. The button opens the panel. On pointer devices the panels also open on hover.
• Escape closes an open drop-down or mega panel and returns focus to the button that opened it. It also closes the localization panel and the mobile drawer.
• While the mobile drawer is open the rest of the page cannot be reached: Tab and Shift+Tab wrap inside the drawer, and screen readers cannot walk into the content behind the scrim. Tapping the dimmed area closes it.
• Every icon-only control keeps a visible-to-screen-readers name and a 44 px touch target. Focus order follows the visual order at both screen sizes.
• The header mirrors correctly in right-to-left languages, and third-level columns flip to open inward when there is no room outward.

What you set, and what the theme decides

You set	Lapels decides
Color scheme. Sticky and transparent behavior, and blur strength. Wordmark and logo heights. Which menu the header shows. Search, account, country and language toggles. Mega menu blocks and their promotions.	Which logo file suits the header’s ground, and the wordmark fallback. The two-row desktop layout and the mobile drawer. Drop-down versus mega panel, decided by menu depth. Hiding a selector when the store has only one country or language. The cart badge. Hover, focus, keyboard and Escape behavior.

Related: Navigation and menus · Announcement bar · Footer · Brand · Lapels support replies within 12 hours.