# Header, menus and footer

Chapter 3 of the Tress 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 bold-band strip across the top of every page. **Color scheme**: **Bold band** (default), **Page** or **Surface**. It holds up to four blocks:

* **Announcement**: **Text** ("Free silk bonnet with every install"), **Link** (links the first message) and **Second message** ("Pay in 4 available"), shown after the first past a small dot. On phones the two wrap to two lines. With two or more announcements, they take turns every 6 seconds, with previous, pause and next buttons; they pause 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**, "This sale has ended"). Screen readers hear the deadline written out, not the ticking numbers.

> **Note:** Use a real deadline that is the same for every shopper, such as the last day of a restock sale. Shopify doesn't allow fake countdowns, so don't extend or restart a deadline to create urgency.

Only promise what's true: "Pay in 4 available" belongs on a store with Shop Pay Installments (or another pay-later method) switched on.

## 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**, a short list under the link. |
| Open menus on hover | On | For shoppers using a mouse. Menus always open on click, tap and keyboard. |
| Utility link label | "Length guide" | The text of the utility link, shown with a ruler icon before the search button. Leave the label blank to hide it. |
| Utility link | Empty | Where the utility link goes. Left empty, it goes to the **Length chart page** in Theme settings › Hair, lashes and nails; with neither, it doesn't show. Lacquer uses it for "Find your size". |
| Show search | On | A search field with suggestions and matching products as shoppers type. **Search placeholder**: "Search bundles, wigs and lashes". |
| Sticky header | On scroll up | **None**, **Always** (stays at the top of the screen) or **On scroll up** (hides while shoppers scroll down and comes back when they scroll up) |

On desktops (990px and wider) the header is one row: the wordmark (or logo), your menu with a hot-pink rule under the current page, then the utility link, search, account and the bag with its count bubble. When the row gets tight, the utility link shrinks to its ruler icon first, and only then does the menu move into the menu drawer. On tablets the row is the menu button, the wordmark, the ruler, search, account and the bag; on phones it is the menu button, the wordmark (which wraps to two lines for a long shop name rather than being cut off), search and the bag, with account and the utility link in the menu drawer. The account panel's menu is set in **Theme settings › Customer accounts**.

**Menu promo** blocks add a small capsule promo to the end of a mega menu panel: an **Image**, a **Heading** ("Build your install"), a **Link** and its **Link label** ("Start building"). Set **Menu item** to the title of the top-level link it belongs to, such as Bundles. Each link shows up to two promos, in block order, and a promo without a heading isn't shown. Promos only appear on links that open a mega panel; in the theme editor, a promo that no panel shows says so. The Tress preset has two under Bundles: "Build your install" (to `/#install`) and "Length guide".

## 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 (Wigs › Lace front wigs, Bob wigs, Glueless, each with links of its own) opens a mega panel: one column per child, each headed by the child's title with its own links under it, then an "All Wigs" link and that link's menu promos.
* A top-level link with **one level** of children (Lashes › Wispy, Natural, Cat eye) opens a dropdown.
* A top-level link without children is a plain link.

**The texture row.** In a mega panel, when two or more of the panel's links point to collections whose titles name a texture (Straight, Body wave, Deep wave, Kinky curly and the like, chapter 8), Tress adds a row of up to four mini texture chips above the "All" link: a visual shortcut to the same collections. The chip shows the texture's picture from **Texture images**, or the drawn texture.

A good main menu for a hair brand: Bundles ▸, Closures and frontals ▸, Wigs ▸, Lashes, Nails, Reviews. Keep it short enough to sit on one row beside the search; anything longer moves into the menu drawer.

**The phone menu** (the menu drawer) shows your main menu as rows (a row with children opens in place, with the link's promos at the end), then the utility link and Account, and the country and language selectors when you sell in more than one.

## Footer

The footer is a band in the **Surface** color with a strand wave along its top. Its settings:

| Setting | Default | What it does |
| --- | --- | --- |
| Color scheme | Surface | Page, Surface or Bold band |
| Wave edges | Top | None or Top: a long wave with three strand lines along the band's edge |
| Show brand column | On | Your shop name in the heading font with the **Brand blurb** under it ("Raw hair bundles, lace and wigs, sourced by us and shipped from our studio. Every install comes with a silk bonnet.") |
| Show social icons under the blurb | On | The round icons from Theme settings › Social media, under the blurb |
| 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 | |

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 the studio") and **Text**, for your address, opening hours or how to book an install. The presets call it "Studio".
* **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.
* The theme blocks of chapter 5 (Heading, Text, Button and the rest).

The Section, Rich text, Newsletter, Icon row, As seen in and Custom Liquid sections can also go in the footer group.