Knowledge Base  

iCart Cart Drawer Cart Upsell

Drag & drop cart page builder with sticky add to cart drawer like onboarding, cart customiser, app settings, affiliate program, integration and FAQ.

Progress Bar

3 Aug 2026293 Views

The Progress Bar widget in the iCart app allows you to incentivize customers by offering various discount rewards based on their cart value or item count, effectively encouraging them to increase their spending. You can customize the appearance and functionality of the progress bar, which is shared across all cart types in your store.You can choose from different layout styles and color options, set discount tiers with specific thresholds, and select from various discount types, including free shipping and percentage discounts.

Additionally, you can personalize messages using shortcodes to enhance customer engagement when they reach discount milestones. Remember, only one progress bar can be active at a time, and any changes will apply universally across your store's carts.

📊 Overview

The Progress Bar widget in the iCart app lets you offer multiple discount rewards — such as free shipping, percentage-based discounts, free product (with percentage), or fixed-amount discounts — based on how much a customer adds to their cart. It's a powerful way to boost average order value and motivate customers to spend more.

Note: You can have only one progress bar, and it will be shared across all cart types — including quick carts (drawer & popup) and full carts. Any changes you make to the progress bar will apply to all of them.

The Widget Heading helps you identify each widget inside the iCart editor. If you're using multiple same widgets, adding a unique heading makes it easy to tell them apart.

🏷️ Title Settings

The Title appears at the top of the widget in the cart drawer — it’s what your customers will see.

Title customization options:

Show or hide the title
Change the heading background color
Change the entire widget background color

⚙️ Settings

Under the Settings section, you can configure the look and functionality of the progress bar widget.

🎨 Select Layout

Choose from 5 layout styles to match your store’s theme. Each layout offers a different design of the progress bar.

➞ Basic progress bar

➞ Rounded bar

➞ Slick and simplified

➞ Informative status

➞ Animated status bar

🖌️ Progress bar color options

After selecting a layout, you can customize how your progress bar looks using the following color settings:

Filled color – The color that fills the progress bar as the customer gets closer to unlocking a discount.
Empty color – The background color for the unfilled portion of the progress bar.
Discount offer text color – The text color used for displaying discount messages inside the bar.

🎯 Select Discount Tier Type

Choose how the progress bar calculates when to apply rewards:

Cart price above X: Reward is triggered when the cart total exceeds a certain amount.
Cart items above X: Reward is triggered when the number of items in the cart exceeds a specific quantity.

These design options help you match the widget to your store’s branding and create a visually engaging experience for your customers.

🪜 Add Discount Tiers

Each discount tier represents a milestone — for example, “Spend $100 to get free shipping.” You can add multiple tiers and choose from four discount types to suit your promotion strategy:

01. 🎁 Discount – Choose from:

Free Shipping
Percentage Discount
Fixed Amount Discount

02. 🆓 Free Product – Offer up to 3 products for free. You can also apply free shipping by enabling the “Also apply free shipping” option.

03. 💥 Free Product with Discount – Combine a free product with an additional percentage discount.

04. 📣 No Discount – Show only the offer-related message at a certain cart threshold without applying any discount. This is useful if you want to highlight messages but handle the actual discount elsewhere.

✨ Note: The “Also apply free shipping” option will be available when using percentage or fixed amount discounts, as well as for free products.

🛒 Discount tier options

Cart price above X: Set the minimum subtotal required to apply the discount.
Country: Target specific countries for location-based offers.
Exclusion tags: Exclude entire tiers if certain tagged products are in the cart.
Exclude product from subtotal: Exclude only the product’s value from the subtotal without removing the tier.
Error message text: Display a warning when excluded products are added to the cart.
Offer-related text: Show a message like “Add $10 more to get 10% off”.
Select Discount Type:
- Discount (Free shipping / Percentage / Fixed amount)
- Free Product

Discount name: Label used in the cart drawer.

Offer-related text: Custom text shown when the offer conditions aren’t met.

🎉 Discount tier success message options

🎊 Enable Congrats Confetti
Want to make the moment more exciting?
Enable this option to trigger a celebratory confetti effect when all discount tiers are achieved. This visual cue adds a fun, rewarding touch to your customers’ shopping experience.

🎉 Congratulations text
Once a customer meets all discount tiers you’ve configured, the success message will appear — a final confirmation that they’ve unlocked the full offer.

💡 Tip: To display dynamic values in your message, you can use the following shortcodes:

[offer-condition-sum] — shows the required amount or quantity to unlock the tier
[discount-value] — displays the actual value of the discount
[discount] — shows the type of discount applied (e.g., Free Shipping, 10% Off)

These shortcodes help you personalize the messaging automatically based on the customer’s cart.

Read this guide and watch the below video tutorial to understand the working of the Progress Bar widget.