# Hero

> The section that opens the Tally home page – a large headline and a short text beside a framed image or video, with buttons and quick links to your most popular collections.

Tally theme documentation · HTML version: https://themelab.page/tally/docs/sections/hero/

## At a glance

- **In the editor:** Hero
- **Where it goes:** Any page template, with Add section
- **In the presets:** Tally: Home page
- **Settings:** 33
- **Blocks:** Quick link
- **App blocks:** Yes

## When to use it

The hero is the first thing shoppers read. It suits stores that sell a broad range: rather than one big campaign photo, it pairs a clear promise (*Everything for a calm home*) with quick links to the places most visitors want to go next. For a full-bleed campaign image, use the [Image banner](https://themelab.page/tally/docs/sections/image-banner.md) or the [Slideshow](https://themelab.page/tally/docs/sections/slideshow.md) instead.

## Set it up

1. Write the **Heading** – one sentence about what you sell and why it is good. Short words, no full stop needed.
2. Add a **Text** of one or two lines underneath.
3. Set the **First button** to your main collection and, if you like, the **Second button** to something softer (*Our story*, *New in*).
4. Upload an **Image**. A landscape photo of products in use works best; add a **Mobile image** for a different crop on phones.
5. Add **Quick link** blocks for your three to six most popular collections or searches, and set **Label before the links** (for example *Popular now*).

## Layout

- **Text and image side by side:** the Tally look – text on the left in a column of the width you choose (*Narrow*, *Medium*, *Wide*), image on the right.
- **Text above a wide image:** the headline on top, a wide image below. Calmer, more editorial.
- **Text only:** a typographic opening with no image.

**Vertical alignment** places the text at the top, middle or bottom of the image. **Show image first on mobile** puts the picture above the text on phones.

## Image

- **Image ratio:** *Fill the hero height* makes the image exactly as tall as the text column beside it, never taller than **Minimum image height** allows. Or pick a fixed shape – wide 16:10, landscape 4:3, square, portrait – or *Adapt to image*. On phones and in the *Text above a wide image* layout, *Fill* becomes 4:3 or 16:10.
- **Video:** an uploaded video plays muted on a loop instead of the image. Keep it short and calm; the image stays as the poster.
- **Caption** and **Caption link:** a small white pill in a corner of the image – *Shop the kitchen →* – pointing to what is in the photo. **Caption position** picks the corner.

## Motion

**Animate text and image on load** lets the headline and image settle in gently when the page opens. It is off for shoppers who reduce motion. The hero's own **Animate on scroll** is off by default, because it is already in view when the page loads.

## Quick links

Each **Quick link** block is a small chip with a label and a link. Point them at collections, at a search (`/search?q=linen`) or at a page. Four to six chips fit on one line on desktop; on phones they wrap neatly.

> **Tip:** Write for scanning
>
> Shoppers read the headline, glance at the image and then at the chips. A headline under eight words and chips with one or two words each make the whole hero readable in two seconds.

## All settings

Every setting in the order of the theme editor, with its options and its default value.

**Section: Hero** (33 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Layout** | Text and image side by side · Text above a wide image · Text only | Text and image side by side |
| **Text column** | Narrow · Medium · Wide | Medium |
| **Vertical alignment** | Top · Middle · Bottom | Top |
| **Show image first on mobile** | Checkbox | Off |
| **Animate text and image on load** | Checkbox | On |

*Text*

| Setting | Options | Default |
| --- | --- | --- |
| **Heading** | Rich text (one line) | Sample text |
| **Heading size** | Extra large · Large · Medium | Extra large |
| **Text** | Rich text | Sample text |
| **Text alignment** | Left · Center | Left |

*Buttons*

| Setting | Options | Default |
| --- | --- | --- |
| **First button label** | Text | – |
| **First button link** | Link | – |
| **First button style** | Solid · Outline | Solid |
| **Second button label** | Text | – |
| **Second button link** | Link | – |
| **Second button style** | Solid · Outline | Outline |

*Quick links*

Add Quick link blocks to show small links under the text.

| Setting | Options | Default |
| --- | --- | --- |
| **Label before the links** | Text | Sample text |

*Image*

| Setting | Options | Default |
| --- | --- | --- |
| **Image** | Image | – |
| **Mobile image** – Optional. | Image | – |
| **Video** – Optional. Plays muted on a loop instead of the image. | Video file | – |
| **Image ratio** – Fill the hero height: next to the text the image is as tall as the text column. On mobile and above the text it is 4:3 and 16:10. | Fill the hero height · Wide (16:10) · Landscape (4:3) · Square · Portrait · Adapt to image | Fill the hero height |
| **Minimum image height** | 320–800px (step 20) | 520px |
| **Caption** – Small label in the corner of the image. | Text | Sample text |
| **Caption link** | Link | – |
| **Caption position** | Bottom left · Bottom right · Top left | Bottom left |

*Colors*

| Setting | Options | Default |
| --- | --- | --- |
| **Color scheme** | Color scheme | Scheme 1 |

*Section spacing*

| Setting | Options | Default |
| --- | --- | --- |
| **Top padding** | 0–160px (step 4) | 56px |
| **Bottom padding** | 0–160px (step 4) | 40px |
| **Top padding on mobile** | 0–120px (step 4) | 28px |
| **Bottom padding on mobile** | 0–120px (step 4) | 24px |

*Advanced*

| Setting | Options | Default |
| --- | --- | --- |
| **Hide on mobile** | Checkbox | Off |
| **Hide on desktop** – Mobile means below the width where the header switches to the mobile menu (Header > Switch to the mobile menu below). | Checkbox | Off |
| **Animate on scroll** | Checkbox | Off |
| **Anchor ID** – Link to this section with #anchor-id. | Text | – |

## Block settings

**Block: Quick link** (2 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Label** | Text | Sample text |
| **Link** | Link | – |

## Related

- [Image banner](https://themelab.page/tally/docs/sections/image-banner.md): A large photo or video with a heading, text and up to two buttons on top – full width or within the page.
- [Slideshow](https://themelab.page/tally/docs/sections/slideshow.md): Several full-width banners that change on their own or with arrows, swipes and keys, with a slide or fade transition.
- [Collection list](https://themelab.page/tally/docs/sections/collection-list.md): Your collections as small tiles, large cards or titles on images, in a grid or carousel – the department tiles of the Tally home page.