Docs · Getting started

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.

· Markdown versionEN · FR · ES · DE

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.

  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.

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.

Read next

Ready to try it on your store?

Install Yaco Progress Bar, set your first tier, and the bar shows up in your cart in minutes. No developer, no pop-up.

Try for free14-day free trial · free plan forever