Quantity Buttons

A row of selectable quantity buttons — your own custom designs, or the built-in controls.

Last updated

August 14, 2026

How to use

Insert Quantity Buttons onto your product page.
Connect ⛁ Butter Data to the product's Butter Data CMS field.
Choose Quantity: Range (set Min/Max) or Custom (list exact values in Options, comma-separated — e.g. "1, 3, 6, 12, 24"). Set Default for the quantity selected before the customer picks anything.
Leave Max at 0 for no limit beyond stock, or connect it to a Number-type CMS field to cap it per product. Set Limit by to Variant (each variant capped separately, the default) or Product (every variant shares one cap).
Choose Mode: Config to style built-in buttons, or Connect to use your own designs — see below.

How it relates to the other quantity components

Quantity Custom is a standalone picker — it doesn't sit underneath Quantity Stepper, Quantity Number, or Quantity Dropdown, and none of them depend on it. All four read and write the same shared quantity, so whichever one you place stays in sync with the others if you use more than one on a page.

Reach for this one when neither a plus/minus stepper nor a dropdown gives you the layout you want — for example, a row or grid of preset quantities ("1, 3, 6, 12") each rendered as its own button.

Config vs. Connect

Mode decides where the button design comes from:

`Mode`	What you get
`Config`	Built-in styled buttons — Layout (stack or grid), gaps, radius, padding, and Font/Color/BG/Border for the Default/Hover/Selected states.
`Connect`	Your own connected designs, with a `Type` choice — `Templated` or `Slots` — plus a `Layout` group for arranging them. See below.

Connect: Templated vs. Slots

The Type control decides how your connected designs map onto the numbers you're offering:

`Type`	What you connect	How it maps to numbers
`Templated` (default)	One `⦿ Unselected` design — leave it empty and the whole picker shows a placeholder instead of rendering. `⦿ Selected` and `⦿ Disabled` are optional: leave either empty and that state just uses the Unselected design instead.	The same design repeats once per number from `Quantity`'s Range or Custom list. Nest a Quantity Number (Display: Static) inside so each button shows its own number.
`Slots`	Set `No. of Slots`, then for each slot connect its own `Unselected`/`Selected`/`Disabled` designs and set that slot's own `Qty #`.	Each slot renders exactly the number you gave it — the numbers offered are entirely defined by the slots themselves, not by `Quantity`/`Min`/`Max`/`Options`, which disappear from the panel in this mode.

Slots mode also hides Max and Limit by — it can't set its own per-order cap. If another quantity component or the Purchase Button sets one for this product, a Slots-mode instance still honors it; otherwise stock is the only limit.

In both Templated and Slots, a number shows as Disabled once it exceeds available stock or the item isn't available for sale.