# Header, menus and footer

Chapter 3 of the Sprinkle 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 dark strip across the top of every page, on the board colour. It has three zones: a line of text on the left, your announcements in the middle, and one link on the right. Its settings:

| Setting | Default | What it does |
| --- | --- | --- |
| Text on the left | "Baked in Daylesford, Victoria" | Shown at the start of the bar on computers. Hidden under 990px. |
| Link label | "Cake enquiries" | Under **Link at the end of the bar**, the link's words |
| Link | Empty (`/pages/contact` in the presets) | Shown at the end of the bar on computers, and in the menu on phones. A link without a label or an address isn't shown. |

It holds up to four blocks:

* **Announcement**: **Text** ("Order 2 days ahead · Pickup Wed–Sun") and **Link**. With two or more announcements they take turns every 5 seconds, with a small pause button; they stop while a shopper hovers or focuses them, and never rotate for visitors who prefer reduced motion. Put your most important message first.
* **Countdown** (one per bar): a live countdown in days, hours and minutes. **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**, "Orders for this date have closed"). It suits a real closing date, such as the last day for Christmas orders. Shoppers can pause the ticking. In the theme editor, a countdown with a date in the wrong format or a deadline that has passed says so; shoppers don't see it.

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

The sample announcement says "Order 2 days ahead · Pickup Wed–Sun". Those words are text, not a live value: when you change your lead time or your closed days, change them too.

## 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 (below). Other top-level links keep a **Dropdown**. |
| Open menus on hover | On | For shoppers using a mouse. Menus always open on click, tap and keyboard. |
| Show search | On | A search field with suggestions as shoppers type. **Search placeholder**: "Search cookies, cakes and boxes". |
| 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). A stuck header gets a little shorter, with a smaller wordmark. |

On computers the header is one warm white row that hangs a **piped hem** over the page below it: the wordmark (or logo) on the left, your menu in the centre, then the **Next pickup** pill, search, account and the bag with its count. A long shop name takes two lines before anything else gives way. When the row gets tight the pill hides, and it always hides under 1241px. If the menu still doesn't fit, it moves into the menu drawer.

Under 990px the header is the menu button, the wordmark in the middle (two lines if the name needs them) and the bag. Search, the account link and the next pickup date move into the menu drawer.

The **Next pickup** pill reads "Next pickup Fri 6 Nov", worked out live from your order ahead settings. Clicking it opens the bag, or goes to **Theme settings › Order ahead › Next pickup link** if you set one. It reads "Next delivery" when you only offer delivery. It hides with **Show next pickup in the header** off, with order ahead off, and when nothing is open up to the furthest date (chapter 8).

**Menu promo** blocks (up to six) add a small promo to the end of a mega menu panel: a 160px cookie round with an **Image**, a **Heading** ("Build a box"), a **Link** and its **Link label** ("Choose your flavours"). Set **Menu item** to the title of the top-level link it belongs to, such as Cookies. Each link shows up to two promos, in block order. Promos only appear on links that open a mega panel. In the theme editor, a promo that no mega panel can show gets a note saying so. In the phone menu, promos become small rows at the end of that link's group.

The account panel's menu is set in **Theme settings › Customer accounts**.

## Menus

Build menus in admin under **Content › Menus**. In the main menu, with **Menu style** set to Mega menu:

* A top-level link with **two levels** of children (Cookies › Classics › Choc chip, Red velvet; Cookies › Boxes › Box of 6, Box of 12) opens a mega panel: one column per child, each headed by the child's title with its own links under it, then an "All Cookies" link and that link's menu promos.
* A top-level link with **one level** of children (Cakes › Birthdays, Weddings, Christenings) opens a dropdown.
* A top-level link without children is a plain link.

A good main menu for a bakery: Cookies ▸, Cakes ▸, Boxes, How ordering works, Contact. Keep it short enough to sit on one row beside the pickup pill and search.

**The phone menu** (the menu drawer) shows the search field, your main menu as rows (a row with children opens in place), then the next pickup date, the announcement bar's link, Account, and the country and language selectors when you sell in more than one.

## Footer

The footer sits on the board, the darkest band, opened by a piped edge. Its settings:

| Setting | Default | What it does |
| --- | --- | --- |
| Show brand column | On | Your shop name in the heading font, with the **About text** under it ("Cookies, cakes and small-batch treats, made to order.") and the **kitchen statement** straight after it |
| Show social icons | On | With the brand column on: the round icons from Theme settings › Social media |
| Text after the copyright | Empty | A short line after the copyright, 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 you've written in **Settings › Policies** |
| Show payment icons | On | The payment methods your store accepts |
| Show "Powered by Shopify" | Off | |

The kitchen statement comes from **Theme settings › Allergens and dietary** (chapter 11), not from the footer. It lives in the brand column, so turning off **Show brand column** takes it out of the footer as well. The statement still shows on every product page.

It holds these blocks, in any order:

* **Menu column**: **Heading** ("Shop") and **Menu** (the footer menu by default). The presets have Shop (the main menu) and Help (the footer menu) columns.
* **Text column**: **Heading** ("Visit") and **Text**, for your address, opening hours or how to find you. The presets' "Visit" columns hold a sample address and hours: replace them with yours.
* **Newsletter**: **Heading** ("Subscribe"), **Text** ("Tell subscribers what they'll receive.") and **Show Follow on Shop** (on: lets customers follow your store in the Shop app). Sign-ups are tagged `newsletter`.
* **Social media**: **Heading** ("Follow us") and the icons from Theme settings › Social media. Add links there.
* The theme blocks of chapter 5 (Heading, Text, Button and the rest).

On phones the footer is two columns, with the first and last spanning both. The Section, Rich text, Newsletter, Icon row, As seen in and Custom Liquid sections can also go in the footer group.