# Product and variants

> The product scope and what shows its price, stock and pickup availability.

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

| Element | What it does |
|---|---|
| [`model-viewer`](https://www.smootify.io/docs/reference/elements/model-viewer) (template) | 3D viewer Smootify creates for each 3D model of a product. |
| [`quantity-input`](https://www.smootify.io/docs/reference/elements/quantity-input) | Number input with plus and minus buttons for a quantity. |
| [`smootify-add-to-cart`](https://www.smootify.io/docs/reference/elements/smootify-add-to-cart) | Product form that turns the selection into cart lines. |
| [`smootify-banner`](https://www.smootify.io/docs/reference/elements/smootify-banner) | Licence or development badge that Smootify appends to the body. |
| [`smootify-error-banner`](https://www.smootify.io/docs/reference/elements/smootify-error-banner) | Advice box Smootify appends over an element on testing domains. |
| [`smootify-price`](https://www.smootify.io/docs/reference/elements/smootify-price) | Writes the price, compare-at price and total of its scope into its children. Inside subscription-swatches it shows its own option’s price whatever plan is chosen: in a plan’s radio that plan, in the one-time tab or radio the price without a plan, and (2.0) in a group’s tab link its first plan. |
| [`smootify-product`](https://www.smootify.io/docs/reference/elements/smootify-product) | Loads a Shopify product into a scope and binds its descendants. |
| [`smootify-shop-pay`](https://www.smootify.io/docs/reference/elements/smootify-shop-pay) | Shows Shopify’s Shop Pay button for the current variant or the cart lines. The button fills the element whatever the display of its class (2.0): the element’s width sizes the button. |
| [`smootify-variant`](https://www.smootify.io/docs/reference/elements/smootify-variant) | Repeats its block once per variant of a product. |
| [`store-availability`](https://www.smootify.io/docs/reference/elements/store-availability) | Shows pickup availability of the current variant, with an optional list of locations. |
| [`store-location`](https://www.smootify.io/docs/reference/elements/store-location) (template) | Template of one pickup location row, cloned per location. |