Discount progress bar

The Discount Progress Bar is a dynamic visual element that guides customers through quantity-based discount tiers. It updates in real-time to show customers how close they are to unlocking the next discount based on their cart quantity.

1. Overview

1.1. What is the Discount Progress Bar?

The Discount progress bar is a dynamic visual element that guides customers through quantity-based discount tiers. It updates in real-time to show customers how close they are to unlocking the next discount based on their cart quantity.

Key characteristics:

• 🎯 When to use: Guide customers through quantity-based or subtotal-based discount tiers.
• ⚙️ How it works: Updates in real time to show customers how close they are to unlocking the next discount based on quantity or subtotal.
• 📍 Setup location: A block under Product information/Featured product/Quick view section.

1.2. Supported discount types

The Discount progress bar feature supports two types of discount codes:

✅ Quantity-based Discounts

• Discounts are triggered when customers buy a certain number of items.
• Example: Buy 10+ items → Get $5 off, Buy 20+ items → Get $10 off
• Best for: Wholesale offers, bundle deals, “buy more, save more” campaigns.

→ Go to 3.1. How to set up a Discount progress bar using QUANTITY OFF DISCOUNT? to learn more

✅ Purchase Amount Off Discounts

• Discounts are triggered when customers spend a certain amount of money.
• Example: Spend $100 → Get $10 off, Spend $200 → Get $25 off
• Best for: Cart-value upsell strategies, free gift thresholds, or tiered BFCM promotions.

→ Go to 3.2. How to set up a Discount progress bar using PURCHASE AMOUNT OFF DISCOUNT? to learn more

2. 🚨 CRITICAL: Before you start

3. Step-by-step setup

3.1. How to set up a Discount progress bar using QUANTITY OFF DISCOUNT?

Process 1: Create discount codes in Shopify Admin

STEP 1: Go to Shopify Admin → Discounts → Create discount

STEP 2: Choose "Automatic discount".

STEP 3: Select quantity-based discount options

STEP 4: Set the quantity threshold (this number will be used in Theme Editor)

STEP 5: Set the discount amount (this will be displayed in your progress bar)

STEP 6: Repeat for each tier (create separate discount codes for each goal)

Example setup: If you want 5 discount tiers, create 5 automatic discount codes:

• Discount 1: $5 off when buying 10+ items
• Discount 2: $10 off when buying 20+ items
• Discount 3: $15 off when buying 30+ items
• Discount 4: $20 off when buying 40+ items
• Discount 5: $25 off when buying 50+ items

Process 2: Set up the Progress Bar in Theme Editor

STEP 1: Add the Discount progress bar block

Navigate to Product page, under Product information section, add the Discount progress bar block

STEP 2: Match the goals

Click on the Discount progress bar to open the settings panel. Scroll down to the Goal 1 section and fill in the values:

Field name	What to fill in?	How it appears
Goal 1	Enter the exact threshold from Shopify admin (e.g., 10)
Goal 1 label	Enter discount description for the tiers table (e.g., "$5 off each")
Goal 1 pre-goal message	- Message shown BEFORE goal is reached.  - Use these placeholders to add dynamic value:  [x] = automatically shows the remaining quantity needed. [goal_label] = automatically shows the goal label you entered	How it works for customers: Goal condition: 10 items needed for $5 off each Current cart: 5 items Pre-goal message displayed
Goal 1 post-goal message	Message shown AFTER reaching goal. Use [goal_label] placeholder	How it works for customers: Goal condition: 10 items needed for $5 off each Current cart: 10 items Post-goal message displayed

STEP 3: Repeat these steps for goals 2,3,4,5.

⚠️ Note: If you enter a smaller goal after a larger one, the system will automatically reorder the goals on the bar to ensure they are displayed in the correct sequence.

STEP 4: Click "Save" when done.

Process 3: Final refinements

After finishing the two most important processes above, just a few works are left to make your Discount progress bar “glorious”:

STEP 1: Add a Heading (e.g., "Buy more get more!")

STEP 2: Decide where the block applies:

For specific products → select products under Apply to products.

For specific collections → select collections under Apply to collections.

For all products and collections → leave both fields empty.

STEP 3: Save your settings

4. Advanced customizations

5. Support Information

Need help? Contact our support team at Omni Themes Support.