# Header, menus and footer

Chapter 3 of the Altar 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 night-band strip across the top of every page. Its settings:

| Setting | Default | What it does |
| --- | --- | --- |
| Show tonight's moon | On | Tonight's phase at the start of the bar: a small moon drawn at tonight's shape and "Last quarter, 41% lit", linked to **Theme settings › Crystals and rituals › Moon link** (blank: the moon section on your home page). On phones it sits above the message. Chapter 10. |
| First link label | "Track an order" | A small utility link at the end of the bar, with **First link** |
| Second link label | "Visit the shop" | A second one, with **Second link**. Both show at the end of the bar on computers and move into the menu on phones; a link without a label or address isn't shown. |
| Color scheme | Night band | Page, Surface or Night band |

It holds up to four blocks:

* **Announcement**: **Text** ("Ethically sourced crystals"), **Link** (links the first message) and **Second message** ("Free shipping over $80"), shown after the first past a small gold star. 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 ("Ends in 2 d 14 h"). **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, and 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, such as the last day of a full moon sale. Shopify doesn't allow fake countdowns, so don't extend or restart a deadline to create urgency.

Only promise what's true: "Free shipping over $80" belongs on a store that offers it, with **Theme settings › Commerce › Free dispatch over** set to match.

## 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. |
| Show tonight's moon | On | The **moon pill** beside the search button, on computers and tablets: a small moon at tonight's shape and the phase name ("Last quarter"), linked like the announcement bar's moon. Screen readers hear "Tonight's moon: Last quarter". |
| Show double rule under the header | On | A fine double gold rule under the header row, in place of a border |
| Show search | On | A search field with suggestions and matching products as shoppers type. **Search placeholder**: "Search crystals, decks and herbs". |
| 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). A stuck header gets a little shorter, with a smaller wordmark and a soft shadow. |

On desktops (990px and wider) the header is one row: the wordmark (or logo) on the left, your menu in the middle with a thin accent rule under the current page, then the moon pill, search, account and the bag with its count. When the row gets tight, the moon pill drops its name first, then a wordmark of two or more words takes two lines ("Rue & Rosemary / Apothecary"), and only then does the menu move into the menu drawer. On tablets the row is the menu button, the wordmark, the moon (without its name), search, account and the bag; on phones it is the menu button, the wordmark in the middle (which shrinks a little on narrow phones, and takes two lines when the shop name is too long for one) and the bag, with search at the top of the menu drawer and account and the utility links inside it. The account panel's menu is set in **Theme settings › Customer accounts**.

**Menu promo** blocks (up to six) add a small tarot-card promo to the end of a mega menu panel: an **Image**, a **Heading** ("Pick your piece"), a **Link** and its **Link label** ("See every piece"). Set **Menu item** to the title of the top-level link it belongs to, such as Crystals. Each link shows up to two promos, in block order. Promos only appear on links that open a mega panel. The presets' promos sit under a link called Crystals, Herbs or Tarot decks (chapter 1): if your menu has no link with that title, change **Menu item** to one of yours.

## 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 (Crystals › By intention › Calm, Protection, Love; Crystals › By shape › Points, Clusters, Tumbles) opens a mega panel: one column per child, each headed by the child's title in the heading font with its own links under it, then an "All Crystals" link and that link's menu promos.
* A top-level link with **one level** of children (Tarot › Decks, Oracle cards, Reading cloths) opens a dropdown.
* A top-level link without children is a plain link.

Mega panels open after a short pause when a mouse rests on the link, and on click or Enter; Tab walks through them, and Escape closes them and returns focus to the link.

A good main menu for a crystal shop: Crystals ▸, Tarot and oracle ▸, Ritual ▸, Shop by sign, Moon, Journal. Keep it short enough to sit on one row beside the moon pill and search; anything longer moves into the menu drawer.

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

## Footer

The footer sits on the night band, opened by a star rule. Its settings:

| Setting | Default | What it does |
| --- | --- | --- |
| Color scheme | Night band | Page, Surface or Night band |
| Show brand column | On | Your shop name in the heading font after the crescent and star (always the name, even with a custom logo in the header), with the **Brand blurb** under it ("Crystals, tarot and ritual pieces, chosen by hand and shipped from our shop.") |
| 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 | |

The footer's last row starts with the **disclaimer**: a small star and "Crystals and rituals are spiritual practices, not a substitute for medical advice." Its text and its on/off switch are in **Theme settings › Crystals and rituals** (on by default, chapter 8), not in the footer itself.

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 book a reading. 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.
* 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.