Quantity Dropdown
A dropdown for choosing quantity, from a range or a custom list.
Last updated
How to use
Connect
⛁ Butter Datato the product's Butter Data CMS field.Choose the
Quantitymode — a Min–Max range, or a Custom list ofOptions.Set the
Defaultquantity and connect the dropdownInstance.In Config mode, style the Default/Selected/Hover/Disabled states, font, and chevron icon.
Range vs. custom quantity options
In range mode, set Min and Max — leave Max at 0 to let the range extend to available inventory, or set it to cap both the range and the most a customer can have in their cart. In custom mode, list the exact Options you want to offer, e.g. 2, 4, 6; those are still capped by stock and Max, if set. Connect Max to a CMS number field to set it per product, and set Limit by to Variant (each variant capped separately, the default) or Product (every variant shares one cap).
Connect vs. Config styling
In Connect mode, connect the dropdown's Instance and ⦿ Disabled designs — Disabled swaps in when the control can't be changed. In Config mode, style font, transform, padding, radius, the Default/Hover/Focus/Disabled states, and the chevron icon directly on the control.
When the dropdown disables itself
The dropdown disables itself — and applies the Disabled style in Config mode — while a cart update is still saving, when the item is unavailable, or there are no valid quantity options left to offer.
Pairing with other quantity components
Use either this dropdown or the stepper-plus-number pattern for a given product's quantity control, not both together.
Setting a per-order maximum
To pull the Max 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, while Product pools every variant of the product into one shared total. 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.