Quantity Buttons

Add fully customizable Quantity Buttons component to an Experience or Test

Overview

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

Important:

  • To add these components to your site, please follow these installation instructions

  • You must select specific products for Quantity Buttons to be available as a component option.

Note: Quantity Buttons are only available on Volume discount offers.

Key Features

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

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

  • 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

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

Volume 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. Style to match brand preferences

  8. 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

Troubleshooting

Buttons Not Appearing: Verify offer is active, products selected, and requirements met

Pricing Issues: Check discount calculations and product pricing in offer settings

Variable Display: Verify variable syntax and test with different product selections

Last updated: 7/29/25

PreviousOffer ModificationsNextProgress Bars

Last updated

Was this helpful?