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. Your 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 each person who opened Yaco on your store, in their language (to your store's email address if nobody has opened it yet). 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, and every active automatic discount with a minimum to reach (an amount or a number of items), Buy X Get Y included. Each discount becomes its own tier, so the bar matches what your checkout already gives. A Buy X Get Y discount that gives one item of a single product once an amount is spent ("spend $100, get the tote free" or "$20 off the tote") becomes a Free product tier: the bar adds that product to the cart when the amount is reached, and your Shopify discount still sets its price (Use my Shopify discount). Other Buy X Get Y discounts (a number of items to buy, several products or a collection to choose from) become a tier that only shows progress. A discount limited to some products gets its own bar. A discount reserved to a customer segment or to specific customers is imported only if the app already has access to your customers, which it only asks for later: at installation, it is usually skipped. In that case, the Home page lists these discounts: click Allow customer access and add, confirm in Shopify, and the app adds them as tiers shown only to those customers. The support team can also import them later. Discounts created by other apps are not imported: the app can't read their conditions. The first step of the Setup Guide lists the tiers 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.

Imported tiers follow their discount

A tier imported from an automatic discount stays linked to it. When you edit the discount in Shopify (minimum amount, value, products or collections, offered product, eligible customers, dates), the tier follows within a few seconds, and the bar on your store with it. If you changed a setting of the tier yourself in the app (its amount, its name or texts, its dates, its bar, its offered product), the app keeps your change and no longer overwrites that setting; the other settings keep following the discount. Deactivating the discount in Shopify gives it an end date: the tier stops showing at that date.

In the tier, a banner reads Linked to your Shopify discount "…", with a button to open the discount in Shopify. The discount choice of the tier reads Use my Shopify discount (your discount gives the reward, the tier shows it) or Let Yaco manage the discount (the app creates its own discount, with the settings behind the More features badge). When you switch to Let Yaco manage the discount, the app asks what to do with your discount: keep Turn off "…" in Shopify when I save checked so customers aren't offered the reward twice. Nothing is deleted, and the app remembers the discount's dates. The box is unchecked by default when the tier doesn't reach every customer of your discount (markets, traffic source, cart conditions), and locked when another tier still uses the discount. If you keep your discount on, the warning Your discount "…" is still active stays on the tier until you turn it off in Shopify. A tier managed by Yaco no longer follows your discount. Switching back to Use my Shopify discount removes the app's discount when you save, and offers to turn yours back on: with its start and end dates from before if the app turned it off, with no end date otherwise.

If you delete the discount in Shopify, the tier is not deleted: the app turns it off so your bar doesn't promise a discount that checkout no longer applies, and a warning shows on the tier, with a Shopify discount deleted badge in the list of tiers. From the tier, click Let Yaco create the discount to switch it back on with a discount of the same value created by the app (percentage or fixed amount discounts), or Unlink from the Shopify discount to keep it as it is and manage it yourself. If the discount becomes reserved to customers the tier can't target, the tier is turned off the same way. A tier that doesn't follow its discount was imported before this link existed, or created by hand: edit it in the app.

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.

If your published theme loses the app embed after it was switched on, for example when you publish another theme, the bar no longer shows. The Home page then opens the Setup Guide again, even if you had closed it, on the Enable in Shopify step. In each browser, this happens each time a theme without the app embed is published: if you close it again, it stays closed until you publish another theme.

Choose how the configuration loads (optional)

In the app embed settings, Configuration source has two options:

• After page load (recommended), the default: pages load as fast as without the app, and the bar gets its configuration from Yaco once the page has loaded.
• In the page (heavier page): the configuration is written into every page. If your gift products have hundreds of variants, it can add up to 0.3 s to the loading of each page.

Keep After page load in most cases. Choose In the page only if you sell to B2B buyers and want the gift list to show their catalog price: with After page load, it shows the public price. If you turned on the app embed before November 2026, the setting may still be on In the page: switch it in the app embed settings.

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 other stores already placed the bar on the same version of your theme, the app places it for you at installation. The step then reads Check the integration in the main theme: click Check in the theme editor to see where the bar shows, and move it if needed. The step gets checked once you have opened the theme editor from the Setup Guide.

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, plus the lines of code pasted into your theme with the I'm a developer method, for example 2 integrations. The count includes every copy of that code found in your published theme, one per occurrence. Click a badge to see the list: the placements (the automatic cart drawer one included) open the Placements tab, the theme files open the theme code editor on that file. The theme code is checked again every 10 minutes: to see a change right away after pasting or removing the code, click Refresh at the bottom of the list.
• Checkout: a single line, the blocks you place in the checkout editor, for example 1 active. This line only shows on Shopify Plus stores: Shopify reserves checkout customization for Plus. If your Yaco plan doesn't include the checkout (free plan or Starter), a Premium badge shows instead: blocks placed in the checkout editor stay invisible to your customers until you move to Premium or Optimize.

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, the list of integrations for the Yaco placements line, Checkout for the progress bar at checkout, Recommendations for recommendations at checkout.

Your 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. You don't have to pay to complete this step: it gets checked once you open See plans, the page that explains your trial and what changes after it. The Setup Guide then reads 4 of 4 tasks completed. Opening the tier list or See plans checks these steps for your whole team, on every browser. On a development store or a password-protected storefront, the step reads that your bar shows without a subscription: your trial starts once your store is open to the public.

The step shows where your 14-day trial with all your tiers stands. The trial is a bonus on top of the free plan: it starts the first time your bar shows on your store, as long as you have at least two active tiers (with one tier, the step asks you to add a second one), 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.