Quantity Stepper
A plus/minus button that increments or decrements the product quantity.
Last updated
How to use
Connect
⛁ Butter Datato the product's Butter Data CMS field.Set
Actionto minus or plus for this instance.Connect the
⦿ Active Buttonand⦿ Disabled Buttondesigns.Optionally set
Max— the most of this item a customer can have in their cart. Leave it at 0 for no cap beyond available stock, or connect it to a CMS number field to set one per product. SetLimit bytoVariant(each variant capped separately, the default) orProduct(every variant shares one cap).
How it respects stock and order limits
The button renders its ⦿ Active Button design until the quantity hits a limit — 1 at the low end, or whichever is lower of available inventory and your Max setting — at which point it switches to the ⦿ Disabled Button design automatically. On the canvas and in preview, the cap uses the stock numbers from your last sync; the published site checks live inventory.
Pairing minus, plus, and the number field
Use two instances of this component — one set to minus, one to plus — around a Quantity Number that displays the current value. Set the same Max on every instance you place for a product — each one publishes its own value, so leaving one at the default (0 = no limit) can override a limit you set on another.
Setting a per-order maximum
Leave Max at 0 for no limit beyond stock, or connect it to a Number-type CMS field to cap it per product. To pull that number from Shopify automatically, enable the metafield you use for it in the plugin's CMS field picker, map it to a Number field, then bind that field to Max here.
Limit by decides how that number is counted: Variant (the default) caps each variant separately — a Small and a Medium each get their own Max. Product pools every variant into one shared total instead — a Max of 10 with Product selected means 10 units combined across every size or color, not 10 each. Since Max connects to a field on the product's own CMS record, the same number applies to every variant either way — Limit by only changes whether usage is tracked separately or together.
The limit is shared with every other quantity component and the Purchase Button for the same product — but it doesn't persist across a full page reload, so bind the same field on any quantity component you use on the cart page too. Keep Max and Limit by identical everywhere you set them for this product: a different fixed number on two components means whichever updates last wins, and a mismatched Limit by means the two controls enforce separate, unrelated caps instead of one shared one. See Set maximum quantity limits for the full walkthrough.
On the product page, Max is a total for the cart: if 2 are already in it, only Max minus 2 more can be added from here.