# Floating gallery

> A text column beside up to four cards that float in depth – photos, products, collections or videos. Cards fly in as the section appears, come forward on hover and open with their own text and button.

Tally theme documentation · HTML version: https://themelab.page/tally/docs/sections/floating-gallery/

## At a glance

- **In the editor:** Floating gallery
- **Where it goes:** Any page template, with Add section
- **In the presets:** Tally: Home page
- **Settings:** 19
- **Blocks:** Image, Product, Collection, Video, Text
- **App blocks:** Yes

## When to use it

The floating gallery is a showpiece: a handful of favourites presented like prints scattered on a table. Use it for staff picks, a capsule collection or the story behind a product. The Tally home page shows it as a gallery of favourites.

## Set it up

1. Write the **Label**, **Heading**, **Text** and button in the section settings – this is the text column.
2. Add up to four gallery blocks: **Image**, **Product**, **Collection** or **Video**. The first four make the gallery.
3. For each card, set a **Caption**, a **Link** and the **Text in the detail** – shown when the card comes forward. Products and collections use their own description when it is empty.
4. Add **Text** blocks to put more content in the text column, each with its own heading, text, button and color scheme.

## How it moves

With **Cards in depth** on, cards fly in as the section scrolls into view and come forward on hover. A click opens a card in front with its text and button; the arrows on the open card move between cards, and a click outside or `Esc` closes it. With the keyboard, moving the focus to a card opens it. Turn **Cards in depth** off for a flat, calm grid. Shoppers who reduce motion always see the calm version.

## Options

- **Text position:** the text column on the left or right.
- **Number the photos:** small numbers (01, 02…) on the cards, like a catalogue.
- **Product** cards use the product photo unless you upload an **Image**; **Collection** cards use the collection image. **Video** cards play muted on a loop and show their image when there is no video.

## All settings

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

**Section: Floating gallery** (19 settings, in editor order)

The first four photo, product, collection or video blocks make the gallery. Text blocks appear in the text column.

| Setting | Options | Default |
| --- | --- | --- |
| **Label** | Text | Sample text |
| **Heading** | Rich text (one line) | Sample text |
| **Heading size** | Large · Medium · Small | Large |
| **Text** | Rich text | Sample text |
| **Button label** | Text | Sample text |
| **Button link** | Link | – |
| **Button style** | Primary · Secondary · Highlight | Primary |
| **Text position** | Left · Right | Left |
| **Number the photos** | Checkbox | On |
| **Cards in depth (fly in, come forward on hover)** | Checkbox | On |
| **Color scheme** | Color scheme | Scheme 1 |

*Section spacing*

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

*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 | On |
| **Anchor ID** – Link to this section with #anchor-id. | Text | – |

## Block settings

**Block: Image** (5 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Image** | Image | – |
| **Caption** | Text | – |
| **Link** | Link | – |
| **Text in the detail** – Shown when the card comes forward. Products and collections use their description when empty. | Text | – |
| **Button label** | Text | – |

**Block: Product** (6 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Product** | Product | – |
| **Image** – Optional. Replaces the product photo. | Image | – |
| **Caption** – Leave empty to use the product title. | Text | – |
| **Link** – Leave empty to link to the product. | Link | – |
| **Text in the detail** – Shown when the card comes forward. Products and collections use their description when empty. | Text | – |
| **Button label** | Text | – |

**Block: Collection** (6 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Collection** | Collection | – |
| **Image** – Optional. Replaces the collection image. | Image | – |
| **Caption** – Leave empty to use the collection title. | Text | – |
| **Link** – Leave empty to link to the collection. | Link | – |
| **Text in the detail** – Shown when the card comes forward. Products and collections use their description when empty. | Text | – |
| **Button label** | Text | – |

**Block: Video** (6 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Video** – Plays muted on a loop. | Video file | – |
| **Image** – Shown when there is no video. | Image | – |
| **Caption** | Text | – |
| **Link** | Link | – |
| **Text in the detail** – Shown when the card comes forward. Products and collections use their description when empty. | Text | – |
| **Button label** | Text | – |

**Block: Text** (8 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Heading** | Rich text (one line) | Sample text |
| **Heading size** | Large · Medium · Small | Medium |
| **Text** | Rich text | Sample text |
| **Text alignment** | Left · Center | Left |
| **Button label** | Text | Sample text |
| **Button link** | Link | – |
| **Button style** | Primary · Secondary · Highlight | Primary |
| **Color scheme** | Color scheme | Scheme 2 |

## Related

- [Image with text](https://themelab.page/tally/docs/sections/image-with-text.md): A photo beside text built from blocks – label, heading, text, list, stats and buttons – plain or on an overlapping card.
- [Featured product](https://themelab.page/tally/docs/sections/featured-product.md): One product with its gallery, price, options and buy buttons on any page – a hero product or a launch.
- [Lookbook](https://themelab.page/tally/docs/sections/lookbook.md): A horizontal row of large images in mixed shapes that shoppers drag or swipe through, with products on the photos.