Quantity selector
Placement and available controls for the Quantity selector block.
Where to find it
Open the parent section and use Add block where this block is offered.
Usage notes
IMPORTANT: You MUST set up [automatic discounts](https://admin.shopify.com/discounts) in Shopify admin so the cart receives the same quantity discount shown here.
[Tutorial on how to set up](https://app.scaletheme.com/resources/tutorials)
All prices below are calculated automatically from the selected variant. Use the percentage or fixed discount controls to configure each quantity break.
Important: To make this gift free or apply free shipping, you MUST create an Automatic Discount in your Shopify Discounts admin.
Editor controls
Conditional controls appear after choosing the relevant source, style or option. Saved values may differ from new defaults.
- Color source
- Theme colors use Color DNA, Color scheme uses a shared Shopify preset, and Custom affects only this block.
- Color schemeConditional
- Choose an available Shopify color scheme.
- HeadingConditional
- Choose a local color when the relevant custom source is enabled.
- TextConditional
- Choose a local color when the relevant custom source is enabled.
- Selection and badgesConditional
- Choose a local color when the relevant custom source is enabled.
- Accent textConditional
- Choose a local color when the relevant custom source is enabled.
- BorderConditional
- Choose a local color when the relevant custom source is enabled.
- Card backgroundConditional
- Choose a local color when the relevant custom source is enabled.
- Vertical title backgroundConditional
- Choose a local color when the relevant custom source is enabled.
- Selected vertical title backgroundConditional
- Choose a local color when the relevant custom source is enabled.
- Enable Quantity Discounts
- Enable or disable this option and preview the result.
- LayoutConditional
- Choose the presentation or source that fits this component.
- Hide prices and dynamic savingsConditional
- Keeps static labels and badges while the subscription offer displays the live price.
- Unit price suffixConditional
- Edit the text shown by this component.
- Show vertical card title barsConditional
- Enable or disable this option and preview the result.
- Images widthConditional
- Width of images shown in vertical cards.
- Offer appearanceConditional
- Choose the presentation or source that fits this component.
- Heading
- Edit the text shown by this component.
- Heading Tag
- Choose the presentation or source that fits this component.
- Heading Style
- Choose the presentation or source that fits this component.
- Heading Weight
- Choose the presentation or source that fits this component.
- Heading Color
- Choose a local color when the relevant custom source is enabled.
- Heading Transform
- Choose the presentation or source that fits this component.
- Show Heading Divider
- Enable or disable this option and preview the result.
- StyleConditional
- Choose the presentation or source that fits this component.
- Border RadiusConditional
- Choose the presentation or source that fits this component.
- ColorConditional
- Choose a local color when the relevant custom source is enabled.
- Currency Symbol
- Auto uses Shopify's store currency formatting. None removes the currency symbol.
- Preselected Option
- Which option should be selected by default
- Border Color
- Choose a local color when the relevant custom source is enabled.
- Border Width
- Adjust within the range offered by the theme editor.
- Border Style
- Choose the presentation or source that fits this component.
- Selected Border Color
- Choose a local color when the relevant custom source is enabled.
- Selected Border Style
- Choose the presentation or source that fits this component.
- Card Background Color
- Choose a local color when the relevant custom source is enabled.
- Selected Card Background
- Choose a local color when the relevant custom source is enabled.
- Selected Card Background Gradient (Optional)
- Use the matching control in the theme editor and preview the component before publishing.
- Show selection radio
- Enable or disable this option and preview the result.
- Radio Button Border ColorConditional
- Choose a local color when the relevant custom source is enabled.
- Selected Radio ColorConditional
- Choose a local color when the relevant custom source is enabled.
- Enable Variant Selectors
- If the product has multiple variants, a variant picker will be displayed for each quantity
- Enable Variant Selectors on Single Quantity
- Enable or disable this option and preview the result.
- Enable Variant Price Updates
- This option will dynamically change the displayed bundle prices based on the selected variant. ATTENTION: This option might NOT work with currency converters.
- Hide & Automatically Skip Sold Out Variants
- Enable or disable this option and preview the result.
- Make Variant Pickers Full Width
- Enable or disable this option and preview the result.
- Disable Variant Pickers Color Overlay
- Enable or disable this option and preview the result.
- Variant Pickers Label
- Displayed above the variant pickers.
- Variant Label Color
- Choose a local color when the relevant custom source is enabled.
- Variant Select Border Color
- Choose a local color when the relevant custom source is enabled.
- Label Weight
- Choose the presentation or source that fits this component.
- Label Color
- Choose a local color when the relevant custom source is enabled.
- Benefit Weight
- Choose the presentation or source that fits this component.
- Benefit Color (Outlined)
- Choose a local color when the relevant custom source is enabled.
- Benefit Text Color (Solid)
- Choose a local color when the relevant custom source is enabled.
- Caption Weight
- Choose the presentation or source that fits this component.
- Caption Color
- Choose a local color when the relevant custom source is enabled.
- Price Weight
- Choose the presentation or source that fits this component.
- Price Color
- Choose a local color when the relevant custom source is enabled.
- Compare Price Color
- Choose a local color when the relevant custom source is enabled.
- Default Badge Background
- Choose a local color when the relevant custom source is enabled.
- Badge Background 2 (Gradient)
- Choose a local color when the relevant custom source is enabled.
- Default Badge Text Color
- Choose a local color when the relevant custom source is enabled.
- Badge Text Weight
- Choose the presentation or source that fits this component.
- Badge Border Color (Style 3)
- Choose a local color when the relevant custom source is enabled.
- Limited Time Badge Background
- Choose a local color when the relevant custom source is enabled.
- Limited Time Badge Text
- Choose a local color when the relevant custom source is enabled.
- Limited Time Text Weight
- Choose the presentation or source that fits this component.
- Show Option #1
- Enable or disable this option and preview the result.
- Option #1 Quantity
- Set to 0 to disable this option
- Option #1 Badge Text
- Use tokens like [amount_saved], [savings], [fixed_off], [price], [compare_price], [price_each], [compare_price_each], [quantity].
- Option #1 Badge Style
- Choose the presentation or source that fits this component.
- Option #1 Badge Background
- Choose a local color when the relevant custom source is enabled.
- Option #1 Badge Text Color
- Choose a local color when the relevant custom source is enabled.
- Option #1 Image
- Leave empty to use product image
- Option #1 starter image
- Optional transparent packet artwork. An uploaded image takes priority.
- Option #1 image URL
- Used when the image picker is empty.
- Option #1 Label
- Use [quantity] for dynamic quantity value
- Option #1 vertical card titleConditional
- Edit the text shown by this component.
- Option #1 vertical card badgeConditional
- Edit the text shown by this component.
- Option #1 Benefit
- Display an additional benefit of the bundle
- Option #1 Benefit Position
- Choose the presentation or source that fits this component.
- Option #1 Benefit Style
- Choose the presentation or source that fits this component.
- Option #1 Benefit Color
- Choose a local color when the relevant custom source is enabled.
- Option #1 Caption
- Use [amount_saved], [amount_saved_rounded], [price], [compare_price]
- Option #1 Percentage Off
- A percentage that will be discounted from the quantity's total price
- Option #1 free units
- Included in quantity above. For Buy 2 Get 1 Free, set quantity to 3 and free units to 1. Requires a matching automatic Buy X Get Y discount in Shopify. Overrides percentage/fixed price controls; 0 keeps their existing behavior.
- Option #1 Fixed Amount Off
- A fixed amount (in cents, e.g., 1000 for $10.00) that will be subtracted from the total price
- Legacy option #1 price textConditional
- Legacy compatibility only. Price output is automatic.
- Option #1 Compare Price Based On
- Choose if you want bundle compare price to be calculated based on product compare price or regular price
- Legacy option #1 compare price textConditional
- Legacy compatibility only. Compare price output is automatic.
- Show Limited Time Badge
- Enable or disable this option and preview the result.
- Limited Time Text
- Edit the text shown by this component.
- Show Option #2
- Enable or disable this option and preview the result.
- Option #2 Quantity
- Set to 0 to disable this option
- Option #2 Badge Text
- Use tokens like [amount_saved], [savings], [fixed_off], [price], [compare_price], [price_each], [compare_price_each], [quantity].
- Option #2 Badge Style
- Choose the presentation or source that fits this component.
- Option #2 Badge Background
- Choose a local color when the relevant custom source is enabled.
- Option #2 Badge Text Color
- Choose a local color when the relevant custom source is enabled.
- Option #2 Image
- Leave empty to use product image
- Option #2 image URL
- Used when the image picker is empty.
- Option #2 Label
- Use [quantity] for dynamic quantity value
- Option #2 vertical card titleConditional
- Edit the text shown by this component.
- Option #2 vertical card badgeConditional
- Edit the text shown by this component.
- Option #2 Benefit
- Display an additional benefit of the bundle
- Option #2 Benefit Position
- Choose the presentation or source that fits this component.
- Option #2 Benefit Style
- Choose the presentation or source that fits this component.
- Option #2 Benefit Color
- Choose a local color when the relevant custom source is enabled.
- Option #2 Caption
- Use [amount_saved], [amount_saved_rounded], [price], [compare_price]
- Option #2 Percentage Off
- A percentage that will be discounted from the quantity's total price
- Option #2 free units
- Included in quantity above. For Buy 2 Get 1 Free, set quantity to 3 and free units to 1. Requires a matching automatic Buy X Get Y discount in Shopify. Overrides percentage/fixed price controls; 0 keeps their existing behavior.
- Option #2 Fixed Amount Off
- A fixed amount (in cents, e.g., 1000 for $10.00) that will be subtracted from the total price
- Legacy option #2 price textConditional
- Legacy compatibility only. Price output is automatic.
- Option #2 Compare Price Based On
- Choose if you want bundle compare price to be calculated based on product compare price or regular price
- Legacy option #2 compare price textConditional
- Legacy compatibility only. Compare price output is automatic.
- Show Limited Time Badge
- Enable or disable this option and preview the result.
- Limited Time Text
- Edit the text shown by this component.
- Show Option #3
- Enable or disable this option and preview the result.
- Option #3 Quantity
- Set to 0 to disable this option
- Option #3 Badge Text
- Use tokens like [amount_saved], [savings], [fixed_off], [price], [compare_price], [price_each], [compare_price_each], [quantity].
- Option #3 Badge Style
- Choose the presentation or source that fits this component.
- Option #3 Badge Background
- Choose a local color when the relevant custom source is enabled.
- Option #3 Badge Text Color
- Choose a local color when the relevant custom source is enabled.
- Option #3 Image
- Leave empty to use product image
- Option #3 image URL
- Used when the image picker is empty.
- Option #3 Label
- Use [quantity] for dynamic quantity value
- Option #3 vertical card titleConditional
- Edit the text shown by this component.
- Option #3 vertical card badgeConditional
- Edit the text shown by this component.
- Option #3 Benefit
- Display an additional benefit of the bundle
- Option #3 Benefit Position
- Choose the presentation or source that fits this component.
- Option #3 Benefit Style
- Choose the presentation or source that fits this component.
- Option #3 Benefit Color
- Choose a local color when the relevant custom source is enabled.
- Option #3 Caption
- Use [amount_saved], [amount_saved_rounded], [price], [compare_price]
- Option #3 Percentage Off
- A percentage that will be discounted from the quantity's total price
- Option #3 free units
- Included in quantity above. For Buy 3 Get 2 Free, set quantity to 5 and free units to 2. Requires a matching automatic Buy X Get Y discount in Shopify. Overrides percentage/fixed price controls; 0 keeps their existing behavior.
- Option #3 Fixed Amount Off
- A fixed amount (in cents, e.g., 1000 for $10.00) that will be subtracted from the total price
- Legacy option #3 price textConditional
- Legacy compatibility only. Price output is automatic.
- Option #3 Compare Price Based On
- Choose if you want bundle compare price to be calculated based on product compare price or regular price
- Legacy option #3 compare price textConditional
- Legacy compatibility only. Compare price output is automatic.
- Show Limited Time Badge
- Enable or disable this option and preview the result.
- Limited Time Text
- Edit the text shown by this component.
- Show mystery gifts
- Enable or disable this option and preview the result.
- Start mystery gifts collapsedConditional
- Keeps the scratch cards available inside an expandable row.
- Gift Product
- Select a real product from this shop.
- StyleConditional
- Choose the presentation or source that fits this component.
- Divider textConditional
- Edit the text shown by this component.
- TitleConditional
- Edit the text shown by this component.
- Helper textConditional
- Edit the text shown by this component.
- Scratch cover textConditional
- Edit the text shown by this component.
- Fallback Google iconConditional
- Used when a gift icon is empty. Use a Material Symbols icon name.
- Show revealed counterConditional
- Enable or disable this option and preview the result.
- Counter labelConditional
- Edit the text shown by this component.
- Scratch amount to revealConditional
- Adjust within the range offered by the theme editor.
- Reveal on clickConditional
- Enable or disable this option and preview the result.
- Show sparkle textureConditional
- Enable or disable this option and preview the result.
- Show reset linkConditional
- Enable or disable this option and preview the result.
- Reset labelConditional
- Edit the text shown by this component.
- Claimed labelConditional
- Edit the text shown by this component.
- Locked cover textConditional
- Edit the text shown by this component.
- Locked cover captionConditional
- Edit the text shown by this component.
- Locked footer messageConditional
- Use [count] for the number of locked gifts.
- Option #1 unlocked giftsConditional
- Adjust within the range offered by the theme editor.
- Option #2 unlocked giftsConditional
- Adjust within the range offered by the theme editor.
- Option #3 unlocked giftsConditional
- Adjust within the range offered by the theme editor.
- Panel backgroundConditional
- Choose a local color when the relevant custom source is enabled.
- Panel borderConditional
- Choose a local color when the relevant custom source is enabled.
- Text colorConditional
- Choose a local color when the relevant custom source is enabled.
- Muted text colorConditional
- Choose a local color when the relevant custom source is enabled.
- Accent colorConditional
- Choose a local color when the relevant custom source is enabled.
- Scratch cover startConditional
- Choose a local color when the relevant custom source is enabled.
- Scratch cover endConditional
- Choose a local color when the relevant custom source is enabled.
- Scratch text colorConditional
- Choose a local color when the relevant custom source is enabled.
- Claimed pill backgroundConditional
- Choose a local color when the relevant custom source is enabled.
- Claimed pill textConditional
- Choose a local color when the relevant custom source is enabled.
- Claimed pill borderConditional
- Choose a local color when the relevant custom source is enabled.
- Revealed card backgroundConditional
- Choose a local color when the relevant custom source is enabled.
- Revealed card borderConditional
- Choose a local color when the relevant custom source is enabled.
- Locked cover startConditional
- Choose a local color when the relevant custom source is enabled.
- Locked cover endConditional
- Choose a local color when the relevant custom source is enabled.
- Locked text colorConditional
- Choose a local color when the relevant custom source is enabled.
- Gift icon backgroundConditional
- Choose a local color when the relevant custom source is enabled.
- Gift icon colorConditional
- Choose a local color when the relevant custom source is enabled.
- Reveal toast backgroundConditional
- Choose a local color when the relevant custom source is enabled.
- Reveal toast textConditional
- Choose a local color when the relevant custom source is enabled.
- Reveal toast icon backgroundConditional
- Choose a local color when the relevant custom source is enabled.
- Reveal toast icon colorConditional
- Choose a local color when the relevant custom source is enabled.
- Show gift #1Conditional
- Enable or disable this option and preview the result.
- Gift #1 product
- Optional. A revealed, unlocked card adds this available zero-price product after the main purchase item is added. Blank uses the shared gift product. Each gift is added once per cart; priced products are never auto-added.
- Gift #1 titleConditional
- Edit the text shown by this component.
- Gift #1 captionConditional
- Edit the text shown by this component.
- Gift #1 media typeConditional
- Choose the presentation or source that fits this component.
- Gift #1 Google iconConditional
- Use a Material Symbols icon name, for example local_shipping, redeem, card_giftcard.
- Gift #1 icon backgroundConditional
- Choose a local color when the relevant custom source is enabled.
- Gift #1 icon colorConditional
- Choose a local color when the relevant custom source is enabled.
- Gift #1 imageConditional
- Choose an image from your shop. Preview its crop on desktop and mobile.
- Gift #1 cover startConditional
- Choose a local color when the relevant custom source is enabled.
- Gift #1 cover endConditional
- Choose a local color when the relevant custom source is enabled.
- Show gift #2Conditional
- Enable or disable this option and preview the result.
- Gift #2 product
- Optional. A revealed, unlocked card adds this available zero-price product after the main purchase item is added. Blank uses the shared gift product. Each gift is added once per cart; priced products are never auto-added.
- Gift #2 titleConditional
- Edit the text shown by this component.
- Gift #2 captionConditional
- Edit the text shown by this component.
- Gift #2 media typeConditional
- Choose the presentation or source that fits this component.
- Gift #2 Google iconConditional
- Use a Material Symbols icon name, for example local_shipping, redeem, card_giftcard.
- Gift #2 icon backgroundConditional
- Choose a local color when the relevant custom source is enabled.
- Gift #2 icon colorConditional
- Choose a local color when the relevant custom source is enabled.
- Gift #2 imageConditional
- Choose an image from your shop. Preview its crop on desktop and mobile.
- Gift #2 cover startConditional
- Choose a local color when the relevant custom source is enabled.
- Gift #2 cover endConditional
- Choose a local color when the relevant custom source is enabled.
- Show gift #3Conditional
- Enable or disable this option and preview the result.
- Gift #3 product
- Optional. A revealed, unlocked card adds this available zero-price product after the main purchase item is added. Blank uses the shared gift product. Each gift is added once per cart; priced products are never auto-added.
- Gift #3 titleConditional
- Edit the text shown by this component.
- Gift #3 captionConditional
- Edit the text shown by this component.
- Gift #3 media typeConditional
- Choose the presentation or source that fits this component.
- Gift #3 Google iconConditional
- Use a Material Symbols icon name, for example local_shipping, redeem, card_giftcard.
- Gift #3 icon backgroundConditional
- Choose a local color when the relevant custom source is enabled.
- Gift #3 icon colorConditional
- Choose a local color when the relevant custom source is enabled.
- Gift #3 imageConditional
- Choose an image from your shop. Preview its crop on desktop and mobile.
- Gift #3 cover startConditional
- Choose a local color when the relevant custom source is enabled.
- Gift #3 cover endConditional
- Choose a local color when the relevant custom source is enabled.