# Header and footer

Chapter 3 of the Torque user guide.

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.

## Header

| Setting | Default | Notes |
|---|---|---|
| **Layout** | Catalogue | **Catalogue** 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 |
| **Menu** | `main-menu` | Choose the menu from **Online Store › Navigation** |
| **Menu style** | Mega menu | **Mega 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 hover** | On | For shoppers using a mouse. Menus always open on click, tap and keyboard |
| **Highlight the last menu link** | Off | Shows the last top-level link in the sale colour, at the end of the row. Good for a Deals link |
| **Show search** | On | |
| **Search placeholder** | "Search by part number, product or brand" | |
| **Show My garage** | On | Shows when vehicle fitment is on in theme settings |
| **Sticky header** | Always | **None**, **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.

## Footer

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).