# Featured collection

> Products from a collection as a grid or a carousel. Add tabs to switch between collections, and quick filters so shoppers can narrow the products without leaving the page.

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

## At a glance

- **In the editor:** Featured collection
- **Where it goes:** Any page template, with Add section
- **In the presets:** Tally: Cart, Home page; Poster: Cart, Home page; Petal: Cart, Home page
- **Settings:** 39
- **Blocks:** Collection tab
- **App blocks:** Yes

## When to use it

The featured collection is the workhorse of the home page. Tally uses it twice: *New in* with quick filters, and *Bestsellers* with tabs. Every preset also places one under the cart, so shoppers with an empty cart have somewhere to go.

## Set it up

1. Pick a **Collection**. Or add two or more **Collection tab** blocks to show several collections as tabs.
2. Write the **Heading** and an optional **Text**, and set the **Link next to the heading** (for example *View all*).
3. Choose **Products to show** (2–24) and the **Layout**: *Grid* or *Carousel*.
4. Set **Products per row on desktop** (2–5) and **on mobile** (1 or 2).

## Quick filters

With **Show quick filters** on, a row of chips above the products lets shoppers narrow what they see – instantly, without loading a new page:

- **By product type:** one chip per product type in the section, introduced by **Product type filter label**.
- **On sale:** with **Show on sale filter**.
- **Under a price:** set **Price filter limit**, for example 40, to show an *Under $40* chip. Use 0 to hide it.

**Let customers change products per row** adds a small 2/3/4 switch, and **Animate the change** lets the products glide to their new places. Filters work on the products loaded in the section, so show enough products for them to be useful – 12 or more.

## Collection tabs

Add a **Collection tab** block for each collection, for example *Kitchen*, *Bath* and *Office*. Each tab can have its own **Tab label** and **View all label**.

- **Tab style:** an *Underlined row* under the heading, or *Pills next to the heading*.
- **Show product count in tabs:** small tabular counts after each label.
- **Tab change animation:** *Slide*, *Fade* or *None*.
- The link next to the heading and the view all button always open the collection of the active tab.

## View all

**Show view all button** adds a button under the products. In **View all label**, `[collection]` is replaced with the collection's title – *Shop all [collection]* becomes *Shop all Kitchen*. **Show how many products are shown** adds a quiet *Showing 8 of 42* line when the collection has more products than the section shows.

## Carousel

In the *Carousel* layout, **Autoplay carousel** moves the products along every few seconds (**Autoplay speed**), and **Show part of the next card** lets the next product peek in.

> **Tip**
>
> Product cards follow **Theme settings › Product cards** – card style, image ratio, quick add, color dots – so every grid in the store stays consistent.

## All settings

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

**Section: Featured collection** (39 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Heading** | Rich text (one line) | Sample text |
| **Text** | Rich text | Sample text |
| **Heading size** | Large · Medium · Small | Medium |
| **Heading alignment** | Left · Center | Left |
| **Link next to the heading** | Text | Sample text |
| **Collection** – Add Collection tab blocks to show several collections as tabs instead. | Collection | – |
| **Tab style** – Applies when the section has two or more Collection tab blocks. | Underlined row · Pills next to the heading | Underlined row |
| **Show product count in tabs** | Checkbox | On |
| **Tab change animation** | Slide · Fade · None | Slide |
| **Products to show** | 2–24 (step 1) | 8 |
| **Layout** | Grid · Carousel | Grid |
| **Products per row on desktop** | 2–5 (step 1) | 4 |
| **Products per row on mobile** | 1 · 2 | 2 |
| **Autoplay carousel** | Checkbox | Off |
| **Autoplay speed** | 2–10s (step 1) | 5s |

*Quick filters*

| Setting | Options | Default |
| --- | --- | --- |
| **Show quick filters** | Checkbox | On |
| **Product type filter label** | Text | Sample text |
| **Show on sale filter** | Checkbox | On |
| **Price filter limit** – Shows an Under price filter. Use 0 to hide it. | Number | 40 |
| **Let customers change products per row** | Checkbox | On |
| **Animate the change** – Products glide to their new place | Checkbox | On |

*View all*

| Setting | Options | Default |
| --- | --- | --- |
| **Show view all button** | Checkbox | On |
| **View all label** – [collection] is replaced with the collection title. Each Collection tab can set its own label. | Text | Sample text |
| **Show how many products are shown** | Checkbox | On |
| **Show part of the next card** – For sliders: the next card shows in part and the edges fade, so it is clear the row goes on. | Checkbox | On |
| **Color scheme** | Color scheme | Scheme 1 |

*Grid spacing*

| Setting | Options | Default |
| --- | --- | --- |
| **Use custom spacing** – Otherwise the spacing from Theme settings > Layout is used. | Checkbox | Off |
| **Space between columns** | 0–64px (step 2) | 20px |
| **Space between rows** | 0–96px (step 2) | 20px |
| **Space between columns on mobile** | 0–32px (step 1) | 8px |
| **Space between rows on mobile** | 0–64px (step 1) | 21px |

*Section spacing*

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

*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: Collection tab** (3 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Collection** | Collection | – |
| **Tab label** – Leave empty to use the collection title. | Text | – |
| **View all label** – Leave empty to use the section label. [collection] is replaced with the collection title. | Text | – |

## Related

- [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.
- [Promo grid](https://themelab.page/tally/docs/sections/promo-grid.md): A dense mosaic of promotion tiles in four sizes – collections, products, offers – each with its own colors.
- [Collection with image](https://themelab.page/tally/docs/sections/collection-with-image.md): A large photo beside a few products from one collection, with a label, heading, text and button.