Progress Bar

Progress bar allows you to show an offer you set from this widget like Free Shipping, Percentage, and Fixed 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 colour
  • 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. Let’s see this option result on the front side by an image screenshot.

→ Options in the title

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

Admin setting screenshot:

Title - Progress Bar

Output of 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 layout and the look of the progress bar.

  • Layout 1
  • Layout 2
  • Layout 3

→ Layout 1

Progress Bar - Layout 1

→ Layout 2

Progress Bar - Layout 2

→ Layout 3

Progress Bar - Layout 3

Select discount tier

There are two options for select discount tier

  • Cart price above X
  • Cart items above X

Cart price above X will apply the discount tier when the cart has value is greater than the added value in the discount tier option.

Cart item above X will apply the discount tier when the cart has a greater quantity added to the discount tier.

Discount tier

→ Discount tier(s) will work as per the settings has been selected from Select discount tier option so it might be from either Cart price above X or Cart items above X option.

Options included under Discount tier option

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

Cart price above X can be used to set price for applying the discount tier.
Exclusion tags Product(s) has been added in the cart has tag matched from this field will be excluded from the tier condition.
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 option to change the color

  • Filled color
  • Empty color
  • Discount offer text

Progress Bar Color

Disocunt tier success message

Discount tier success message will show 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