Header, menus and footer
Chapter 3 of the Roast user guide.
The header group holds the Announcement bar and the Header; the footer group holds the Footer. They appear on every page.
Announcement bar
Add up to four blocks. On phones the bar keeps to two lines.
- Announcement: Text and an optional Link (links are hidden on phones).
- Countdown (one per bar): Count down to either A date and time (an End date like
2026-11-27, an End time like23:59, a Time zone, and what happens After the deadline: hide it, or show Message after the deadline) or The next roast cut-off, which comes from the roast schedule and rolls on to the next cut-off when it passes (chapter 8). Plus a Label, such as "Next roast closes in", and an optional Link. Use a real deadline that is the same for every shopper.
Header
| Setting | Default | What it does |
|---|---|---|
| Menu | Main menu | The navigation |
| Menu style | Mega menu | Mega menu opens a full-width panel for every top-level link with child links, a column per child when they have links of their own. Dropdown keeps a small panel. |
| Open menus on hover | On | For mouse users. Menus always open on click, tap and keyboard. |
| Show search | On | Opens predictive search (chapter 12) |
| Sticky header | On scroll up | None, Always, or On scroll up (hides while scrolling down, returns on scroll up) |
The account icon appears when customer accounts are on (Settings › Customer accounts) and opens Shopify's account panel, with the menu from Theme settings › Customer accounts. The bag icon uses the Cart name from Theme settings › Layout.
Header blocks:
- Nav tag (up to four): a small colored tag on a top-level link, such as "Save 10%" on Subscriptions. Menu item is the link's title as it appears in the menu; Label and Color (Label 1 to 4).
- Menu promo (up to six, two per link): an image card inside a mega menu. Menu item (the top-level link whose panel shows it), Image, Label, Heading, Text and Link.
Menus
Build menus in Shopify admin under Content › Menus. For a mega menu, give a top-level link child links ("By style", "By brew", "By origin"), and give those children links of their own ("Fruity and floral", "Filter", "Ethiopia"): each child becomes a column. On phones the menu opens as a drawer with the same levels. On a computer the menu always stays on one row: links that don't fit at the current width move into a More menu at the end.
Footer
Footer settings: Show country and language selectors (on; set up markets and languages in admin), Show policy links (on) and Show payment icons (on).
Footer blocks:
| Block | Settings |
|---|---|
| Newsletter | Heading (Get the roast list), Text, Button label (Sign me up), Show Follow on Shop. Sign-ups join your Shopify customer list with email marketing consent. |
| Brand column | Show the store name (or your logo), Heading, Text, Show social links |
| Menu column | Heading, Menu |
| Visit | Heading (Visit the roastery), Address, Opening hours, Link label (Get directions), Link |
| Social media | Heading (Follow us). Links come from Theme settings › Social media. |
The general blocks from chapter 5 (Heading, Text, Button and so on) can go in the footer too.