# smootify-variant

> Repeats its block once per variant of a product.

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

## Where it can go

- **Anywhere** on the page.
- **Out of place,** it stays in the page and does nothing: without data-product-id, or with data-product-id=“wishlist” (the wishlist page’s variant template, drawn by the Wishlist extension); missing product: removed, dev mode shows a banner.

## What it requires

Nothing beyond Smootify: it works on every plan.

## Attributes on the element

- **It reads** `data-product-id`, `unique-by`.
- **Smootify writes** `data-id`, `data-stock` on it: do not set them yourself.

## Attributes inside it

| Group | Attribute name | Values |
|---|---|---|
| [Product](https://www.smootify.io/docs/reference/attributes/product) | `product` | 30 |
| [Selected variant](https://www.smootify.io/docs/reference/attributes/variant) | `variant` | 28 |
| [Variant swatch](https://www.smootify.io/docs/reference/attributes/variant-swatch) | `swatch` | 4 |
| [Image size](https://www.smootify.io/docs/reference/attributes/image-size) | `max-width` | 4 |
| [Loading](https://www.smootify.io/docs/reference/attributes/loading) | `skeleton` | 5 |
| [Variant metafield](https://www.smootify.io/docs/reference/attributes/variant-metafield) | `variant-metafield` | 4 |
| [Product (condition)](https://www.smootify.io/docs/reference/conditions/product) | `condition` | 22 |
| [Variant metafield (condition)](https://www.smootify.io/docs/reference/conditions/variant-metafield) | `if-variant-metafield` | 4 |

## State classes

Smootify toggles `loaded`, `is-on-sale`, `is-available`, `is-not-available`, `last-in-stock`, `low-stock`, `not-existing-variant` on it: style them in Webflow for each state. See [State classes](https://www.smootify.io/docs/reference/state-classes).

## Loading

Its code loads only on pages that have `smootify-variant`.