Progress Bars

Add a fully customizable Progress Bar component to an Experience or Test

Overview

Progress bars visually show customers their progress toward rewards like discounts or free shipping in an Offer Experience or Offer Test. They motivate customers by showing "how close am I to unlocking this discount?" and help drive larger cart values.

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

Key Features

  • Visual Progress Tracking: Real-time updates as cart contents change

  • Multiple Tier Support: Show progress across several reward levels

  • Dynamic Updates: Automatic updates without page refresh

  • Enhanced Styling: Customize colors, thickness, corner radius, and spacing

Requirements

Progress bars require a minimum purchase requirement (dollar amount or quantity) to function. This must be manually set for Amount off products, Amount off order, and Free gift offers. Without a defined threshold, there's no target to measure progress against.

On Volume discount and Free shipping Offers, Progress bars are automatically available to use.

Configuration

Basic Setup

  • Item Quantity: Set quantity-based thresholds (e.g., "Buy 3 items for 15% off")

  • Dollar Amount: Set spending-based thresholds (e.g., "Spend $75 for free shipping")

  • Multiple Tiers: Configure escalating rewards at different levels

Styling Controls

  • Bar Appearance: Colors, thickness and corner radius

  • Text: Dynamic progress messaging, completion text, breakpoint labels

  • Typography: Font size & font style

Dynamic Variables

Progress Variables

  • {Amount remaining}: Show remaining amount needed

  • {Discount amount}: Display discount value

Example Usage: "Spend {Amount remaining} more to unlock {Discount amount} off!"

Example Use Cases

Free Shipping Threshold "Spend $15 more to get free shipping!" → "You've unlocked free shipping!"

Volume Discount "Buy 2 more items to unlock 15% off!" with locks on milestones

Gift with purchase "Spend $20 more to get a free tote bag!" with gift icon breakpoint

How It Works

Amount off products, Amount off order, and Free gift Offers:

  1. Configure discount value

  2. Set minimum purchase requirement ($ amount or quantity)

  3. Add which products this Offer should apply to (or leave empty to apply to all products)

  4. Add Progress Bar component to your offer

  5. Set progress and completion messaging

  6. Configure styling to match your brand

  7. Preview with different cart values

Volume discount Offers:

  1. Configure discount trigger and discount value

  2. Add which products this Offer should apply to (or leave empty to apply to all products)

  3. Configure Offer tiers

  4. Set progress and completion messaging

  5. Configure styling to match your brand

  6. Preview with different cart values

Free shipping Offers:

  1. Choose to set minimum purchase requirement ($ amount or quantity) or not

  2. Add which products this Offer should apply to (or leave empty to apply to all products)

  3. Configure free shipping options

  4. Add progress bar component to your Offer

  5. Set progress and completion messaging

  6. Configure styling to match your brand

  7. Preview with different cart values

Tips

  • Set Achievable Goals: Start with 1.5-2x your average order value

  • Use Brand Colors: Integrate with your site's color scheme

  • Be Specific: Use exact amounts ("$15 more") not vague language

  • Test Mobile: Ensure proper display on all devices

Troubleshooting

Progress Bar Not Displaying: Verify minimum purchase requirement is set (for Amount off products/order/Free gift offers) and offer is active

Styling Issues: Use offer preview to see actual site styling; component preview shows general appearance only

Last updated: 7/29/25

PreviousQuantity ButtonsNextOffer Messages

Last updated

Was this helpful?