# Header, menus and footer

Chapter 3 of the Rep user guide.

The announcement bar and the header sit in the **Header** group at the top of the editor's section list; the footer is in the **Footer** group at the bottom. They show on every page.

## Announcement bar

The strip across the top of every page, on the dark band.

| Setting | Default | What it does |
| --- | --- | --- |
| Text at the left | | Shown from 990px wide, such as your opening hours ("Collingwood studio store open 6 am to 8 pm") |
| First link label, First link | "Find your size" | A small link at the right, from 990px wide |
| Second link label, Second link | "Help" | A second link beside it |

The bar holds up to four blocks:

* **Announcement**: **Text** ("Free shipping over $100") and **Link**. From 750px wide, all your announcements share one line, joined by a small " · ". When they don't fit, and always on phones, they take turns every 6 seconds with a soft fade and a small pause button; hovering or focusing holds the current one, and on a phone shoppers can swipe between them. Announcements never rotate for visitors who prefer reduced motion. **Keep each message short** (about 30 characters), so it fits a phone on one line, and put your most important message first.
* **Countdown** (one per bar): a live countdown, "Drop in 2d 14h 05m". **Label** ("Drop 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 **After the deadline**: **Hide the countdown** (default) or **Show a message** (**Message after the deadline**, "This sale has ended", which shows when you choose it). Good for a colourway drop. The theme editor tells you when a date can't be read or the deadline has passed.

Under 990px only the centre messages show.

> **Note:** 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 | What it does |
| --- | --- | --- |
| Menu | Main menu | The header's menu |
| 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. **Dropdown** uses dropdowns throughout. |
| Open menus on hover | On | For shoppers using a mouse. Menus always open on click, tap and keyboard. |
| Show search | On | A pill-shaped search field look-alike that opens the search panel, with suggestions as shoppers type |
| Search placeholder | "Search leggings, bras, sets" | Shows while **Show search** is on. Flow uses "Search the studio" and Pace "Search the store". |
| Sticky header | Always | **None**, **Always** (keeps the header at the top of the screen) or **On scroll up** (hides it while shoppers scroll down and shows it again when they scroll up) |

From 1100px wide the header is one white row: the text logo (or your logo), your menu, then at the right the search pill ("Search leggings, bras, sets"; a search button under 1200px), account, and the bag with its count in a small colour-block pill. The page you're on gets a double-lane underline in the menu, and a top-level link titled **Sale**, or one whose address contains `/sale`, is set in the sale colour. If the menu doesn't fit, links fold from the end into a **More** item; the text logo never wraps to make room. Once the page scrolls, a sticky header takes the panel colour and gets a little shorter.

From 750 to 1099px the menu folds into the menu button; search, account and the bag stay. Under 750px the header is the menu button, the text logo, a search button and the bag. A long shop name wraps to two lines at **Text logo size on phones** rather than clip: "Southerly Run Co." takes two lines at 320px in Krona One, one line in Pace's Prompt at 15px.

The menu drawer opens from the left. At the top are the **activity pills**, one per name in **Theme settings › Activity › Activity list**, each with its pictogram and linking to all products filtered by that activity. Then your menu in the heading font: a link with children opens its own panel with **Back**, at any depth, and long labels wrap rather than cut off. At the bottom sit the account link (on phones) and the country and language selectors.

**Menu promo** blocks (up to six) add a promo tile to the end of a mega menu panel, and a row in the menu drawer's panel for that link: an **Image** on a colour block with the bend and lanes (a product cut-out on a transparent background looks best), a **Heading** ("New: Sculpt set"), a **Link** and its **Link label** ("Shop sets"). Set **Menu item** to the exact title of the top-level link it belongs to, such as Train. Each link shows up to two promos, in block order, the first on the colour block and the second on the second colour block, and promos only appear on links that open a mega panel. A promo with no heading doesn't show. In the theme editor, a promo that can't find its link or is over the limit shows a note.

The account panel's menu is set in **Theme settings › Customer accounts**.

## Building your menus

Make menus in admin under **Content › Menus**. A mega panel needs three levels: a top-level link (Train), child links that head each column (Leggings, Sports bras, Tops), and links under those (Full length, 7/8 length, Shorts). With only two levels a link keeps a dropdown. The top-level link's own address becomes an "All Train" link at the top right of its panel. The presets' footers use your **Main menu** for the Shop column, your **Footer menu** for the Help column, and a menu with the handle `about` for the About column.

Good links for an activewear shop are your activity collections, a sets collection, new drops, a sale collection, and your contact page. Shopify's filter links work too: with the Activity filter set up, `/collections/all?filter.p.m.custom.activities=Yoga` opens everything for yoga, and with the Size filter, `/collections/all?filter.v.option.size=M` opens everything in size M (chapter 13).

## Footer

The footer sits on the dark band.

| Setting | Default | What it does |
| --- | --- | --- |
| Show the shop name and address | On | Your shop name, large, and **About and address** ("Training wear made in small runs and tested at 6 am. Studio store at 41 Wellington Street, Collingwood VIC 3066."), which shows while this is on |
| Text after the copyright | | Shown after the copyright line, such as "Prices in AUD." (what the presets put there) or an ABN |
| Show country and language selectors | On | Set up markets and languages in Shopify admin (chapter 14) |
| Show policy links | On | Links to the policies in **Settings › Policies** |
| Show payment icons | On | The icons for your payment methods |
| Show "Powered by Shopify" | Off | |

Add these blocks to fill the columns:

* **Menu column**: **Heading** ("Shop") and **Menu** (Footer menu by default). A column whose menu has no links doesn't show.
* **Text column**: **Heading** ("Visit the studio") and **Text**. Good for a second address or class times.
* **Newsletter**: **Heading** ("Early drops"), **Text** ("New colours land on Thursdays. Members hear first."), and **Show Follow on Shop** (on), which lets customers follow your store in the Shop app. The email field is a pill with a **Join** button inside it.
* **Social media**: **Heading** ("Follow along"). Add the links in **Theme settings › Social media**.

The general blocks in chapter 5 work in the footer too. Under 990px the shop name and address sit above the columns; on phones the columns sit two across and the newsletter goes full width.