Where to place the progress bar in a Shopify theme: cart drawer, cart page, product page

Place the bar in the cart drawer or anywhere else

The recommended method is Place progress bar: you point at the spot in your theme, and the app remembers it. It works for the cart drawer, the cart page, the product page or any other part of the theme.

1. In the app, open Theme integration, tab Placements.
2. Under Themes, check the theme you are working on (Choose a theme). The live theme carries the badge (current theme). Placements are saved per theme.
3. In the App embed activation section, click Enable if the app embed is not on yet, turn on Yaco Progress Bar in the theme editor and save.
4. In Cart drawer & general placements, click Place progress bar (or Manage placements once a placement exists).
5. The theme editor opens with the menu Integrate Yaco progress bar. Click Add progress bar, then click on the element of the page where the bar should appear.
6. Adjust the form if needed, then click Save.

While you point at the page, the app outlines the element under the cursor and draws a line where the bar will go. You can leave Shopify's theme inspector on: its outlines are hidden during placement.

To place the bar in the cart drawer, add a product to the cart and open the drawer first, then click Add progress bar: once placement has started, clicks on the page choose a spot and no longer open anything.

Placement settings

Each placement has its own settings, in the theme editor or from the Placements on this theme list on the same page:

• Reference element and Position relative to the reference element: where the bar goes (before, after, first child, last child or in place of the element).
• Visibility condition: always visible, only when the cart contains items, or only when it is empty.
• Show on templates: limit the placement to some page templates. All templates by default.
• Goal filter: show all tiers, only some, or hide some on this placement.
• Design: which design this placement uses.
• CSS class names and Wrapper CSS: fine-tune the spacing around the bar.

A placement can be switched off without being deleted with Disable integration.

Hide the bar when the cart is empty

Set Visibility condition to When the cart contains items: the bar stays hidden while the cart is empty and appears as soon as a product is added.

• Bar placed with Place progress bar: open the placement from Placements on this theme and change its Visibility condition.
• Bar added with the Yaco progress bar app block: in the theme editor, select the block, change Visibility condition in its settings, then click Save.

The condition counts the items in the cart, not the progress toward a tier: a tier with a threshold of 0 stays hidden too until a product is added. When the cart is empty does the opposite, for a message meant for empty carts only.

Reuse placements from another theme or store

• Import, in the Placements on this theme card, copies the placements of another theme of this store, or of another store where you use Yaco with the same Shopify account. A store shows up once you have opened Yaco on it with that account. Placements already used on the theme are never added twice.
• When other Yaco stores run the same theme at the same version, a card placements ready for your theme offers their placements. They are anonymized, and badged Same version or Close version. Check the ones you want and review the result.
• When you duplicate a theme in Shopify, its placements are copied to the new theme automatically.

Alternative methods

The Alternative methods tab covers other ways to add the bar:

• Product page & Cart page: the app blocks of the theme editor. For Yaco progress bar and Yaco recommendations, click Add to product page or Add to cart page: the theme editor opens with the block already added to the page, you only have to click Save. Each block shows its status on your published theme, for example App block · 1 active. In the Yaco recommendations block settings, Recommendation ID picks which recommendations to show (empty = default). In the Yaco progress bar block settings, tick the tiers to show by name in Goals, and pick the design by name in Design (empty = default design). Goal filter decides whether the ticked tiers are the only ones shown or the ones hidden; on Show all goals, the ticks are ignored. Visibility condition hides the block depending on the cart, on every page where it is placed; in the theme editor, a hidden block shows as a dotted frame so you can still select it. The frame says why the bar is hidden: bar turned off in the app, no tier created, no tier applying to the preview, none of the ticked tiers applying (Goal filter), or the visibility condition. Wrapper CSS, under Colors & CSS, adds your own CSS declarations to the block's container, like the Wrapper CSS of a placement; they apply even when a design is selected.
• I'm a developer: copy the line of code with Copy to clipboard and paste it into any Liquid template. Edit code opens the theme code editor.
• Auto Cart drawer integration (Top of Cart drawer or Bottom of Cart drawer): an older method, marked Deprecated, which does not work on all themes. Prefer Place progress bar. This section only shows if your store still uses it: once both boxes are unticked and saved, it disappears.

For the checkout, see progress bar in checkout.

2:00

0:58

What screen readers and AI shopping assistants read

On every page where the app embed is on, Yaco Progress Bar adds a summary of the current offers for screen readers and for AI assistants that browse your store on a shopper's behalf. The summary is not displayed and does not change how the page looks. It is there even while the cart drawer is closed.

• It lists only the tiers the visitor is entitled to: the market, country, dates and customer rules of each tier apply as they do on the bar.
• For each tier, it gives its name, the gifts it offers with their regular price, its threshold and how far the cart is from it, or that the tier is unlocked.
• When a tier has an end date, it gives that date in your store's time zone. The tier leaves the summary when it ends, even on a page left open.
• When a tier is limited to some countries, it names them. When it is limited by market, it names the visitor's country. An assistant browsing from one country then does not promise the offer to a shopper in another.
• When a discount or gift tier combines with no other discount (all three combination icons off), it says the offer cannot be combined with discount codes. Otherwise it says nothing about combinations: a code has to allow them too.
• When a bar only counts some of the cart (Cart item filtering or Purchase type), it says so and names the products or collections that count, or that do not. An assistant then does not promise progress with a product that does not move the tier.
• It follows the cart, like the bar, and ends with the date you last saved the bar.

The bar itself is announced as a progress bar, with the tier in progress and the cart amount against its threshold.

There is nothing to set up. There is no summary when the bar is switched off, when no tier applies to the visitor, or for visitors in the holdout group of an A/B test on the bar. An assistant that only downloads the page without opening it in a browser does not see the summary.

Ask for a free custom integration

If you cannot find the right spot, click Contact us in the banner Need help placing the progress bar on your theme?. The Yaco team places the bar for you, for free. Adding your Collaborator request code is optional but speeds things up: Shopify then passes on our collaborator request, and once you accept it (from Shopify's email, or in Settings › Users), we can open your store, even if it is password-protected. Unless you tell us otherwise, the bar goes in your cart drawer, just under its header; ask for another spot if you prefer, for example above the checkout button. Most integrations are done the same day or the next business day.

From the theme editor, the Yaco menu offers the same request: Request a free custom integration opens it in the app.

If the bar is placed but stays invisible, read bar not showing or cart drawer issues.