# Header and footer

> The announcement bar, header layouts, menus with dropdowns and full-width panels, the search bar, language and country selectors, and the footer.

Tally theme documentation · HTML version: https://themelab.page/tally/docs/header-and-footer/

The header and footer are **section groups**: they are shared by every page and edited from any page in the theme editor. The **Header** group holds the announcement bar and the header; the **Footer** group holds the footer.

## Announcement bar

A narrow bar above the header with short messages: delivery, returns, a sale. Add it with **Add section** in the Header group if your preset does not have one.

- Add a **Message** block for each message. **Style** shows them one at a time (*Messages take turns*) or as a *Scrolling ticker*.
- **Count down to:** a message can count down to a date and time in your store's time zone, written as `2026-12-24 18:00`. The time left shows after the text, and the message hides itself when the time is up. Only with *Messages take turns*.
- **Text on the right:** a short text shown on desktop next to the messages, for example a phone number.
- **Show a close button:** lets shoppers close the bar. It stays closed for them until you change the messages.

See [Announcement bar](https://themelab.page/tally/docs/sections/announcement-bar.md) – every setting and block explained.

## Header

### Layouts

**Header › Layout** arranges the header in one of three ways:

| Layout | Used by | Description |
| --- | --- | --- |
| Logo left, search bar in the middle | Tally | The catalog layout: logo, menu, a wide search bar and the account and cart links. |
| Logo centered, menu below | Poster | The logo in the middle with the menu on its own row below. |
| Menu left, logo centered | Petal | A split header. Search opens from an icon. |

On phones, the centered and split layouts put the logo in the middle of the row.

### Logo and store name

The header uses the logo from **Theme settings › Logo and favicon** unless you upload a different one here. **Show store name next to the logo** adds the store name beside a logo image, in the text logo size.

### Transparent header

**Transparent header** lays the header over a full-width Image banner, Slideshow or Video that opens the page – on the home page only or on every page, with light or dark text. The header turns solid when hovered, when a menu opens and when the page scrolls. **Logo on the transparent header** takes a second logo, for example a white one.

### Sticky header

**Sticky header** keeps the header at the top of the screen *Always*, only *On scroll up* (it hides while scrolling down), or not at all.

### Main menu

Build the menu in **Online Store › Navigation › Main menu**, then pick it in **Header › Menu**.

- Links with **one level** of sub-links open as a compact dropdown.
- Links with **two levels** (for example *Shop › Kitchen › Storage jars*) open the **full-width shop panel**: one column per second-level link, with its sub-links underneath. Turn on **Open every dropdown as the full-width panel** to use the panel for every dropdown.
- **Images in full-width panels** shows the image of each column's collection, product or blog post above it, as landscape, square or portrait.
- **Show product counts next to collection links** adds a small product count after each collection link.
- **Show a shop all link in the panel** adds a "Shop all: *link title*" link at the bottom of the panel, leading to the page of the top-level link.

### Mobile menu

**Switch to the mobile menu below** sets the screen width under which the header shows the menu button and a drawer instead of the menu links: 640, 768, 990, 1024, 1280 or 1536 px, or *Custom* for any width. Use a larger value when your menu has many links. This width is also what *Hide on mobile* and *Hide on desktop* mean in every section.

The mobile menu shows the menu, the account link, the dark mode switch and the language and country selectors. Its colors come from **Menu and search color scheme**.

### Search bar

- **Search on desktop:** a *Search bar* in the header or an *Icon* that opens the search.
- **Search bar width** and **Search results width:** the results panel can be wider than the bar and always stays on screen.
- **Show the / key hint:** shows a small `/` key in the bar. Pressing `/` anywhere in the store opens the search.
- **Mobile header:** where the logo sits on phones (as on desktop, left or centered) and whether search is a bar on its own row below the header or an icon. The bar works with every layout, including *Menu left, logo centered*.
- **Backdrop while searching:** dims and/or blurs the page behind the open search.
- **Type popular searches in the placeholder:** types the popular searches from **Theme settings › Search** in the empty field, one after the other.

### Account and cart

**Style** shows the account and cart links as text ("Account", "Cart" with a count) or as icons. **Show account and log in link** hides the account link if you do not use customer accounts. On phones, the account, dark mode and cart icons stay in the header next to the logo, and a long text logo gets smaller until it fits beside them.

### Language, country and dark mode

- **Show light and dark mode switch:** the sun and moon switch. Dark mode must be on in **Theme settings › Colors**.
- **Show selectors next to the cart:** shows the language and country selectors in the header when the store has more than one language or country.
- **Language:** show the language as a name (English, Deutsch), a code (EN, CS), or hide it. **Show flags** adds a flag.
- **Show country and currency:** adds the market selector to the header. The mobile menu and the footer always offer both.

Add languages in **Settings › Languages** and countries in **Settings › Markets**. See [Languages and markets](https://themelab.page/tally/docs/languages.md).

See [Header](https://themelab.page/tally/docs/sections/header.md) – every setting and block explained.

## Header blocks

Besides the menu from Online Store > Navigation, you can add blocks to the Header section to build menu items in the editor.

### Link

A single link next to the menu – plain, *Highlighted* or as a *Button*, with an optional icon and a badge such as *New* or *−30%*. The Tally preset uses a Link block for **Blog**.

See [Link](https://themelab.page/tally/docs/blocks/link.md) – every setting and block explained.

### Dropdown

A dropdown you build in the editor from **Menu item**, **Promo card** and **Banner** blocks. Use it for a curated menu such as "Edits" or "Gifts", with images and promo cards.

- **Attach to menu link:** enter the exact title of a top-level link from your main menu, and the dropdown replaces that link. Leave it empty to add a new item at the end of the menu.
- **Keep the link's own sub-links:** keeps the sub-links from Online Store > Navigation and adds your blocks next to them.
- **Links from a menu:** fills the dropdown from another menu. Links with sub-links become columns; other links show as menu items with their collection image and product count.
- **Width:** *Compact* opens under the link; *Full width* opens across the page with a grid of columns. Promo cards sit next to the menu items.

See [Dropdown](https://themelab.page/tally/docs/blocks/dropdown.md) – every setting and block explained.

Inside a dropdown:

- **Menu item:** a link with a title, an optional subtitle, image and a small tag (*New*, *Sale*).
- **Promo card:** an image card. Pick a collection to link it and show its product count, or a product to show its photo and price.
- **Banner:** a notice across the top or bottom of the dropdown, for delivery, a sale or opening hours.

## Footer

The footer is built from blocks. Add, remove and reorder them in the Footer group.

- **Logo and text:** your logo (or the store name), a short text and the social links from **Theme settings › Social media**.
- **Menu:** a heading and a menu from Online Store > Navigation, for example *Help* or *Shop*.
- **Text:** a heading and text, such as opening hours or contact details.
- **Newsletter:** a signup form. Subscribers are added to your customer list in Shopify with the *newsletter* tag.
- **Image:** a picture, for example a certification badge.
- **Custom Liquid:** your own code. See [Customizing code](https://themelab.page/tally/docs/customizing-code.md).

The **bottom bar** shows the copyright (your store name or **Copyright name**), the policy links from **Settings › Policies**, payment icons, the *Follow on Shop* button (needs Shop Pay), and the country and language selectors.

See [Footer](https://themelab.page/tally/docs/sections/footer.md) – every setting and block explained.