Header & Navigation

The header area is four stackable pieces — announcement bar, utility bar, header, and mobile drawer — each independently configurable.

Your logo

The header takes two logo images, and the second one is the part worth understanding.

1. Open the theme editor, select Header in the section list, and use the Logo picker to upload your logo. A PNG with a transparent background is what you want — a JPG carries a white box that will show against any header colour that isn't white.
2. Upload it at roughly twice the size you want it displayed, so it stays sharp on high-resolution screens. If you want a 150px-wide logo, supply one around 300px wide.
3. Set Logo width to suit. This is the displayed width; the file itself can be larger.
4. If you use the transparent header (below), also fill in Transparent logo — see the note.
5. Set the Footer logo separately, under the Footer section. It has its own picker and width because footers are usually a different colour from headers.

No logo at all is a supported state, not a broken one: the header falls back to your store name in the theme's heading font. It looks deliberate rather than empty — but a real logo is worth the ten minutes before you launch.

Header layouts

Two settings combine into nine desktop layouts:

Split around center logo halves your menu either side of a centred logo — the classic premium look. On mobile, every layout collapses to the standard toggle / logo / actions bar with a slide-out drawer.

Creating your menus

Peregrine reads standard Shopify navigation menus — the theme never invents links, so your navigation lives in one place and survives theme changes. To build or change one:

1. In Shopify admin, go to Content → Menus (in older admins this lives at Online Store → Navigation — same feature, different door).
2. Open Main menu — every store has one — or click Create menu for a new one.
3. Click Add menu item, give it a name (this is exactly what shoppers see) and pick where it links: start typing to search your collections, products and pages, or paste any URL.
4. To make a dropdown, drag an item to the right so it sits indented under its parent — the parent becomes the dropdown trigger automatically. Drag a third level under a second for the deeper columns a mega menu uses. Nothing else is needed: nesting is the dropdown.
5. Click Save menu.
6. In the theme editor, open the Header section and check its Menu setting points at the menu you just edited. The utility bar and footer each pick their own menus the same way.

Shopify's own reference: Menus and links.

Dropdowns & mega menus

Menu items with children get hover/focus dropdowns automatically, up to three levels. To upgrade a top-level item to a full-width mega menu:

1. In the Header section, click Add block → Mega menu.
2. Type the menu item's title into the block — the match is exact, so "Shop" must be spelled exactly as it appears in your navigation menu.
3. That item's dropdown becomes a full-width panel: second-level links render as column headings with third-level links beneath.
4. Optionally add up to two promo images per mega menu, each with a heading and link.

Sticky header

Three modes under Header → Sticky header:

• Off — the header scrolls away normally.
• Always visible — the header pins to the top of the screen for the whole scroll.
• Show on scroll up — the header hides while scrolling down (maximising content space) and slides back the instant the shopper scrolls up.

Transparent homepage header

One switch (Header → Transparent on homepage) overlays the header on your hero image: the header and utility bar become transparent, an alternate logo can swap in, and everything restores to solid the moment the shopper scrolls. Set a transparent-mode text colour that suits your hero imagery — white over dark photography is the classic pairing.

My size — the measurements button

A My size button sits in the header's icon row beside search. It opens a panel — a drawer from the right on desktop, a sheet from the bottom on a phone — where a shopper saves their measurements and their units once. Every Fit finder in the store then opens with the fields it recognises already filled in and the size worked out, and every product card shows their size in its size run. The button carries a small dot once something is saved, and nothing else: the numbers stay behind the door, where they are edited.

