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 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:
Output of Title option
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
→ Layout 2
→ 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(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 has three option to change the color
- Filled color
- Empty color
- Discount offer text
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.
