# Product

> The values of `product` inside `smootify-product` or `smootify-variant` or `box-item`.

Status: Ready (Smootify 2.0)  
URL: https://www.smootify.io/docs/reference/attributes/product  
Updated: 2026-10-13

## At a glance

| Attribute | Put it on | What it does |
|---|---|---|
| `product="url"` | a Text link | gets the product page's link, and the product title when the link holds only text |
| `product="link"` | a Link block that wraps the image or the whole card | gets the link only |
| `variant="image"` | an Image | shows the image of the card's variant; bound to the CMS `Image` field too, the CMS image shows until the product loads |
| `product="specific-image"` | an Image | shows one image by position: `index="0"` is the first image, `index="1"` the second; without `index`, the second image, such as a picture shown on hover |

Example: a shirt in four sizes. S costs $29 instead of $39 and is sold out, M costs $32 instead of $45, L costs $35 and XL $39.

| Attribute | What it shows | In the example |
|---|---|---|
| `product="min-price"`, `product="max-price"` | the lowest and highest variant price | $29 and $39 |
| `product="min-available-price"` | the price of the cheapest variant that can be bought | $32 (S is sold out) |
| `product="min-compare-at-price"`, `product="max-compare-at-price"` | the lowest and highest crossed-out price among the variants on sale; hidden when none is on sale | $39 and $45 |
| `condition="variable-price"`, `condition="fixed-price"` | an element shown only when the variants have different prices, or only when they all cost the same | the prices differ: "From" shows |

More in [the guide](https://www.smootify.io/docs/build/product-cards).

## Where it can go

- **Inside any of:** [`smootify-product`](https://www.smootify.io/docs/reference/elements/smootify-product), [`smootify-variant`](https://www.smootify.io/docs/reference/elements/smootify-variant), [`box-item`](https://www.smootify.io/docs/reference/elements/box-item).
- On text.

## Values

| Attribute and value | What it is | Notes |
|---|---|---|
| `product="title"` | Title | — |
| `product="vendor"` | Vendor | On a link, it goes to the vendor; on text, link |
| `product="description"` | Description | on rich, container |
| `product="url"` | Link | The title too, when empty; on link |
| `product="link"` | Link only | on link; inside smootify-product |
| `product="specific-image"` | Image by position | index counts from 0: 0 is the first image, and without it the second; on image, lightbox; set together with index=“1” |
| `product="first-collection"` | First collection | on text, link |
| `product="collections"` | Collections | One copy per collection; on text, link, container; inside smootify-product |
| `product="category"` | Category | inside smootify-product |
| `product="type"` | Type | inside smootify-product |
| `product="tags"` | Tags | One copy per tag; exclude takes a list; on text; inside smootify-product |
| `product="option-values"` | Option values | One copy per value of the option; on container, text, button, link; inside smootify-product; set together with data-option=“1” |
| `product="stock"` | Stock | Every variant together; inside smootify-product |
| `product="published-at"` | Published on | inside smootify-product |
| `product="created-at"` | Created on | inside smootify-product |
| `product="min-price"` | Lowest price | inside smootify-product |
| `product="min-available-price"` | Lowest available price | inside smootify-product |
| `product="max-price"` | Highest price | inside smootify-product |
| `product="min-compare-at-price"` | Lowest compare-at price | inside smootify-product |
| `product="max-compare-at-price"` | Highest compare-at price | inside smootify-product |
| `product="gallery"` | Gallery | Holds the gallery parts; on container; inside smootify-product |
| `product="images"` | Images (deprecated: use Gallery) | One copy per image; on image, link, lightbox, container; inside smootify-product; deprecated: use [product=“gallery”] |
| `product="media"` | Media (deprecated: use Gallery) | One copy per image, video or model; on image, link, lightbox, container; inside smootify-product; deprecated: use [product=“gallery”] |
| `product="video"` | First video | on container, lightbox, video; inside smootify-product |
| `product="videos"` | Videos | One copy each; on container, lightbox, video; inside smootify-product |
| `product="external-video"` | First YouTube or Vimeo | on youtube, lightbox, container; inside smootify-product |
| `product="external-videos"` | YouTube and Vimeo videos | One copy each; on youtube, lightbox, container; inside smootify-product |
| `product="model"` | 3D model | on container; inside smootify-product; also read as models |
| `index="0 is the first"` | Image number, from 0 | on image; with [product=“specific-image”] |
| `exclude="tag,other tag"` | Leave out | A comma list; spaces around the values are ignored; on text, link, container; with [product=“tags”], [product=“collections”], [product=“first-collection”] |
| `data-option="1"` | Option number | on container, text, button, link; inside smootify-product; with [product=“option-values”] |
| `data-option-name="Color, Colour"` | Option name | The first of the names the product has; on container, text, button, link; inside smootify-product; with [product=“option-values”] |