# Afficher la barre de progression et les cadeaux offerts dans le checkout Shopify

> Sur Shopify Plus, ajoutez le bloc Progress bar dans l’éditeur de checkout pour afficher vos paliers et laisser le client choisir ou retirer ses cadeaux.

Mis à jour le 2026-09-25 · https://www.yaco.studio/fr/docs/checkout

## Les prérequis

- **Shopify Plus.** Shopify réserve la personnalisation du checkout aux boutiques Shopify Plus. Sur les autres forfaits, la barre s’affiche sur la boutique et dans le panier, pas dans le checkout.
- **Un abonnement Yaco qui inclut l’extension checkout.** Si ce n’est pas le cas, un bandeau de la page **Checkout** vous le signale ; voir les [tarifs](https://www.yaco.studio/fr/tarifs).

## Ajouter la barre au checkout

Yaco Progress Bar propose deux blocs dans l’éditeur de checkout de Shopify. Ajoutez-les séparément : poser l’un ne pose pas l’autre.

1. Dans Yaco Progress Bar, ouvrez **Checkout** et cliquez sur **Ajouter au Checkout** dans la carte **Intégration**. L’éditeur de checkout s’ouvre.
2. Ajoutez le bloc **Progress bar**, idéalement dans le **Résumé de la commande**.
3. Ajoutez le bloc **Remove button** sous **Panier › Articles dans le panier**. Il ajoute un lien « Retirer » sous les lignes cadeaux.
4. Enregistrez dans l’éditeur de checkout.

Les noms des blocs restent en anglais dans toutes les langues. La carte **Intégration** affiche ensuite **Extension active** dès que la barre s’est affichée dans un vrai checkout (**Extension non détectée** d’ici là), et **Bouton Retirer actif** pour le second bloc.

Dans l’éditeur de checkout, le bloc **Progress bar** a ses propres réglages : les étapes où il s’affiche (**Add to Checkout**, **Add to Information**, **Add to Shipping**, **Add to Payment**, **Add to Review** ; les deux premières sont actives par défaut) et deux filtres facultatifs, **Show only these goals (comma-separated IDs)** et **Hide these goals (comma-separated IDs)**. L’identifiant d’un palier se copie depuis la liste des paliers dans l’app.

## Choisir ce que la barre affiche

Sur la page **Checkout** de l’app :

- **Disposition multi-barres**, pour les boutiques à plusieurs barres : **Empilé**, **Un par un** ou **Côte à côte**.
- **Visibilité des éléments** : **Afficher la bordure**, **Afficher le message de réalisation du goal**, **Afficher le message de succès final** (avec **Alignement du message de succès**), **Afficher les noms des goals**, **Afficher les prix**, **Afficher la liste des goals atteints**, **Afficher la liste des goals non atteints**.
- **Tonalité de la barre** : **Auto** ou **Critique**.
- **Ordre d’affichage des éléments** : glissez-déposez message de succès, nom du palier, prix, barre et liste des paliers.

Cliquez sur **Publier** pour appliquer les changements.

## Laisser le client choisir son cadeau au checkout

La section **Choix des cadeaux** règle l’affichage des cadeaux débloqués. Elle vaut pour tous les paliers cadeaux, sauf ceux où l’app n’ajoute pas le cadeau elle-même.

- **Affichage de la liste** : **Afficher la liste des cadeaux** (par défaut) liste les cadeaux juste sous la barre ; **Afficher un bouton** les replie derrière un bouton, comme le bouton « Choisir un cadeau » de la boutique. Son **Libellé du bouton** est pré-rempli dans la langue principale de la boutique et se traduit.
- **Affichage d’un cadeau** : **Case à cocher** (vignette, nom et case à cocher) ou **Boutons Ajouter et Retirer** (une carte plus grande avec un bouton Ajouter qui devient Retirer). Avec cette seconde présentation, un cadeau déjà pris disparaît de la liste et se rend depuis le lien « Retirer » de sa ligne.
- **Afficher un bouton « Retirer » dans le récapitulatif de commande** (actif par défaut) : ajoute un lien « Retirer » sous chaque ligne posée par Yaco, cadeaux et options payantes. Il n’apparaît jamais sur les lignes d’une autre app, ni sur les paliers réglés sur **Forcer à garder le cadeau dans le panier**. Il nécessite le bloc **Remove button**.

Le prix d’un cadeau s’affiche barré avec « OFFERT ». Ces mentions suivent la langue du checkout du client et ne se modifient pas. Un cadeau pris sur la boutique arrive déjà sélectionné.

## Les messages que le client peut voir

- **« Les cadeaux ne sont plus modifiables ici. Revenez au panier pour changer votre choix. »** Shopify plafonne le nombre de changements de panier qu’une app peut faire dans un même checkout, puis refuse les suivants. Le client peut revenir au panier ou recharger le checkout.
- **« Ce cadeau ne peut pas être livré à votre adresse. »** Shopify a refusé la ligne cadeau : avec elle, le panier n’a plus aucune option de livraison pour cette adresse. Vérifiez dans Shopify, **Paramètres › Expédition et livraison**, que le profil d’expédition du produit cadeau couvre les zones où le palier est proposé.

## La barre ne s’affiche pas au checkout

Vérifiez dans l’ordre : la boutique est sur Shopify Plus ; le bloc **Progress bar** est posé et enregistré ; l’étape en cours est cochée dans les réglages du bloc ; la carte **Intégration** indique **Extension active** ; le panier est éligible à au moins un palier. Si des cadeaux disparaissent au checkout, voir [cadeau retiré](https://www.yaco.studio/fr/docs/cadeau-retire).