Stock State
Swaps between connected designs based on the selected variant's inventory level (in stock / low / out).
Last updated
How to use
Connect
⛁ Butter Datato the product'sButter DataCMS field.Set the
Threshold— the inventory cutoff for "low stock."Toggle and connect the designs you want:
⦿ Above Threshold,⦿ Below Threshold, and⦿ Out of Stock.Decide the
No Variant Selectedbehavior for products that haven't had a variant picked yet.
Stock states
State | When it shows | Typical use |
|---|---|---|
Above Threshold | Inventory is at or above your | "In stock" |
Below Threshold | Inventory is above zero but under your | "Only a few left" |
Out of Stock | Inventory is zero. Only applies to variants with tracked, limited inventory — untracked/unlimited variants never reach this state. | "Sold out" |
Because the bands depend on real inventory numbers, a product with infinite or untracked inventory will only ever show the Above Threshold design — it can't be Below Threshold or Out of Stock.
When no variant is selected
On a product with variants, the No Variant Selected control decides what happens before the customer picks one:
Setting |
|
|---|---|
Show | Displays the product's total inventory, summed across every variant. This keeps showing until all options are chosen — a partial selection (a size but no color yet) still shows the whole-product total, not the total for the matching subset. |
Hide (default) | The component stays hidden until a variant is selected. |