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

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.

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é.