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.

Utility bar

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

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 currency selector is on — it exists separately for the utility bar and the mobile drawer.

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 background/text colours. 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.

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.
• Background and text colour — the footer ships dark by default and doesn't have to follow the page palette.

Next: build your homepage →