smootify-product
Loads a Shopify product into a scope and binds its descendants.
At a glance
The best sellers, over the whole life of the store.
Nothing else to add
The newest products, by their Shopify creation date.
Nothing else to add
Products that can be bought now.
Nothing else to add
Products that match a Shopify search.
Also needsdata-queryoptionaldata-sort
The products of one collection, in its Shopify order.
Also needsdata-collection-handle
Products Shopify finds related to a product.
Also needsdata-parent-id
Products that go with a product.
Also needsdata-parent-id
The products picked in a metafield of a product.
Also needsdata-parent-id
The products picked in a metafield of the customer.
Also needsdata-parent-id=
More in the guide.
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-stockon it: do not set them yourself.
Attributes inside it
| Group | Attribute name | Values |
|---|---|---|
| Product | product | 30 |
| Gallery parts | gallery | 4 |
| Selected variant | variant | 28 |
| Option buttons | option | 14 |
| Each value | option | 5 |
| Image size | max-width | 4 |
| Loading | skeleton | 5 |
| Form values in the page | form-value | 7 |
| Product metafield | metafield | 8 |
| Variant metafield | variant-metafield | 4 |
| Option metafield | option-metafield | 3 |
| Quantities of a metaobject’s products | metaobject-quantity | 3 |
| Product (condition) | condition | 22 |
| Product tags (condition) | tagged | 4 |
| Product metafield (condition) | if-metafield | 4 |
| Variant metafield (condition) | 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.
Loading
Defined at boot on every page.