# smootify-product

> Loads a Shopify product into a scope and binds its descendants.

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

## At a glance

| `data-id` | What it shows | Also needs |
|---|---|---|
| `best-seller` | the best sellers, over the whole life of the store | nothing |
| `created-at` | the newest products, by their Shopify creation date | nothing |
| `purchasable` | products that can be bought now | nothing |
| `custom-query` | products that match a Shopify search | `data-query`, optionally `data-sort` |
| `specific-collection` | the products of one collection, in its Shopify order | `data-collection-handle` |
| `related` | products Shopify finds related to a product | `data-parent-id` |
| `complementary` | products that go with a product | `data-parent-id` |
| `metafields.custom.pairs_with` | the products picked in a metafield of a product | `data-parent-id` |
| `metafields.custom.my_products` | the products picked in a metafield of the customer | `data-parent-id="customer"` |

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

## Where it can go

- **Anywhere** on the page.
- **Out of place,** Smootify removes it from the page (the debugger reports it on .webflow.io): invalid slug source or no ids; invalid kept in preview.

## What it requires

Nothing beyond Smootify: it works on every plan.

## Attributes on the element

- **It reads** `data-id`, `data-parent-id`, `limit`, `data-query`, `data-sort`, `data-collection-handle`, `data-repeat`, `hide-if-product-in-cart`, `data-new-days`, `skeleton`.
- **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 |
| [Gallery parts](https://www.smootify.io/docs/reference/attributes/gallery) | `gallery` | 4 |
| [Selected variant](https://www.smootify.io/docs/reference/attributes/variant) | `variant` | 28 |
| [Option buttons](https://www.smootify.io/docs/reference/attributes/option) | `option` | 14 |
| [Each value](https://www.smootify.io/docs/reference/attributes/option-value-self) | `option` | 5 |
| [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 |
| [Form values in the page](https://www.smootify.io/docs/reference/attributes/form-values) | `form-value` | 7 |
| [Product metafield](https://www.smootify.io/docs/reference/attributes/product-metafield) | `metafield` | 8 |
| [Variant metafield](https://www.smootify.io/docs/reference/attributes/variant-metafield) | `variant-metafield` | 4 |
| [Option metafield](https://www.smootify.io/docs/reference/attributes/option-metafield) | `option-metafield` | 3 |
| [Quantities of a metaobject’s products](https://www.smootify.io/docs/reference/attributes/metaobject-quantity) | `metaobject-quantity` | 3 |
| [Product (condition)](https://www.smootify.io/docs/reference/conditions/product) | `condition` | 22 |
| [Product tags (condition)](https://www.smootify.io/docs/reference/conditions/product-tags) | `tagged` | 4 |
| [Product metafield (condition)](https://www.smootify.io/docs/reference/conditions/product-metafield) | `if-metafield` | 4 |
| [Variant metafield (condition)](https://www.smootify.io/docs/reference/conditions/variant-metafield) | `if-variant-metafield` | 4 |

## State classes

Smootify toggles `loaded`, `w-dyn-bind-empty`, `price-varies`, `is-variable`, `has-subscription`, `is-on-sale`, `is-free`, `is-available`, `is-not-available`, `not-existing-variant`, `is-currently-out-of-stock`, `many-in-stock`, `last-in-stock`, `low-stock`, `low-not-last-stock`, `is-new` on it: style them in Webflow for each state. See [State classes](https://www.smootify.io/docs/reference/state-classes).

## Loading

Defined at boot on every page.