Progress Bar Upsell customization.

First, click on 'Customize' on the left-side menu. Alternatively, in the Dashboard page, navigate to the 'App Setup' section and click on the 'Customize Cart' option. On the right side, you will see the 'Go to Customize' button. Click on the 'Go to Customize' button. 

There are two sections: the 'Widgets' section, where you can customize different widgets for your cart setup, and the 'Color Settings' section, where you can adjust the colors of your all widgets.

Color Settings

Go to the 'Color Settings' section, and then click on the 'Progress Bar' section to set the colors for the progress bar.

You can customize the appearance of the 'Progress Bar' to your liking.

Widgets

On the right side of this Customize page, you will find the 'Widgets' section. In this section, you can see 'Progress Bar Widget'. Click on the 'Progress Bar Widget'.

(1) Show Announcement bar

In the 'Show Announcement bar', click the eye icon to reveal/hide the 'Announcement bar'.

In the 'Show Announcement bar', you"ll see the 'Announcement bar title' text editor. This is where you can change the text for the Announcement bar title in the 'Progress Bar Upsell' widget. Feel free to change the text to fit your store better or match the language you prefer.

(2) Show timer bar

In the 'Show timer bar', click on the eye icon to reveal/hide the 'Show timer bar'.

Use this option to change the text displayed in the timer bar.

Note: Do not remove {{timer-value}}, as this value is used to show the timing. If you remove this value, the timer will not be displayed. Additionally, if you want to reset this value, simply copy the value below in the text editor and paste it into the text field. The timer will be reset.

To set the duration of your timer offer, enter the number of minutes in the field. The timer widget will automatically calculate and display the corresponding minutes and seconds remaining until the offer ends.

In the 'Timer Bar expire actions', there are four options available:

1. Reset Timer: The timer will start again and continue counting down.

2. Hide Timer: The timer will stop counting, and the timer widget will be hidden. The offer will remain available, but the timer display will be hidden.

3. Hide Upsell: The timer will expire, The progress bar upsell automatically hide itself.

4. Hide Timer & Show Message: The timer will stop counting, and a message will be displayed to inform the customer that the offer has expired.

After selecting 'Reset Timer,' the timer will start again and continue counting down, providing customers with the full duration of the offer.

After selecting 'Hide Timer,' the timer will stop counting, and the timer widget will be hidden. The offer will still be available, but the timer display will be hidden.

After choosing 'Hide Upsell,' when the timer expires, the Progress Bar Upsell will automatically hide.

After selecting 'Hide Timer & Show Message,' the timer will stop counting, and a message will be displayed to inform the customer that the offer has expired.

Next is 'Timer bar expire message', Use this option to edit the text shown when the timer bar expires.

In the 'Progress Bar Widget', you'll see the 'Progressbar discount target', there are two options available:

1. Cart Price: Choose this option to apply the discount value to the total cart price.

2. Cart Item: Choose this option to apply the discount value to each individual product added to the cart.

After selecting 'Cart Price,' the discount value will be calculated based on the total Cart Price.

After selecting 'Cart Item,' the discount value will be calculated based on the total cart items.

Next is the 'progress bar offer'. By default, it will add two offers: the first one is 'free shipping', and the second is a '5% discount'. You can modify them according to your needs and preferences. Additionally, you can add a new offer; the maximum limit to add new offers is five only.

Now, open the first default added offer. In this, you can see the 'Progress bar offer text.' This text will reflect in the progress bar offer name at the bottom of the progress bar. You can set the name according to your offer and language preference.

Next is 'Discount Option' field. there are four options available:

1. No Discount: Choose this option if you don't want any discount applied when you reach the offer value you've set.

2. Discount: Choose this option to apply a discount value to the cart when the offer value is reached.

3. Free Product (BOGO offer): Choose this option to apply a free product to the cart when the offer value is reached.

4. Product Discount: Choose this option to apply a discount to the product when the offer value is reached.

After selecting 'No Discount,' no discount will be applied when customer reach the offer value you've set. This means that the progress bar offer will be reached, but it won't trigger any specific discount.

After selecting 'Discount,' a discount value will be applied to the cart when the offer value is reached. This means that customers will receive a discount on their cart when they meet the conditions set in the progress bar offer.

After selecting 'Discount,' next, you will see a 'Discount type.' There are three available options:

1. Percentage: Choose this option to apply a percentage discount when the set value is reached.

2. Fixed Amount: Choose this option to apply a fixed discount amount when the set value is reached.

3. Free Shipping: Choose this option to automatically provide free shipping when the set value is reached.

After selecting 'Percentage' as the discount type, next is 'Discount value.' You can set the discount value as a percentage. Following that is 'Offer reach value,' where you can set the offer reach value based on cart price or cart items.

After selecting 'Fixed Amount' as the discount type, next is 'Discount value.' You can set the discount value as a percentage. Following that is 'Offer reach value,' where you can set the offer reach value based on cart price or cart items.

After selecting 'Free Shipping' as the discount type, next is 'Offer reach value,' where you can set the offer reach value based on cart price or cart items. 

Note: If you select the free shipping option, you won't need to do anything. We fetch your store's shipping rate data that you set in the shipping settings automatically. Also, if you haven't set any shipping rate in your store, the free shipping discount will not be applied.

After selecting 'Free Product,' you can choose the featured product in the 'Select product' field. This is the product that you want to offer to customers when they reach the set value. This featured product will be promoted as a free gift or reward for reaching the specified value, which can be a powerful incentive for customers to make a purchase.

Next is 'Set Quantity,' change the quantity value of the product to give as free. The default is set to '1', and you can change it according to your offer.

After selecting 'Product Discount' in the 'Discount Option,' you'll see 'Select product type.' There are two options available:

1. Any Product: Choose this option to apply a discount to any product in the entire store when the offer value is reached.

2. Specific Product: Choose this option to apply a discount to a selected product when the offer value is reached.

After selecting 'Any Product,' the discount will be applied to any product in the entire store when the offer value is reached. This means that customers can receive a discount on any product in your store once they meet the conditions set in the progress bar offer.

After selecting 'Specific Product,' you can choose the product to which you want to apply a discount when the offer value is reached and when the specific product is added to the cart.

Next is 'Apply discount type,' there are two options available.

1. All Products: Discounts will be applied to all your specified products separately.

2. Any one cheapest product: The discount will only apply to the cheapest product among the selected specific products.

Next is 'Product Qty.' Your offer discount will apply if the product quantity matches what you've set. The default is 1 quantity, so the offer discount will apply if the cart-added product quantity is 1 or more. You can increase the value according to your offer.

Next is 'Discount code name'. In this field, you can change the name of the discount code that will be visible after the customer accepts any offer.

Next is 'Offer Message.' You can use the text editor field. This text will appear at the top of the progress bar and serves as your offer title. It may show the remaining offer price or how much more the customer needs to spend to qualify for the offer. It will also let customers know how they can take advantage of the offer. 

Note: Please do not change the values in brackets as they are used to show the offer you have set.

Next is 'Progress Bar Offer Completed Message.' This text will appear when a customer accepts all the offers that you provide in your widget. It`s a congratulatory message that can help build customer loyalty and make them feel appreciated. Feel free to modify this message to make it more personalized and relevant to your brand. Use language that matches your brand`s tone and voice, and include any relevant branding or messaging.

in the 'Show confetti' checkbox. you can check the 'Show Confetti' checkbox. This will enable a congratulatory animation that appears when a customer accepts all the offers provided in your Progress Bar widget. It's a fun way to celebrate and acknowledge your customers when they take advantage of the offers you've set.

After that, click the 'Save' button, and your changes will appear in your store.