# How to show the progress bar and free gifts in Shopify checkout

> On Shopify Plus, add the Progress bar block in the checkout editor to show your tiers and let shoppers pick or remove their gifts during checkout.

Updated 2026-09-25 · https://www.yaco.studio/docs/checkout

## What you need first

- **Shopify Plus.** Shopify only lets apps customise checkout on Shopify Plus stores. On other plans, the bar shows in your store and cart, not in checkout.
- **A Yaco subscription that includes the checkout extension.** If it does not, a banner on the **Checkout** page says so; see [pricing](https://www.yaco.studio/pricing).

## Add the bar to checkout

Yaco Progress Bar offers two blocks in Shopify's checkout editor. Add each one separately.

1. In Yaco Progress Bar, open **Checkout** and click **Add to Checkout** in the **Integration** card. The checkout editor opens.
2. Add the **Progress bar** block, ideally in the **Order summary**.
3. Add the **Remove button** block under **Cart › Items in cart**. It puts a “Remove” link under the gift lines.
4. Save in the checkout editor.

Block names stay in English in every language. The **Integration** card then shows **Extension active** once the bar has rendered in a real checkout (**Extension not yet detected** until then), and **Remove button active** for the second block.

In the checkout editor, the **Progress bar** block has its own settings: the steps where it shows (**Add to Checkout**, **Add to Information**, **Add to Shipping**, **Add to Payment**, **Add to Review**; the first two are on by default) and two optional filters, **Show only these goals (comma-separated IDs)** and **Hide these goals (comma-separated IDs)**. Copy a tier's ID from the tier list in the app.

## Choose what the bar shows

On the **Checkout** page of the app:

- **Multi-bar layout**, for stores with several bars: **Stacked**, **One by one** or **Side by side**.
- **Elements visibility**: **Show border**, **Show goal completion message**, **Show final success message** (with **Success message alignment**), **Show goal names**, **Show prices**, **Show reached goals list**, **Show unreached goals list**.
- **Progress bar tone**: **Auto** or **Critical**.
- **Elements display order**: drag to reorder the success message, tier name, price, bar and tier list.

Click **Publish** to apply the changes.

## Let shoppers pick their gift at checkout

The **Gift selection** section sets how unlocked gifts appear. It applies to every gift tier, except tiers where the app does not add the gift itself.

- **How the list appears**: **Show the gift list** (default) lists the gifts right under the bar; **Show a button** folds them behind a button, like the “Choose a gift” button in your store. Its **Button label** is pre-filled in your store's main language and can be translated.
- **How each gift appears**: **Checkbox** (thumbnail, name and a box to tick) or **Add and remove buttons** (a larger card with an Add button that becomes Remove). With the second layout, a gift already taken disappears from the list and is given back from the “Remove” link of its line.
- **Show a « Remove » button in the order summary** (on by default): adds a “Remove” link under each line added by Yaco, gifts and paid options. It never appears on lines added by another app, or on tiers set to **Force to keep the gift in cart**. It needs the **Remove button** block.

Gift prices show struck through with “FREE”, in the shopper's checkout language. A gift taken in the store arrives already selected.

## Messages shoppers may see

- **“Gifts can no longer be changed here. Update your cart to change your choice.”** Shopify caps the number of cart changes an app can make in one checkout, then refuses the next ones. The shopper can go back to the cart or reload the checkout.
- **“This gift can't be delivered to your address.”** Shopify refused the gift line: with it, the cart has no shipping option left for that address. Check in Shopify, **Settings › Shipping and delivery**, that the gift product's shipping profile covers the zones where the tier is offered.

## The bar does not show in checkout

Check the store is on Shopify Plus, the **Progress bar** block is placed and saved, the current step is ticked in its settings, and the cart is eligible for at least one tier. If gifts disappear at checkout, see [gift removed](https://www.yaco.studio/docs/gift-removed).