# Featured product

> One product with its gallery, price, variant picker and buy buttons, on any page. Use it to launch a product, feature a bestseller or sell a single item from the home page.

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

## At a glance

- **In the editor:** Featured product
- **Where it goes:** Any page template, with Add section
- **In the presets:** Not on any page by default – add it where you need it
- **Settings:** 18
- **Blocks:** Text, Vendor, Title, Rating, Price, Badges, Variant picker, Buy buttons, Description, Specifications, Inventory status, Icons with text, Details link, Custom Liquid
- **App blocks:** Yes

## Set it up

1. Pick the **Product**.
2. Arrange the blocks: **Title**, **Price**, **Variant picker**, **Buy buttons** and any of **Text**, **Vendor**, **Rating**, **Badges**, **Description**, **Specifications**, **Inventory status**, **Icons with text**, **Details link** and **Custom Liquid**.
3. Choose where the media sits (**Media position on desktop**) and how wide it is (**Media width on desktop**).

## Media

- **Image ratio:** square, portrait or landscape.
- **Show thumbnails** adds small thumbnails under the main photo.
- **Show only the selected color's media:** when a shopper picks a color, only that color's photos show. See [Photos per color](https://themelab.page/tally/docs/product-page.md#photos-per-color) for how to assign them. **Option to filter by** names the option when it is not called *Color*.
- **Open images in a zoom gallery:** a click opens the photos full screen.

## Blocks

The blocks work like their counterparts on the [product page](https://themelab.page/tally/docs/product-page.md#blocks), in a compact form:

- **Description** shows the first words of the description (**Maximum words**), and the **Details link** leads to the full product page.
- **Badges** shows one badge per line, such as *New* or *Limited*.
- **Specifications** shows `Label: value` rows; connect a metafield for product-specific values.
- **Text** can be body text, a subtitle or a small label.

The default color scheme is the alternate band (scheme 2), so the product stands apart from the page.

## All settings

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

**Section: Featured product** (18 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Product** | Product | – |
| **Media position on desktop** | Left · Right | Left |
| **Media width on desktop** | Small · Medium · Large | Medium |
| **Image ratio** | Square · Portrait · Landscape | Landscape |
| **Content alignment** | Top · Middle | Middle |
| **Show thumbnails** | Checkbox | Off |
| **Show only the selected color's media** – A photo belongs to a color when its alt text is the color name, or when it is that color's variant image or follows it. Photos before the first variant image show for every color. | Checkbox | On |
| **Option to filter by** | Text | Sample text |
| **Open images in a zoom gallery** | Checkbox | On |
| **Color scheme** | Color scheme | Scheme 2 |

*Section spacing*

| Setting | Options | Default |
| --- | --- | --- |
| **Top padding** | 0–160px (step 4) | 80px |
| **Bottom padding** | 0–160px (step 4) | 80px |
| **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: Text** (2 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Text** | Rich text (one line) | Sample text |
| **Style** | Body · Subtitle · Label | Label |

**Block: Vendor** – no settings, place it where you want it.

**Block: Title** – no settings, place it where you want it.

**Block: Rating** – no settings, place it where you want it.

**Block: Price** – no settings, place it where you want it.

**Block: Badges** (1 setting, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Badges** – One badge per line. | Multi-line text | Sample text |

**Block: Variant picker** (3 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Style** | Pills · Dropdown | Pills |
| **Show color swatches** | Checkbox | On |
| **Swatch shape** | Circle · Square | Circle |

**Block: Buy buttons** (2 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Show quantity** | Checkbox | On |
| **Show dynamic checkout buttons** | Checkbox | On |

**Block: Description** (1 setting, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Maximum words** | 10–100 (step 5) | 30 |

**Block: Specifications** (1 setting, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Rows** – One per line, label and value separated by a colon. Connect a metafield for product-specific values. | Multi-line text | Sample text |

**Block: Inventory status** (1 setting, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Low stock threshold** | 1–50 (step 1) | 10 |

**Block: Icons with text** (9 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Icon 1** | Truck · Return · Shield · Card · Chat · Gift · Tag · Box · Leaf · Clock · Star · Heart | Truck |
| **Custom icon 1** – Replaces the icon. A square .svg or .png works best. | Image | – |
| **Text 1** | Text | Sample text |
| **Icon 2** | Truck · Return · Shield · Card · Chat · Gift · Tag · Box · Leaf · Clock · Star · Heart | Return |
| **Custom icon 2** – Replaces the icon. A square .svg or .png works best. | Image | – |
| **Text 2** | Text | Sample text |
| **Icon 3** | Truck · Return · Shield · Card · Chat · Gift · Tag · Box · Leaf · Clock · Star · Heart | Shield |
| **Custom icon 3** – Replaces the icon. A square .svg or .png works best. | Image | – |
| **Text 3** | Text | Sample text |

**Block: Details link** – no settings, place it where you want it.

**Block: Custom Liquid** (1 setting, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Custom Liquid** | Liquid code | – |

## Related

- [Product page](https://themelab.page/tally/docs/product-page.md): The gallery, variant picker, buy buttons, pre-orders, delivery estimate, side panels and every other block of the Product information section.
- [Floating gallery](https://themelab.page/tally/docs/sections/floating-gallery.md): Up to four photo, product, collection or video cards floating in depth beside your text; each comes forward on hover.
- [Shop the look](https://themelab.page/tally/docs/sections/shop-the-look.md): A styled photo with dots on each product and a product list beside it, with one button to add everything to the cart.