# Product page

> The gallery, variant picker, buy buttons, pre-orders, delivery estimate, side panels and every other block of the Product information section.

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

## At a glance

- **In the editor:** Product information
- **Where it goes:** Its own template – open that kind of page in the editor
- **In the presets:** Tally: Product; Poster: Product; Petal: Product; Every preset: Product (pre-order)
- **Settings:** 25
- **Blocks:** Text, Vendor, Title, Rating, Price, Badges, Variant picker, Quantity, Buy buttons, Inventory status, SKU, Pickup availability, Description, Collapsible tab, Side panel, Icons with text, Share, Complementary products, Image, Highlights, Specifications, Other colors, Delivery estimate, Buy it together, Custom Liquid
- **App blocks:** Yes

Open any product in the theme editor (use the page selector at the top) to edit the product template. The default template has three sections: **Product information**, **Related products** and **Recently viewed**. Every element of Product information is a block you can reorder, hide or remove.

> **Tip:** Templates for different kinds of products
>
> To give some products a different layout, create a new template from the page selector (**Product › Create template**), change it, and assign it to those products in the product's admin page under **Theme template**. Tally includes a **product.preorder** template for products sold before they arrive.

## Gallery

- **Gallery layout:** *Carousel*, *Carousel with thumbnails on the side*, *Stacked grid*, *Large first photo, then two columns* or *One column*.
- **Photo shape:** crop every photo to square, portrait or landscape, or keep each photo's own shape with *Like the photo*.
- **Keep photos in view while scrolling:** on desktop, the photo stays at the top with its thumbnails below while the product details scroll. The photo shrinks to fit the screen and makes room when the sticky add to cart bar appears. It uses the carousel with thumbnails.
- **Open images in a zoom gallery:** a click opens the photos full screen, where shoppers can zoom, swipe and use the arrow keys.
- **Magnify photos on hover:** with a mouse, the photo enlarges under the pointer.

### Photos per color

With **Show only the selected color's media** on, the gallery shows only the photos of the color the shopper picked. Give each color its photos in one of two ways:

1. Set the color name as the photo's **alt text** (for example *Red*), or
2. Assign a **variant image** to each color under Variants, and place that color's other photos right after it in the product's media list.

Photos before the first variant image show for every color. If the product's color option is not called *Color* (for example *Colour* or *Finish*), enter its name in **Option to filter by**.

## Layout options

- **Keep product info visible while scrolling:** the details column stays in view next to a long gallery.
- **Show sticky add to cart bar:** a bar with the product, the price and the add button appears at the bottom of the screen once the main button scrolls out of view. The footer makes room for it, so its last row (copyright, policies, payment icons) stays visible.
- **Side panel color scheme** colors the panels opened by Side panel blocks.

## Blocks

The full list of blocks and their settings is at the end of this page. These are the ones with the most to set up.

### Price

Shows the price, the compare-at price and a saving badge. **Show tax and shipping note** adds the "Tax included" or "Shipping calculated at checkout" line from your store settings. **Show Shop Pay Installments** shows the installments banner when Shop Pay Installments is available in your store.

### Variant picker

Shows each option as *Pills* or a *Dropdown*. With **Show color swatches**, the color option uses swatches:

