How to install Yaco Progress Bar on a Shopify store

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 three steps and an optional fourth one. Follow them in order.

Step	What it does	Button
1. Configure your goals & discounts	Open the list of tiers to check or edit them: the step is ticked once you have opened it	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. Choose a plan (optional)	See where your free trial stands, or pick a paid plan	See plans

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:. Click Review goals to open the list and check them.

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.

1. In the Setup Guide, click Enable app embedding. The theme editor opens on the app embeds.
2. Turn on Yaco Progress Bar.
3. 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.

Check your integration status

Below the Setup Guide (right below the welcome message once the guide is closed), the Integration status card stays on the Home page. The card has one row per place, Storefront (your published theme) then Checkout, and one column per feature, Progress bar and Recommendations. Under Storefront, the App embed badge shows whether the app embed is on:

• Storefront: on the App block line, the blocks you place yourself in the theme editor, with the number of places each one is used, for example 2 active. On the Yaco placements line, the integrations the app adds to your theme, managed from the Placements tab of Theme integration, for example 2 integrations. Hover a badge to see the list of integrations, the automatic cart drawer one included; click it to open the Placements tab.
• Checkout: a single line, the blocks you place in the checkout editor, for example 1 active.

A green badge means it is done. App embed off shows in yellow, not placed under Progress bar on the Yaco placements line in orange: a step is missing. A grey badge (not placed) is not an error: the bar can show through the app embed and the Yaco placements without any app block, and recommendations are optional. Click the App embed badge to open the theme editor on the app embed. Click any other badge to open the page that handles it: the Alternative methods tab of Theme integration for the App block line, its Placements tab for the Yaco placements line, Checkout for the progress bar at checkout, Recommendations for recommendations at checkout.

Choose a plan (optional)

The free plan starts on its own when you install the app: the bar shows on your store as soon as the app embed is on and the bar is placed. The Setup Guide reads 3 of 3 tasks completed without this fourth step, which carries an Optional badge.

The step shows where your 14-day trial with all your tiers stands: it starts the first time your bar shows on your store, then the step counts the days left. After the trial, the free plan keeps 1 active tier. Click See plans to compare plans. See subscription.

If the step shows Needed to show your bar, your store has no plan yet, which can happen on an older installation: click See plans, then Activate on the Free card.

Once the bar is placed, 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.