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