# Header, menus and footer

Chapter 3 of the Dose 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 where you pack orders ("Packed by hand in West End, Brisbane") |
| First link label, First link | "Track an order" | 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** ("Subscribe and save 15%") and **Link**. From 750px wide, your announcements share one line, joined by a small dot (a " · " in the text becomes the same dot). When they don't fit, and always on phones, they take turns every 6 seconds, with a pause button; hovering or focusing holds one, and phone shoppers can swipe. They never rotate for visitors who prefer reduced motion. Keep each one short.
* **Countdown** (one per bar): a live countdown, "Winter gummies back in 2d 14h". **Label** ("Winter gummies back 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 messages show.

> **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 vitamins, gummies…" | Shows while **Show search** is on |
| 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 row: the wordmark (your shop name with its dose dot) or your logo, your menu (the current page's link gets a small dot under it), then the search field (a search button under 1200px), account, and the bag with its count. A long shop name takes two lines, and if the menu still doesn't fit, links fold from the end into a **More** item. Once the page scrolls, the sticky header gets a little shorter.

From 750 to 1099px the menu folds into the menu button. Under 750px the header is the menu button, the wordmark, search and the bag; the account link moves into the menu drawer. The menu drawer opens from the left with **Shop by goal** at the top (chapter 9), your menu (a link with children opens its own panel with **Back**, at every level), then the account link 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 to the menu drawer: an **Image** in a rounded square on a goal colour, a **Heading** ("New: Wind-down gummies"), a **Link** and its **Link label** ("Shop gummies"), and **Tile colour** (**Goal colour 1** by default, up to **Goal colour 6**: one of the palette's six goal colours, in the order of **Goal names**). Set **Menu item** to the exact title of the top-level link it belongs to, such as Goals. 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 (Shop), child links that head each column (Gummies, Capsules, Powders), and links under those (Sleep gummies, Daily multi gummies). With only two levels a link keeps a dropdown. The top-level link's own address becomes an "All Shop" link at the top right of its panel.

**The goals link is the exception.** The top-level link whose title matches **Menu item with goal tiles** (Theme settings › Goals, "Goals" by default; capitals don't matter) opens a mega panel even with only one level of children. Its child links become a column of **goal tiles**: each a small square in its goal colour with the goal's icon, and the name beside it. The colour and icon come from the child link's title, matched against **Goal names**: a link titled "Sleep" takes goal colour 1 and the moon. A child whose title isn't in **Goal names** takes the colour of its place in the list. Children with links of their own follow as ordinary columns. The same children, up to six, are the **Shop by goal** tiles at the top of the menu drawer.

Without a goals link (or with **Menu item with goal tiles** left blank), the mega menu shows plain links, and the menu drawer's **Shop by goal** tiles are made from **Goal names** instead, each linking to all products filtered by that goal (which needs the Goal filter, chapter 14). With **Goal names** empty too, the drawer has no goal tiles.

Point each goal link at the place that shows that goal best: a collection per goal ("Sleep and calm"), or the Goal filter, `/collections/all?filter.p.m.custom.goals=Sleep` (chapter 14). Point the goals link itself at `/#goal-finder` to send shoppers to the home page's goal finder.

The presets' footers use your **Main menu** for the Shop column and your **Footer menu** for the Help column; the Dose and Fuel presets' middle column uses a menu with the handle `goals` (make it with the same goal links), and Botanic's a menu with the handle `about`.

## Footer

The footer sits on the dark band.

| Setting | Default | What it does |
| --- | --- | --- |
| Show the shop name and address | On | Your shop name, large, with its dose dot, and **About and address** ("Daily vitamins and gummies, tested by an independent lab and packed by hand in West End, Brisbane."), which shows while this is on |
| Text after the copyright | | Shown after the copyright line, such as "Prices in AUD." |
| Show country and language selectors | On | Set up markets and languages in Shopify admin (chapter 15) |
| 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 | |

The bottom bar also carries the **Label line** from **Theme settings › Footer** ("Always read the label and follow the directions for use.").

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 an address or your opening hours.
* **Newsletter**: **Heading** ("The newsletter"), **Text** ("Routine ideas and restock notes, once a month.") and **Show Follow on Shop** (on), which lets customers follow your store in the Shop app. The field has a "Sign me up" button.
* **Social media**: **Heading** ("Follow"). Add the links in **Theme settings › Social media**.

The general blocks in chapter 5 work in the footer too. Under 990px the shop name sits above the columns; on phones the columns sit two across and the newsletter goes full width.