smootify-variant
Repeats its block once per variant of a product.
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-stockon it: do not set them yourself.
Attributes inside it
| Group | Attribute name | Values |
|---|---|---|
| Product | product | 30 |
| Selected variant | variant | 28 |
| Variant swatch | swatch | 4 |
| Image size | max-width | 4 |
| Loading | skeleton | 5 |
| Variant metafield | variant-metafield | 4 |
| Product (condition) | condition | 22 |
| Variant metafield (condition) | 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.
Loading
Its code loads only on pages that have smootify-variant.