1. Give the product a **category** in its admin page.
2. Fill the **Color** category metafield (Shopify's colors, or your own with a hex code or a pattern image).
3. Connect the product's Color option to that metafield under **Variants**.

Swatches on the product page and on product cards then use those colors. If a value has no color, Tally uses its name as a color: CSS color names such as *Navy* or *Teal*, plus common store color names (Cobalt, Sage, Oat, Sand, Clay, Charcoal, Marl, Cream, Ecru, Mustard, Rust, Denim, Camel, Burgundy, Mauve, Mint and more). Any other name shows an empty ring, so give it a color in the metafield.

**Swatch shows > Variant photo** shows the image assigned to each color under Variants instead of a color dot.

### Buy buttons and pre-orders

The add to cart button, plus **dynamic checkout buttons** (Shop Pay, Apple Pay, Google Pay and others, depending on your payment settings) and the **gift card recipient form** for gift card products.

**Pre-order button:**

- *When out of stock and selling continues* turns the button into **Pre-order** for variants that have *Continue selling when out of stock* on and no stock left.
- *Always* does it for every product using the template – use it in the **product.preorder** template.
- **Pre-order note** shows under the button, for example "Ships in the first week of March", and is added to the order so you see it when fulfilling.

### Inventory status

Shows *In stock*, *Low stock* (below the **Low stock threshold**) or *Out of stock*. **Show stock bar when low** adds a short bar that empties as stock runs out; **Stock bar full at** is the stock level at which the bar is full. Inventory must be tracked for the variant.

### Pickup availability

Shows whether the variant can be picked up at your locations, with a link to all locations. Set up local pickup in **Settings › Shipping and delivery**.

### Description

Shows the product description. **Shorten long descriptions** shows the beginning with a **Show more** button.

### Collapsible tab

A row that opens to show text or a page – for details, materials, care or shipping. Connect a metafield to the content to show product-specific text.

### Side panel

A link that opens a panel from the side: a size guide, delivery information or care instructions.

- Pick a **Page** (its text shows in the panel; tables are styled and scroll sideways on small screens) and/or write **Text** and **Highlights**.
- Add an **Image** such as a size chart or a measuring guide; it can enlarge on click.
- Choose a *Row with lines* or a *Text link*, an icon and a *Regular* or *Wide (for tables)* panel.
- In the editor, selecting the block opens its panel.

### Highlights

Short key facts with an icon, shown as a list, two columns or chips. Write them in the block (one per line; text before a `|` is bold, for example `Organic cotton | soft and breathable`), or leave it empty and fill the product metafield `custom.highlights` (a list of single line texts) on each product.

### Specifications

A table of `Label: value` rows, for example `Material: Oak`. Write the rows in the block, or leave it empty and use a multi-line text metafield such as `custom.specs` with one pair per line. The Compare table uses the same metafield. With a heading, the table opens from a row like a collapsible tab.

### Other colors

Links to the same product in other colors or styles when they are **separate products** (for example a mug sold as three products). Two ways to set it up:

- **With metafields (recommended):** on each product, fill `custom.siblings` (a list of products – the same list on each of them), `custom.sibling_label` (the color name, such as *Sage*), and optionally `custom.sibling_color` (a color for the swatch) and `custom.sibling_group` (the heading, such as *Color* or *Style*).
- **In the block:** pick the products in **Products**. They link to each other, and the block stays hidden on products outside the group.

Shown as *Photos*, *Color swatches* or *Pills*.

### Delivery estimate

"Order within 3 h 20 min to get it Thu, Nov 6 – Mon, Nov 10". The dates are counted in your store's time zone from **Fastest delivery in days** and **Slowest delivery in days**, the **Same-day dispatch until** cut-off and business days only (if on). In the text, `[countdown]` is the time left until the cut-off and `[dates]` the delivery dates. The block is hidden while the variant is sold out.

### Buy it together

Up to four products shoppers add together with this one in one click. Each one can be unticked and the total updates.

### Complementary products

Products that go well with this one, set up in the **Search & Discovery** app (**Search & Discovery › Product recommendations**).

### Icons with text

Three short lines with an icon, for example *Free delivery over $60*, *30-day returns* and *2-year warranty*. Upload your own SVG or PNG icon for any line. **Theme settings › Shapes › Icon line weight** makes the built-in icons thinner or bolder.

### Other blocks

**Text**, **Vendor**, **Title**, **Rating** (from a reviews app), **Badges** (one per line; connect a metafield for product-specific badges), **Quantity**, **SKU**, **Share**, **Image**, **Custom Liquid** and app blocks.

## Related products

Products related to the one shown, from Shopify's product recommendations. They improve over time, and you can adjust them in the **Search & Discovery** app.

See [Related products](https://themelab.page/tally/docs/sections/related-products.md) – every setting and block explained.

## Featured product

The **Featured product** section shows one product with its gallery and buy buttons on any page, such as the home page. It has its own set of blocks.

See [Featured product](https://themelab.page/tally/docs/sections/featured-product.md) – every setting and block explained.

## Recently viewed

Shows the products a shopper opened most recently on this device. The section stays hidden until they have viewed a product, and shoppers can clear the list. It is also on the home page.

See [Recently viewed](https://themelab.page/tally/docs/sections/recently-viewed.md) – every setting and block explained.

## All settings

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

**Section: Product information** (25 settings, in editor order)

*Media*

| Setting | Options | Default |
| --- | --- | --- |
| **Gallery layout** | Carousel · Carousel with thumbnails on the side · Stacked grid · Large first photo, then two columns · One column | Stacked grid |
| **Photo shape** | Square · Portrait · Landscape · Like the photo | Square |
| **Media position on desktop** | Left · Right | Left |
| **Media width on desktop** | Small · Medium · Large | Medium |
| **Show thumbnails** | Checkbox | On |
| **Keep photos in view while scrolling** – On desktop the photo stays at the top with the thumbnails below it while the product details scroll. Uses the carousel with 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 |
| **Magnify photos on hover** – With a mouse, the photo enlarges under the pointer. | Checkbox | Off |
| **Loop videos** | Checkbox | On |

*Layout*

| Setting | Options | Default |
| --- | --- | --- |
| **Show breadcrumbs** | Checkbox | On |
| **Keep product info visible while scrolling** | Checkbox | On |
| **Show sticky add to cart bar** | Checkbox | On |
| **Sticky bar color scheme** | Color scheme | Scheme 1 |
| **Color scheme** | Color scheme | Scheme 1 |
| **Side panel color scheme** | Color scheme | Scheme 1 |

*Section spacing*

| Setting | Options | Default |
| --- | --- | --- |
| **Top padding** | 0–160px (step 4) | 32px |
| **Bottom padding** | 0–160px (step 4) | 80px |
| **Top padding on mobile** | 0–120px (step 4) | 16px |
| **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** (1 setting, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Size** | Large · Medium · Small | Medium |

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

Shows the rating from a reviews app that uses the standard rating metafield.

| Setting | Options | Default |
| --- | --- | --- |
| **Reviews link** – For example #reviews | Text | Sample text |

**Block: Price** (3 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Show saving badge** | Checkbox | On |
| **Show tax and shipping note** | Checkbox | On |
| **Show Shop Pay Installments** | Checkbox | On |

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

| Setting | Options | Default |
| --- | --- | --- |
| **Badges** – One badge per line. Connect a metafield for product-specific badges. | Multi-line text | Sample text |

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

| Setting | Options | Default |
| --- | --- | --- |
| **Style** | Pills · Dropdown | Pills |
| **Show color swatches** | Checkbox | On |
| **Swatch shape** | Circle · Square | Circle |
| **Swatch shows** – Variant photo uses the image assigned to each color under Variants; colors without one keep their color. | Color · Variant photo | Color |

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

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

| Setting | Options | Default |
| --- | --- | --- |
| **Show dynamic checkout buttons** – Customers see their preferred payment method, such as Shop Pay or Apple Pay. | Checkbox | On |
| **Show gift card recipient form** – Only for gift card products. | Checkbox | On |

*Pre-order*

| Setting | Options | Default |
| --- | --- | --- |
| **Pre-order button** – Out of stock and selling continues means Continue selling when out of stock is on for the variant. | When out of stock and selling continues · Always · Never | When out of stock and selling continues |
| **Pre-order button label** | Text | Sample text |
| **Pre-order note** – Shown under the button, for example the expected shipping date. Added to the order as well. | Rich text (one line) | – |

**Block: Inventory status** (3 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Low stock threshold** | 1–50 (step 1) | 10 |
| **Show stock bar when low** | Checkbox | On |
| **Stock bar full at** | 10–100 (step 5) | 20 |

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

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

**Block: Description** (2 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Shorten long descriptions** – Shows the beginning with a Show more button. | Checkbox | On |
| **Height when shortened** | 80–400px (step 20) | 160px |

**Block: Collapsible tab** (5 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Heading** | Text | Sample text |
| **Icon** | None · Truck · Return · Shield · Card · Chat · Gift · Tag · Box · Leaf · Clock · Star · Heart | None |
| **Content** – Connect a metafield to show product-specific content. | Rich text | Sample text |
| **Page content** | Page | – |
| **Open by default** | Checkbox | Off |

**Block: Side panel** (14 settings, in editor order)

A link that opens a panel from the side, for a size guide, delivery or care information.

| Setting | Options | Default |
| --- | --- | --- |
| **Link label** | Text | Sample text |
| **Icon** | None · Ruler · Truck · Return · Shield · Leaf · Box · Chat · Gift · Clock | Ruler |
| **Link style** | Row with lines · Text link | Row with lines |
| **Panel heading** – Leave empty to use the page title. | Text | – |
| **Panel width** | Regular · Wide (for tables) | Regular |

*Content*

| Setting | Options | Default |
| --- | --- | --- |
| **Highlights** – One per line, shown with a check mark. Text before \| is bold, for example: Free delivery \| on orders over $60 | Multi-line text | – |
| **Text** – Connect a metafield for product-specific text. | Rich text | – |
| **Page** – Its text shows below. Pages built from a template, like Contact, have no text of their own. Tables are styled for size guides. | Page | – |

*Image*

| Setting | Options | Default |
| --- | --- | --- |
| **Image** – A size chart, a measuring guide or a photo of the packaging. | Image | – |
| **Position** | Above the text · Below the text | Above the text |
| **Enlarge on click** | Checkbox | On |
| **Caption** | Text | – |

*Button*

| Setting | Options | Default |
| --- | --- | --- |
| **Button label** – For example: Contact us, or Read the full policy. | Text | – |
| **Button link** – Leave empty to open the page chosen above. | Link | – |

**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: Share** (1 setting, in editor order)

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

**Block: Complementary products** (3 settings, in editor order)

Set up complementary products in the Search and Discovery app.

| Setting | Options | Default |
| --- | --- | --- |
| **Heading** | Text | Sample text |
| **Maximum products** | 1–6 (step 1) | 3 |
| **Space between products** | 0–40px (step 2) | 12px |

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

| Setting | Options | Default |
| --- | --- | --- |
| **Image** | Image | – |
| **Width** | 60–600px (step 10) | 240px |

**Block: Highlights** (4 settings, in editor order)

Short key facts with an icon. Without text here, the product metafield custom.highlights (a list of single line texts or multi-line text) is used.

| Setting | Options | Default |
| --- | --- | --- |
| **Heading** | Text | – |
| **Highlights** – One per line. Text before a \| is bold, for example: Organic cotton \| soft and breathable. Connect a metafield for product-specific highlights. | Multi-line text | – |
| **Layout** | List · Two columns · Chips | List |
| **Icon** | None · Check mark · Sparkle · Leaf · Star · Heart · Shield | Check mark |

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

A table of Label: value rows. Without rows here, the product metafield set below (or the compare metafield from Theme settings) is used.

| Setting | Options | Default |
| --- | --- | --- |
| **Heading** | Text | – |
| **Rows** – One per line, for example Material: Oak. Connect a metafield for product-specific rows. | Multi-line text | – |
| **Specifications metafield** – namespace.key of a multi-line text metafield, for example custom.specs | Text | – |
| **Icon** | None · Ruler · Box · Leaf · Tag | None |
| **Open by default** – With a heading, the table opens from a row like Collapsible tab. Without one, it shows as a plain table. | Checkbox | Off |

**Block: Other colors** (3 settings, in editor order)

Links to the same product in other colors or styles that are separate products. Fill the product metafield custom.siblings (a list of products) on each of them, or pick one group here: picked products link to each other and the block stays hidden on products outside the group. The label comes from custom.sibling_label, the swatch color from custom.sibling_color, and custom.sibling_group replaces the heading.

| Setting | Options | Default |
| --- | --- | --- |
| **Heading** | Text | Sample text |
| **Products** | Products | – |
| **Style** | Photos · Color swatches · Pills | Photos |

**Block: Delivery estimate** (7 settings, in editor order)

Shows the expected delivery dates, counted in the store's time zone. Hidden while the variant is sold out.

| Setting | Options | Default |
| --- | --- | --- |
| **Fastest delivery in days** | 0–30 (step 1) | 2 |
| **Slowest delivery in days** | 0–30 (step 1) | 5 |
| **Count business days only** | Checkbox | On |
| **Same-day dispatch until** | No cut-off time · 10:00 · 11:00 · 12:00 · 13:00 · 14:00 · 15:00 · 16:00 · 17:00 · 18:00 · 20:00 | 14:00 |
| **Text** – [countdown] is the time left until the cut-off, [dates] the delivery dates. | Rich text (one line) | Sample text |
| **Text without a cut-off time** – [dates] is the delivery dates. | Rich text (one line) | Sample text |
| **Icon** | None · Truck · Clock · Box · Gift | Truck |

**Block: Buy it together** (4 settings, in editor order)

Products shoppers can add together with this one in one click. Each one can be unticked.

| Setting | Options | Default |
| --- | --- | --- |
| **Heading** | Text | Sample text |
| **Products** | Products | – |
| **Include this product** | Checkbox | On |
| **Button label** | Text | Sample text |

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

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

## Related

- [Related products](https://themelab.page/tally/docs/sections/related-products.md): Products related to the one being viewed, from Shopify's recommendations, under the product details.
- [Recently viewed](https://themelab.page/tally/docs/sections/recently-viewed.md): The products a shopper opened most recently on this device, so they can find their way back.
- [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.