Close
ProjectsProgress Bar shopify app by UTD

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

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.

 

 

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.

 

 

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

 

 

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.

 

 

How to create an order?

 

To create an offer, use the navigation menu to go to the «Progress bar», select the «Offers» tab and click on the plus icon.

Next, select two products, set a discount and click on the «Save» button.

 

 

How do offers work?

 

You can also add offers in our application.

You need to select the product that the user should buy and the product that the user will receive at a discount. The discount is also set in the offer settings.

In the widget, when you click on the `Add to cart` button, both products are added to the cart and the page is reloaded.

 

Rules for the operation of offers

  • If the cart contains both products from an offer or one of the products is out of stock, then the offer will not be displayed in the grid of other offers.
  • If you remove the «gift», then the offer will reappear in the grid of other offers.
  • If you delete the «main product», then the «gift» will be deleted along with it.
  • If you increase the amount of «gift» in the cart by more than 1, then the page will reload and return the amount of «gift» to 1.
  • If you add the «main product» of the offer from another place (for example: the product page), then the «gift» will not be added. «gift» will be added to the cart only if you add it through the «Add to cart» button in the widget.

 

 

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 */ }).

 

 

How can I test my application in the development store?

 

Select and confirm a plan. For development stores, the subscription will be test and you will not be charged.

 

 

Can I change the appearance of the widget?

 

Yes it is possible.
Go to the Progress bar section, there you will find a lot of appearance settings.
We also provide the ability to add custom CSS, to do this, go to the custom CSS section.

 

 

Does the application store any user data?

 

No. Our application only processes products. It also creates a Draft order for adding free gifts.

 

 

Do you have questions?

Contact us. 

email — support@utdapp.tech