smootify-product
Loads a Shopify product into a scope and binds its descendants.
Where it can go
- Anywhere on the page.
- Out of place, Smootify removes it from the page: invalid slug source or no ids.
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 | 33 |
| Gallery parts | gallery | 4 |
| Selected variant | variant | 31 |
| Volume pricing row | price-break | 7 |
| 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 | 23 |
| Product tags (condition) | tagged | 4 |
| Product metafield (condition) | if-metafield | 4 |
| Variant metafield (condition) | if-variant-metafield | 4 |
State classes
Smootify toggles loaded, 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, has-price-breaks on it: style them in the site’s CSS for each state. See State classes.
Loading
Defined at boot on every page.