Quantity Buttons

Add fully customizable Quantity Buttons component to a Personalization or Test

Overview

Quantity Buttons replace standard quantity selectors within an Offer Personalization with promotional buttons that highlight savings and encourage larger purchases. They showcase volume discounts and tiered pricing to drive higher average order values.

Important:

• Quantity Buttons are automatically installed via the Intelligems script. If you are not seeing them when you preview your Offer on an eligible product, please see the below for help.

• You must select specific products for Quantity Buttons to be available as a component option when setting up an Offer

• To set up a Price Test with Quantity Buttons follow these steps.

Note: Quantity Buttons are only available on Quantity Discounts.

Key Features

• Multiple Button Styles: Choose from Classic List, Image Cards, or Compact layouts

• Dynamic Pricing Display: Real-time pricing, savings calculations, price per item, and discount percentages

• Choose Default Variant: Choose which variant is selected as default - instead of the lowest or single unit, you can select a higher tier to increase AOV

• Show Prices per Item: Update the price shown on PDP as a price per item for multiple units

• Enhanced Text Customization: Add badges, labels, subtitles, and custom messaging

• Free Shipping & Gift Integration: Display badges and callouts directly on buttons

Button Styles

Classic List Clean, vertical layout with organized quantity tiers. Best for traditional presentations with detailed pricing.

Image Cards Includes product images for each option. Ideal for bundles, gift sets, and visual product storytelling.

Compact Space-saving horizontal layout for quick comparison. Perfect for limited space and mobile experiences.

Configuration

Basic Setup

• Section Title: Header text (e.g., "Buy more save more")

• Base Button: Toggle single-item option

• Button Labels: Custom text for each tier

• Subtitles: Additional descriptive text

Additional Features

• Free Shipping Badges: Auto-display on qualifying tiers

• Free Gift Display: Include free gift information on qualifying tiers

• Promotional Badges: "Most Popular," "Best Deal," "Limited Time"

• Compare at Price: Original vs. discounted pricing

• Variant Mix: Let customers mix & match variants per tier

Layout Options

• Stacked (Default): Vertical list format, natural reading pattern

• Side-by-Side: Horizontal grid, efficient space use

Dynamic Variables

Discount Variables

• {Saved percentage}: Display discount percentage

• {Saved $ total}: Total dollar savings

• {Saved $ per item}: Per-unit savings amount

Product Variables

• {Product title}: Specific product names

• {New total price}: Discounted total price

• {New price per item}: Discounted per-unit price

• {Original total price}: Original total pricing

• {Original price per item}: Original per-unit cost

Example Usage: "Save {Saved percentage} on {Product title}"

Example Use Cases

Volume Discounts

• 1 item: Standard price

• 2 items: 10% off, "Most Popular"

• 5 items: 20% off, "Best Deal"

• 10 items: 40% off + free gift

Bundle Offers Single item → 3-Pack → 5-Pack → Family Pack with escalating value

How It Works

Quantity Discount Offers:

1. Configure discount trigger and discount value

2. Add specific products this Offer should apply to (cannot be left empty for all products)

3. Configure Offer tiers

4. Add Quantity Buttons component to your offer

5. Customize labels with variables

6. Choose button style and layout

7. Choose variant mix defaults and display type inclucing text, color swatch, or product image

8. Style to match brand preferences

9. Preview with product switching

Tips

• Compelling Tiers: Clear value progression with meaningful savings increases

• Visual Hierarchy: Use badges and colors to guide toward preferred options

• Mobile-First: Ensure touch-friendly sizes and spacing

• A/B Testing: Test layouts, messaging, and promotional strategies

Installing the Quantity Buttons

Quantity Buttons are automatically installed on your product pages once the Intelligems script is added to your theme. Our script detects the standard quantity selector on your product detail pages and installs the buttons there.

When will I see the buttons? The buttons will appear on your product pages once you've either:

• Started previewing an Offer with Quantity Buttons enabled, or

• Launched a live Offer with Quantity Buttons enabled

What if the buttons are in the wrong location or aren't showing up at all? If you don't see the buttons or they are in the wrong location, your theme may use a custom quantity selector that differs from the standard format.

To resolve this, you'll need to manually place the below snippet in your theme code.

<ig-volume-quantity-widget></ig-volume-quantity-widget>

Follow these steps to do so:

1. Access your theme code

2. Locate your product page file

   1. The file is typically sections/main-product.liquid for OS 2.0 themes, or templates/product.liquid for older themes. If you're unsure, reach out to our support team.

3. Find your bearings

   1. To orient yourself, search your file for type="number" or name="quantity" to see your product page structure.

   2. If your theme uses {%- when 'xyz' -%} blocks (OS 2.0 themes), you'll see sections like variant_picker, quantity_selector, and buy_buttons.

4. Insert the snippet in the desired location

   1. The placement determines where the quantity buttons will visually appear on your page. Common placements include:

      1. Right before your Add to Cart button code

      2. Between variant selection and purchase buttons

      3. Near your existing quantity selector

5. Test and adjust

   1. Save your changes

   2. Preview your offer in Intelligems

   3. Check if the buttons appear where you want them

   4. If they're not in the right spot, move the snippet to a different location and test again

Important notes:

• Do not paste this into theme.liquid

• Do not paste into header or footer files

• The quantity button container will be present on the PDP, but the buttons won't appear unless you're actively previewing an offer or have launched a live offer

• The snippet must be placed inside the product form section of your PDP

• Make sure the Intelligems script is already installed on your theme

• The exact placement is up to you based on where you want the buttons to appear. An example placement might be:

{%- when 'variant_picker' -%}
  {% render 'product-variant-picker'... %}

<ig-volume-quantity-widget></ig-volume-quantity-widget>

{%- when 'buy_buttons' -%}
  <button type="submit">Add to cart</button>

Please reach out to our support team here if you would like help completing this!