# 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** like `23: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.