Showing the Spend-Tier Bar Outside the Cart Drawer

This article explains how to show the spend-tier progress bar on pages outside the Cart Drawer, such as product pages or the home page, and what it needs to work.

What the bar can and can't do

You can place the spend-tier bar on any page in your theme, in addition to the Cart Drawer. It cannot replace the Cart Drawer, and it cannot run inside your own custom cart drawer.

The spend-tier bar only renders when a Cart Drawer cart is published in Essential Cart Drawer. If no drawer is published, the bar does not appear anywhere, including on product pages.

Requirements

1. You must have a Cart Drawer set up in Essential Cart Drawer.
2. That Cart Drawer must be published.
3. Spend Tiers must be configured in the app.

If these conditions aren't met, the bar won't mount, even if you've added it to a page.

Method 1: Theme app block

Use the theme app block called "Essential Spend Tiers" to add the bar through the theme editor.

Add the block

1. Go to your theme editor.
2. Select the section where you want the bar to appear, for example a product page section.
3. Add the app block named "Essential Spend Tiers".
4. Save the theme.

Method 2: Paste the snippet

If you're editing theme code directly, paste this snippet where you want the bar to appear:

Place this div anywhere in your theme's HTML. It works the same as the theme app block.

Testing

1. Make sure your Cart Drawer is published.
2. Confirm Spend Tiers is configured with your thresholds.
3. Visit the page where you added the block or snippet.
4. Add a product to your cart and check that the bar updates.

Limitations

The bar on a product page and the bar in the Cart Drawer are the same feature. They share the same Spend Tiers configuration and both require a published Cart Drawer to work.