# Header, menus and footer

Chapter 3 of the Decant user guide.

The announcement bar and 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 deep glass colour. It holds up to four blocks:

* **Announcement**: **Text** ("Try before the full bottle · Free samples with every order") and **Link**. With two or more announcements they take turns every 5 seconds, with a small pause button. Put your most important message first.
* **Countdown** (one per bar): a live countdown. **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 offer has closed").

> **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 button, with suggestions as shoppers type. **Search placeholder**: "Search scents, notes and sets". |
| 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: the wordmark (or logo), your menu, then search, account and the bag with its count, split by thin vertical rules. 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.

Under 990px the header is the menu button, the wordmark in the middle, then search and the bag. The menu and the account link move into the menu drawer.

**Menu promo** blocks (up to six) add a small promo to the end of a mega menu panel, and a thumbnail row in the menu drawer: an **Image** inside a hanging strip, a **Heading** ("Build a discovery set"), a **Link** and its **Link label** ("Three, five or eight samples"). Set **Menu item** to the exact title of the top-level link it belongs to, such as By family. 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 (By family), child links that head each column (Fresh, Floral), and links under those. With only two levels a link keeps a dropdown. The presets' footers use your **Main menu** for the Shop column and your **Footer menu** for the Help column.

Good links for a perfume shop are your family collections, your discovery set product, a page with the finder on it and a `page.how-it-works` page. Shopify's filter links work too: you can link to a collection with a filter already applied by copying its address.

## Footer

The footer sits on the deep glass colour.

| Setting | Default | What it does |
| --- | --- | --- |
| Show brand column | On | Your shop name and **About text** ("Small measures of good perfume, drawn by hand in Fitzroy, Melbourne.") |
| Text after the copyright | | Shown after the copyright line, such as an address 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**.
* **Text column**: **Heading** ("Visit") and **Text**.
* **Newsletter**: **Heading** ("Subscribe"), **Text**, 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**.