Quantity Number

Shows (or lets the customer type) the selected quantity for a product.

Last updated

Quantity Number icon

How to use

  1. Connect ⛁ Butter Data to the product's Butter Data CMS field.

  2. Choose TypeDisplay Only or User Input.

  3. Optionally set Max — the most of this item allowed in the cart, regardless of Type. Leave it at 0 for no cap beyond available stock, or connect it to a CMS number field to set one per product. Set Limit by to Variant (each variant capped separately, the default) or Product (every variant shares one cap).

  4. If Type is Display Only, choose DisplayActive to track the current selection (recommended) or Static to show a fixed value. This control only applies in Display Only mode.

  5. Style Color, Font, Padding, and the Default/Hover styles.

Display-only vs. typed input

With Display Only Type, the field just shows the current quantity. With User Input Type, the customer can type directly into it and manually enter a number. Whatever they type is clamped to the available range — 1 at the low end, and whichever is lower of stock and your Max setting — then written back to the shared quantity.

Active vs. static display

Display set to Active keeps the field synced to the live selected quantity, which is recommended for most setups. Use Static when this number sits inside an option design connected to Quantity Dropdown or Quantity Buttons — there it shows that option's own number instead of the live selection.

Product page vs. cart

This component adapts to where it's placed: on a product page it sets the quantity that will be added to cart, while inside a cart line it edits that line's quantity directly.

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 — enable the matching Shopify metafield in the plugin's CMS field picker, map it to a Number field, then bind that field 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 — 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.

Questions? Join our Slack community