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