Close
ProjectsProgress Bar shopify app by UTD
Discount in cart/minicart Privacy Policy
Progress Bar APP Privacy Policy

Progress Bar

Shopify app by UTD

App Description

The ability to increase your sales by adding gifts or free shipping to orders.

Our application allows you to add the functionality of receiving gifts to the online store.

The more the buyer buys, the more he gets.

The application is made in the form of a filling progress bar, which has checkpoints, upon reaching which free goods are added to the cart or delivery will be free, it all depends on the type of checkpoints that you create.

Our application does not store any personal data of buyers and sellers, so you don’t have to worry about them.

Improve your customer service and your sales!

Application functionality:

  • Filling progress bar, which clearly shows how much more you need to buy to get a gift
  • Ability to create up to 4 checkpoints with gifts or 1 checkpoint with free delivery and 3 gifts
  • Customize the widget as you like
  • Quick and easy integration
  • Intuitive user-friendly interface

Demo

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

  1. Add some items to your cart
  2. 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
  3. See how it works, go to checkout.

Installation guide

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

Video tutorial

  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.

Uninstallation guide

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

FAQ

How do checkpoints work?

Checkpoint — the point at which the buyer will receive a gift, free shipping or a discount.

It comes in 3 types:

 

Gift

The buyer receives a free product. The gift is created based on an existing product

In the ‘Progress bar’ section, there is a ‘Combine gifts’ checkbox that determines how many gifts the buyer will receive if you create several checkpints with gifts.

If the checkpoint is not active, the buyer will receive the maximum available gift.

If the checkpoint is active, the buyer will receive all the gifts that are available.

 

Free ship

The buyer will receive free shipping upon reaching the checkpoint

You can only create one checkpoint of this type

 

Discount

Upon reaching the checkpoint, the buyer will receive a discount. Set your own discount percentage. If there are several checkpoints with discounts in the progress bar, the buyer will receive the maximum available discount.

Upon reaching this checkpoint, a discount is applied to the order. You do not need to create discount codes, the application will do everything automatically.

 

By default, the application creates a checkpoint with free shipping from $100

 

How can I create checkpoint?

Go to the Progress bar section.

At the top of the page you will see a demo of your progress bar.

By default there are no checkpoints.

Just below that is the ‘Add new checkpoint’ section. To get started, enter the price at which the buyer will receive a gift.

Then select the type of checkpoint

Gift

The buyer receives a free product. The gift is created based on an existing product

Free ship

The buyer will receive free shipping upon reaching the checkpoint

Discount

Upon reaching the checkpoint, the buyer will receive a discount. Set your own discount percentage. If there are several checkpoints with discounts in the progress bar, the buyer will receive the maximum available discount.

Be careful when creating checkpoints, if you set a similar price for several checkpoints, they may overlap.

You can create up to 4 checkpoints.

To edit or delete a checkpoint, find it in your progress bar demo, then click on the edit icon next to the corresponding checkpoint.

 

I created a checkpoint and now I see a duplicate product with a zero price, what is it?

Don’t worry, this product is hidden in the store, you can’t buy it. This is a special product for our application and it will not be added to the cart until the conditions are met.

 

I installed the application, but the form did not appear. What should I do?

 

Common mistakes

Enable the application in the admin area.

Activate the plan.

 

For Script Tag API integration method

Make sure you select the correct selectors for the widget.

Also, check that you have checked the box next to the theme where you want to place the widget.

 

For online store v2.0

Check if you have added the widget in the theme editor.

Don’t forget press save button

 

 

 

When a gift is added to the cart, the page reloads, how can I do this without reloading?

 

Unfortunately, we cannot update the cart in real time, as the themes are different and the way the cart works is also different everywhere.

So we have created a ‘pgCartChanged’ event and fire it every time our application edits the cart.

Also in the admin panel there is a setting that disables page refresh when changing the cart.

Theme developers can subscribe to this event and update the cart when it fires.

For example: window.addEventListener(«pgCartChanged», () => { /* code that updates the cart */ })

 

Do you have questions?

Contact us. 

email — support@utdapp.tech