How to show the progress bar and free gifts in Shopify 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.

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.