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 progress bar 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.

If Shopify's theme inspector is on, the Yaco menu asks you to turn it off first: placement does not work while it is active.

Placement settings

Each placement has its own settings, in the theme editor or from the Theme integrations 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.

Reuse placements from another theme or store

• Import, in the Theme integrations 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: click Go to Product page template, then in Template › Product information click Add block and choose Yaco Progress Bar. For the cart page, use Go to Cart's page template and the Template › Subtotal section.
• 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.

For the checkout, see progress bar in checkout.

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. Most integrations are done the same day or the next business day.

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