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 Yaco Placements menu. Click Add progress bar (or Add another placement once a placement exists), then click on the element of the page where the bar should appear. The click ends placement: the bar shows as a preview and the form opens. Click Save to keep it, or Cancel to discard it; nothing is saved before Save.
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.

When you click, the bar takes the side spacing of the element you pointed at. If that element runs to the edge of the screen, like a product image on mobile, the bar lines up with the content next to it instead, the product title for example. The spacing applies on every screen size: adjust it under Layout in the placement form if needed.

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. While you choose, the menu shrinks to one line with a Cancel button so the page stays visible. In a narrow cart drawer or in the theme editor's mobile preview, it docks at the bottom; drag its handle up to move it to the top, or down to fold it to its title bar. Click the handle or the title to fold or unfold it.

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.
• Layout: the outside and inside spacing on each side (top, right, bottom and left, each set on its own), and the Width: Full, or Limited to a max width in px, aligned Left, Center or Right. Reset from theme recalculates the spacing and width as when you placed the bar, and keeps the frame.
• Frame: a Background color, a Border (width in px and color), a Corner radius and a Shadow (None, Light, Medium or Strong) around the bar, for this placement only. A border color picked before its width draws a 1 px border; clear the color or set the width to 0 to remove the border. The colors and look of the bar itself stay in its design.
• CSS class names and Wrapper CSS: for developers, any other CSS. Layout and Frame write to the same Wrapper CSS, so a change in one shows in the other. A shadow written by hand shows as Custom (developer settings).

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

Every placement uses your default design unless you pick another one in Design. To show the bar differently in the cart drawer and on the product page, add one placement per spot and set its own Goal filter and Visibility condition: you don't need a second design. Create one only if a placement needs a different look.

In the theme editor, the form shows these settings with short labels, one per line: Type, Position, Element, Visibility, Templates, then Goals and Design for a bar, or Recommendation for recommendations. Below them, Layout shows the spacing as a box: the outside fields around the inside fields, each field on the side it sets. Hovering or clicking a field highlights that side on the page: outside spacing in orange, inside spacing in green. Type a number in px, or a value such as auto or 2em. Frame comes next. The placement name and the Active switch sit at the top. To point at another spot, click the pointer button (an arrow clicking) next to Element, then click the page. Layout (spacing and max width, including those written in Wrapper CSS) is then recalculated for the new element; Frame and the other Wrapper CSS rules stay. CSS class names, Wrapper CSS and, for recommendations, Integration ID (Analytics) are under Developer settings, folded at the bottom of the form; the line under that title lists what it holds. Remove sits at the bottom left, away from Cancel and Save. Cancel (or the cross) brings an edited placement back to its saved state.

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.
• In the theme editor, on a theme without placements, Reuse placements from other stores offers the same placements. The ones you check show on the page as a preview; nothing is saved until you click Import. If you checked placements yourself and close the panel without importing them, the app warns you first: click Leave without importing to discard them.
• In the theme editor, if an import fails, the panel says so and stays open with your choice: click Import to try again.
• 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 classes unticked in Combines with), 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.
• On the free plan, it ends with “Offers managed with Yaco Progress Bar by Yaco Studio”, in the visitor's language. This line is plain text, with no link, and is not displayed either. Paid plans, Starter included, do not add it.

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 group without the bar of an A/B test. 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: the Need help? Free custom integration link at the bottom opens it in the app. It stays there while you pick a spot for the bar.

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