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