# Header, menus and footer

Chapter 3 of the Scruff user guide.

The announcement bar, the header and the pet birthday banner 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 deep band.

| Setting | Default | What it does |
| --- | --- | --- |
| Text at the left | | Shown from 990px wide, such as your opening hours ("Brunswick shop open today, 9 to 5") |
| 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 $79 · Easy size exchanges") and **Link**. A " · " in the text stays on one line as a small middle dot. With more than one announcement 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. Put your most important message first.
* **Countdown** (one per bar): a live countdown, "Ends in 2d 14h 05m". **Label** ("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 **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). The theme editor tells you when a date can't be read or the deadline has passed.

Under 990px only the centre message shows.

> **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 search field look-alike that opens the search panel, with suggestions as shoppers type |
| Search placeholder | "Search the shop" | Shows while **Show search** is on |
| Show the pet chip | On | The "Add your pet" / "Shopping for Mabel" chip (chapter 8). Needs **Turn on the pet profile** in Theme settings › Pet profile. |
| 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 990px wide the header is one row on the page colour: the wordmark (or logo), your menu, then at the right the search field ("Search the shop"; a search button under 1200px), the **pet chip**, account, and the bag with its count. A long shop name takes two lines before anything else gives way. If the menu still doesn't fit, links fold from the end into a **More** item. Once the page scrolls, a sticky header takes the panel colour and gets a little shorter.

Under 990px the header is the menu button, the wordmark and the bag, with the **pet strip** under it: "Add your pet for sizes that fit · Add", or "Shopping for Mabel · 12 kg · Edit" once a pet is saved. The menu drawer opens from the left with a search field at the top, your menu (a link with children opens its own panel with **Back**), then the account link, the pet profile row 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 thumbnail row in the menu drawer: an **Image** in a squircle on a colour block, a **Heading** ("New: canvas beds"), a **Link** and its **Link label** ("Shop beds"), which shows as the tile's second line. Set **Menu item** to the exact title of the top-level link it belongs to, such as Walk. Each link shows up to two promos, in block order, 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 (Walk), child links that head each column (Collars, Harnesses, Leads), and links under those (Leather collars, Nylon collars, Breakaway collars). With only two levels a link keeps a dropdown. The top-level link's own address becomes an "All Walk" 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 a pet shop are your category collections, your size guide page, your name tag product or collection, your food collection, and your contact page. Shopify's filter links work too: with the Size filter set up, `/collections/all?filter.v.option.size=M` opens everything in size M, and with the Species filter, `/collections/all?filter.p.m.custom.species=Cat` opens everything for cats (chapter 13).

## Pet birthday banner

The **Pet birthday banner** section sits under the header. It shows only to a shopper whose saved pet has a birthday in the next seven days: "Mabel's birthday is Friday! Treat them to something from the birthday shelf. Birthday shelf". **Text** ("Treat them to something from the birthday shelf.") and **Link label** ("Birthday shelf") are its settings; the link itself is **Birthday banner link** in Theme settings › Pet profile. Chapter 8 has the details.

## Footer

The footer sits on the deep band.

| Setting | Default | What it does |
| --- | --- | --- |
| Show the shop name and address | On | Your shop name, large, and **Address and opening hours** ("27 Weston Street, Brunswick VIC 3056. Open every day, 9 to 5. Water bowl by the door."), which shows while this is on |
| Text after the copyright | | Shown after the copyright line, such as an ABN or a short note |
| 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") and **Text**. Good for a second address or your opening hours.
* **Newsletter**: **Heading** ("Subscribe"), **Text** ("Tell subscribers what they'll receive."), and **Show Follow on Shop** (on), which lets customers follow your store in the Shop app.
* **Social media**: **Heading** ("Follow"). Add the links in **Theme settings › Social media**.

The general blocks in chapter 5 work in the footer too. On phones the shop name and address go full width and the columns sit two across.