Progress Bar

Progress bar allows you to create multiple discount offers like Free shipping, Percentage discount, and Fixed amount discount you would like to give to your customers.
Settings are included in the Progress Bar widget:

  • Widget Heading
  • Title
  • Widget layout
  • Select discount tier
  • Discount tier
  • Progress bar color
  • Progress bar success message

Let’s understand the widget options in detail.

Widget heading

Widget heading is useful to differentiate when you see the all widgets list in the editor so if you use multiple widgets having the same feature, you can get what you have added from the heading.


The title is the name of the heading to your widgets when you see the result in the front cart drawer.
Options in the title

    • Show/hide title
    • Heading background color
    • Widget background color

Admin setting screenshot:
Title - Progress Bar
The output of the Title option
Title - Progress Bar


In settings, you can set Progress Bar layout and Discount tier to work the functionality as a selected option from here.

Select Layout

→ In layout, we have three options to apply different layouts and the look of the progress bar.
Layout 1
Progress Bar - Layout 1
Layout 2
Progress Bar - Layout 2
Layout 3
Progress Bar - Layout 3

Select discount tier

Below is the select discount tier option
(1) Cart price above X will apply to the discount tier when the cart has a value greater than the added value in the discount tier option.

Discount tier

Discount tier(s) will work as per the settings that have been selected from the Select discount tier option i.e. Cart price above X option.
→ Options included under Discount tier:

  • Cart price above X
  • Exclusion tags
  • Select Discount
  • Discount type
  • Discount name
  • Offer related text

Cart price above X can be used to set the price for applying the discount tier.
Exclusion tags Product(s) that have been added in the cart have tags matched from this field will be excluded from the tier condition.
Select Discount has two options 01) Discount and 02) Free Product. You can set a tier for a discount or for offer a free product to your customers.
Discount type has three options Free shipping, Percentage, and Fixed amount available for discounts.
Discount name will be the tag added to the card drawer as a discount.
Offer related text will show the message if the cart is required some amount or quantity to reach the discount tier.

Progress bar color

Progress bar color has three options to change the color

  • Filled color
  • Empty color
  • Discount offer text

Progress Bar Color

Discount tier success message

Discount tier success messages will only be visible when all discount tiers will meet their requirements added from the settings and finally after all tiers will be completed, you’ll see the success message.
Discount tier success message