Contents

The header group holds the Announcement bar and the Header; the footer group holds the Footer. Click either in the editor's left bar to edit them. Both appear on every page.

Announcement bar

A thin accent-coloured bar above the header. It holds up to 4 blocks, with at most one countdown. Two or more announcements rotate every 6 seconds, with a pause button at the end of the bar; for visitors who prefer reduced motion the first one stays put.

  • Announcement block: Text, Link and Link label. The label is shown as a link after the text; leave it empty to link the text itself.
  • Countdown block: Label (default "Sale ends in"), End date (format 2026-11-27), End time (24-hour, default 23:59), Time zone (Store time zone, or a UTC offset), Link and Link label, and After the deadline: Hide the countdown (default) or Show a message, with Message after the deadline (default "This sale has ended").

Use a real deadline that is the same for every shopper. Shopify doesn't allow fake countdowns, so don't extend or restart a deadline to create urgency.

SettingDefaultNotes
LayoutCatalogueCatalogue puts a large search field in the header and the menu in a row of its own. Classic keeps the logo, menu and icons in one row
Menumain-menuChoose the menu from Online Store › Navigation
Menu styleMega menuMega menu shows a top-level link's child links as columns when they have links of their own; other top-level links keep a dropdown. Or Dropdown
Open menus on hoverOnFor shoppers using a mouse. Menus always open on click, tap and keyboard
Highlight the last menu linkOffShows the last top-level link in the sale colour, at the end of the row. Good for a Deals link
Show searchOn
Search placeholder"Search by part number, product or brand"
Show My garageOnShows when vehicle fitment is on in theme settings
Sticky headerAlwaysNone, Always or On scroll up. Always keeps the header at the top of the screen; in the catalogue layout the menu row folds away while shoppers scroll down. On scroll up hides the header while shoppers scroll down and shows it again when they scroll up

The account panel's links come from Theme settings › Customer accounts.

Building a mega menu. In Online Store › Navigation, give a top-level link (say Brakes) child links (Pads, Rotors, Calipers), and give those children their own links (Front pads, Rear pads). Each child becomes a column headed by its name. A top-level link whose children have no links of their own opens as a simple dropdown.

Header blocks. Add these under the Header section:

  • Free shipping note: "Free shipping over $150" in the utility row, using the amount from Theme settings › Commerce. Setting: Label (default "Free shipping over"). Hidden while the threshold is 0, and for customers shopping in another currency.
  • Utility text: a label with a bold value, such as "Same-day dispatch when you order by 2 pm". Shown in the utility row above the header on screens 990px and wider. Settings: Label, Value.
  • Product count: the real number of products in your catalogue, such as "18,400 parts in our catalogue". Setting: Label (default "parts in our catalogue").
  • Utility link: Text, Link and Bold. Shown at the end of the utility row and at the bottom of the menu drawer. Use it for trade accounts, a store finder, help or a phone number (a tel: link).
  • Menu promo: an image card inside a mega menu. Menu item is the title of a top-level link in the header menu, exactly as written (such as Lighting); at most two promos show per link. Also Image, Kicker (default "Featured"), Heading, Text and Link.

My garage in the header. With vehicle fitment on and set up, the header shows a My garage button beside the account and cart icons, a Shop by vehicle item at the start of the menu and at the top of the menu drawer, and on phones a strip under the header reading "Shopping for 2018 Toyota Hilux" with a Change link. All of these open the My garage drawer (chapter 6). They stay hidden until at least one Vehicle entry exists.

On phones the header shows the menu button, the logo and the icons, then a full-width search field. The menu drawer lists the whole menu with nested levels and the utility links at the bottom.

Section settings:

  • Show country and language selectors (on): set up markets and languages in your Shopify admin first (chapter 10).
  • Show policy links (on): links to the policies in Settings › Policies.
  • Show payment icons (on): the payment methods your store accepts.
  • Show Powered by Shopify (off).

Footer blocks:

  • Newsletter: Heading (default "Restock alerts and how-to guides"), Text and Show Follow on Shop (on; lets customers follow your store in the Shop app). Sign-ups appear in Customers in your admin as subscribed to email marketing.
  • Text and contact: Show logo (uses the logo from theme settings, or the store name), Heading, Text, Phone number (shown large, and dials the number when tapped on a phone), Opening hours (appears once a phone number is set) and Show social icons.
  • Menu column: Heading (default "Shop") and Menu (default footer). Add one per column, for example Shop, Help, Trade and About.
  • Social media: Heading (default "Follow us") and the icons from Theme settings › Social media.

The footer also accepts the general theme blocks (Heading, Text, Button and so on; see chapter 5).