Improve your customer service and your sales!

Application functionality:

• Fillable progress bar, which shows how much more you need to buy to get a gift.
• Create up to 4 checkpoints with gifts, discounts and free shipping in Progress.
• Sell more by create offers in widget “Buy this & Get that with discount 0-100%”.
• Quick and easy integration as well as complete freedom in customizing the styles
• You can add translations for any language and use custom code js/css inside.

See how the app works using the example of a store:

1. Go to the test store (Link: https://progress-bar-demo.myshopify.com/, Password: demo)
2. Add some items to your cart
3. Open the cart and look at the widget, it will show what you can get, buy more to see how the progress bar fills up and get a gift or free shipping
4. See how it works, go to checkout.

Preliminary steps:

1. Activate an app subscription if not already activated. Without an activated subscription, the widget will not appear in your store.
2. Turn on the application.
3. Select the integration method.

Note: Add widget via customizer (for Online store 2.0) — uses theme app extension for store integration. You can add a widget using the Theme Editor. Script Tag API — uses the ScriptTag API which uploads javascript code to the store. Can be installed in any place of the store, even in a mini cart.

Add widget via customizer

1. Activate the app and select ‘Add widget via customizer’
2. Go to ‘Online Store’ and click ‘Customize’.
3. Go to the shopping cart page.
4. Select Add block and look for the Progress bar application in the drop-down list.
5. Press ‘Save’ button. Done, widget added.

Add widget via Script Tag API

1. In the ‘general’ section select ‘Script Tag API’.
2. Click the ‘install application’ button and choose where you want to place the widget.
3. Select with the right mouse button where you want to display the widget. If you want to install it in the mini cart, open it first. With the left mouse button, you can navigate the store or open the mini cart.

Note: If the widget doesn’t look right, try selecting other elements or manually insert CSS selectors.

Manual adding widget using Script Tag API

Manual installation is done by inserting CSS selectors in the Selectors section (by ID- # test-block or class — .test-block). If the element to which you want to add the widget does not have a class or ID, then you can manually add a class or ID, or create a new element using the Code Editor. If you want to add to several places at once (for example, to the cart and the mini-cart), then you can specify several selectors, separating them with a comma.

Installation steps:

1. Using the code inspector in your browser, find the element where you want to add the widget.
2. Copy the required selector (class or ID).
3. Insert into ‘Container selector’ the selector of the element where you want to add the application widget.
4. Don’t forget to save your settings.

First, delete the checkpoints you created, then just delete the app from the store.

Do you have questions?

Contact us.

email — support@utdapp.tech