It ships switched off. A fresh install has no fit guides yet, and a button that collects measurements nothing uses is worse than no button — so add your fit guide metafields first, then turn it on. Under Header → My size: the switch, the label (which is also the panel's title), the panel's introduction, the starting units and the privacy note pinned at the foot of the panel. The measurements it asks for are not set here: they are the store's list under Theme settings → Fit finder → Measurements the store collects, shared with the Find your fit section and the bars, each with its label, fit-guide key, a hint under the box and a Used for tooltip behind a small info icon beside the label. The button is hidden until at least one measurement is switched on.

The measurements are kept in that shopper's own browser and are never sent to your store, to us or to Shopify. They are not a cookie, so they need nothing new for consent. They are kept for the visit, not forever: an hour after the shopper's last page view they delete themselves, so someone back within the hour still has them and someone back tomorrow starts clean. A Forget link sits beside the Size locked line whenever there is something to forget. On a phone the button is the icon alone; the panel is the same.

Utility bar

A slim bar above the header for the things that shouldn't crowd your navigation. Left: a utility menu (assign any navigation menu). Right: social icons (read from your Theme settings social accounts) and the currency and language pickers. Desktop-only by default; a switch shows it on mobile too. Its contents also fold into the mobile drawer footer.

It can also be dragged below the header inside the Header group, if you would rather it sat under your navigation than over it.

Where the language and country pickers live

Three places, each with its own switch, and none of them renders until the store actually has a choice to offer. The header's icon row, beside search and the account icon, on desktop — two small text controls in the row's own face that read as "English" and "United Kingdom" (the currency named only where it differs from your store's, and the pair shortened to "EN" / "GB" on desktop screens narrower than 1152px, where the row has less room) and switch the moment a shopper picks (Header → Show language selector / Show country/currency selector, both on by default). The menu drawer on a phone, in its footer, so the row stays an icon row at phone width. And the utility bar, if you add one. A store with one language and one market shows nothing in any of them — the theme reads what Shopify offers rather than inventing a picker with one entry.

The currency picker — setting up Markets

The picker lists the countries of your active markets, each with its currency — and it only renders when there's a genuine choice, so a single-market store shows no picker at all. That's by design: the theme reads what Shopify offers, and offering currencies is Markets' job. To add one:

1. First, the gate most people hit: selling in another market's local currency requires Shopify Payments. Check Settings → Payments — if Shopify Payments isn't your card processor, foreign markets will sell in your store currency instead, and the currency options in Markets stay greyed out.
2. Go to Settings → Markets and click Create market (or open one Shopify pre-created).
3. Name it and tick the country or countries it covers. A country can only belong to one market — if it's greyed out here, it's already in another.
4. Open the new market's currency settings and confirm it sells in the local currency (with Shopify Payments active this is the default, using automatic exchange rates).
5. Make sure the market is Active, not Draft. A draft market never appears in the picker, however complete its setup — activating it is a separate, explicit step.
6. In the theme editor, check Show country/currency selector is on — it exists separately for the header's icon row (desktop), the mobile drawer and the utility bar.

If the picker doesn't update straight away, hard-refresh the storefront (Ctrl+F5, or ⌘⇧R on a Mac). Shopify caches storefront pages for a short while, and the picker is baked into that cached page — after any Markets change, a stale page can show the old country list in both directions for a few minutes. Refresh before concluding something's wrong.

Shopify's own reference: Markets.

The language picker — publishing languages

Same principle: the picker appears once your store has two or more published languages, and lists exactly those.

1. Go to Settings → Languages and click Add language.
2. Pick the language. It arrives unpublished — visible to you, not to shoppers.
3. Translate your content with Shopify's free Translate & Adapt app (it's offered right there on the Languages page) — it machine-translates as a starting point and lets you edit anything by hand. Peregrine's own labels ("Add to cart", the cart messages and so on) are all translatable the same way.
4. Back on the Languages page, click Publish against the language. The picker appears on the storefront from that moment.

Shopify's own reference: Selling in multiple languages.

Announcement bar

Announcements are blocks — add up to five, each with its own text, link, and colour scheme (dark out of the box). Two or more auto-rotate (3–10s, pausing on hover); optional arrows and a dismiss button (dismissal persists for the shopper). Text size and vertical padding are adjustable.

Changed in 1.1.0. Each announcement used to carry its own background and text pickers. It now picks a scheme instead, which is what lets a rotating bar change palette cleanly between slides — the bar takes the active announcement's scheme as it rotates.

Predictive search

The search icon opens a flyout — shoppers never leave the page. As they type, live results appear with product image, title and price (sale pricing included), plus a "View all results" link to the full search page. On desktop the flyout is a compact popover anchored to the search icon; on mobile it spans the full width. Results are rendered server-side, so currencies and translations are always correct.

Account icon

When customer accounts are enabled in your Shopify admin (Settings → Customer accounts), the header shows Shopify's own account component beside the cart, on desktop and mobile. It handles sign-in itself — including passwordless Shop sign-in — and on the newer customer accounts it opens Shopify's account sheet right on the storefront. Header → Show account icon switches it off; with accounts disabled in Shopify it never renders regardless. The account pages themselves are covered in Customer Accounts.

Footer

The footer is built from blocks — add up to six columns of navigation menus, text or a newsletter signup, in any order. Around them sit the section's own settings:

• Logo and Logo width — its own picker, independent of the header's, plus an optional store name and a short brand description beneath it.
• Show social media icons — renders whichever accounts you've set in Theme settings → Social accounts.
• Show Follow on Shop button — Shopify's own button so shoppers can follow your store in the Shop app. It appears only when your store uses the Shop sales channel, and its branding is Shopify's — that's a platform rule, not a theme choice. On by default.
• Show payment icons — the payment methods your store actually has enabled, straight from Shopify.
• Additional copyright text and the Sitemap page link — the copyright line always shows © year and your store name; this appends to it.
• Colour scheme — the footer ships on the dark scheme (Scheme 3) by default and doesn't have to follow the page palette; pick any of your schemes.

Next: build your homepage →