How to install Yaco Progress Bar on a Shopify store
Install the app, check the tiers it pre-fills from your offers, switch on the app embed, place the bar in your theme, then publish it with a plan.
Install the app and follow the Setup Guide
Install Yaco Progress Bar from the Shopify App Store, then open it: the Home page shows a Setup Guide with four steps. Follow them in order.
| Step | What it does | Button |
|---|---|---|
| 1. Configure your goals & discounts | Check or edit the tiers of the bar | Go to configuration |
| 2. Enable in Shopify | Switch on the app embed in your theme | Enable app embedding or Go to theme integration |
| 3. Integrate in the main theme | Choose where the bar appears (cart drawer, cart page, product page) | Place progress bar |
| 4. Publish the app | Choose a plan so the bar goes live for your customers | Go to subscription |
After a first installation, a welcome email is sent to your store's email address. It recaps the tiers found and the steps left.
Check the tiers created for you
At installation, the app looks at the offers already set up in your store: free shipping offers and automatic discounts with a minimum amount. It turns them into tiers, so the bar matches what your checkout already gives. The first step of the Setup Guide lists them under We pre-configured these goals from your shop:.
If no offer is found, the bar starts with an example free shipping tier. This example does not change your Shopify shipping rates: replace it with your real offer, or read free shipping bar to set one up. To create other rewards, see add a tier.
Switch on the app embed
The bar loads through an app embed. It must be switched on once per theme, in the Shopify theme editor.
- In the Setup Guide, click Enable app embedding. The theme editor opens on the app embeds.
- Turn on Yaco Progress Bar.
- Click Save in the top right corner of the theme editor.
You can also do it by hand: in the Shopify admin, open Online Store › Themes › Customize, click the App embeds icon in the left sidebar, turn on Yaco Progress Bar and save.
Place the bar in your theme
The app embed loads the bar, but you still choose where it shows. Click Place progress bar: the theme editor opens with the Yaco menu, and you click the spot on the page where the bar should appear, for example in the cart drawer. The full method, and the alternatives (app block on the product or cart page, a line of code for developers), are in place the bar in your theme.
If your theme is hard to integrate, the Theme integration page has a Contact us button to request a free custom integration from the Yaco team.
Publish the bar
Until a plan is active, the bar is only visible in the theme editor or in development stores. The fourth step shows the badge Live in Theme editor only as long as this is the case. Click Go to subscription and choose a plan to show the bar to your customers on your live theme. Plans and prices are on the pricing page.
Once published, open your store in a private window, add a product to the cart, and check that the bar appears and moves. If it does not, see bar not showing.
Something missing? Write to [email protected], or try it first in the demo.