Où placer la barre de progression dans un thème Shopify : tiroir panier, page panier, page produit

Placer la barre dans le tiroir panier ou ailleurs

La méthode recommandée est Placer la barre de progression : vous désignez l’endroit dans votre thème, et l’app le retient. Elle fonctionne pour le tiroir panier (cart drawer), la page panier, la page produit ou toute autre partie du thème.

1. Dans l’app, ouvrez Intégration au thème, onglet Placements.
2. Sous Thèmes, vérifiez le thème sur lequel vous travaillez (Choisir un thème). Le thème en ligne porte le badge (thème actuel). Les placements sont enregistrés par thème.
3. Dans la section Activation de l’app embed, cliquez sur Activer si l’app embed n’est pas encore actif, activez Yaco Progress Bar dans l’éditeur de thème et enregistrez.
4. Dans Tiroir panier et placements généraux, cliquez sur Placer la barre de progression (ou Gérer les placements quand un placement existe déjà).
5. L’éditeur de thème s’ouvre avec le menu Intégrer la barre de progression Yaco. Cliquez sur Ajouter la barre de progression, puis sur l’élément de la page où la barre doit apparaître.
6. Ajustez le formulaire si besoin, puis cliquez sur Enregistrer.

Pendant que vous pointez la page, l’app encadre l’élément sous le curseur et trace un trait à l’endroit où la barre sera insérée. Vous pouvez laisser l’inspecteur de thème de Shopify actif : ses contours sont masqués pendant le placement.

Pour placer la barre dans le tiroir panier, ajoutez d’abord un produit au panier et ouvrez le tiroir, puis cliquez sur Ajouter la barre de progression : une fois le placement lancé, un clic sur la page choisit un placement et n’ouvre plus rien.

Réglages d’un placement

Chaque placement a ses propres réglages, dans l’éditeur de thème ou depuis la liste Placements de ce thème de la même page :

• Élément de référence et Position par rapport à l’élément de référence : où va la barre (avant, après, premier enfant, dernier enfant ou à la place de l’élément).
• Condition de visibilité : toujours visible, seulement quand le panier contient des articles, ou seulement quand il est vide.
• Afficher sur les templates : limiter le placement à certains modèles de page. Tous par défaut.
• Filtre de paliers : afficher tous les paliers, seulement certains, ou en masquer certains pour ce placement.
• Design : le design utilisé pour ce placement.
• Classes CSS et CSS du conteneur : affiner les marges autour de la barre.

Un placement se coupe sans être supprimé avec Désactiver l’intégration.

Masquer la barre quand le panier est vide

Choisissez, dans la Condition de visibilité, l’option qui n’affiche la barre que quand le panier contient des articles : la barre reste masquée tant que le panier est vide et apparaît dès qu’un produit est ajouté.

• Barre posée avec Placer la barre de progression : ouvrez le placement depuis Placements de ce thème et choisissez When the cart contains items dans sa Condition de visibilité (dans l’éditeur de thème, Quand le panier contient des articles).
• Barre ajoutée avec le bloc d’app Yaco progress bar : dans l’éditeur de thème, sélectionnez le bloc, choisissez Quand le panier contient des articles dans sa Condition de visibilité, puis cliquez sur Enregistrer.

La condition compte les articles du panier, pas la progression vers un palier : un palier à seuil 0 reste lui aussi masqué jusqu’au premier ajout. L’option When the cart is empty (Quand le panier est vide dans le bloc) fait l’inverse, pour un message réservé aux paniers vides.

Reprendre des placements d’un autre thème ou d’une autre boutique

• Importer, dans la carte Placements de ce thème, copie les placements d’un autre thème de cette boutique, ou d’une autre boutique où vous utilisez Yaco avec le même compte Shopify. Une boutique apparaît dès que vous y avez ouvert Yaco avec ce compte. Un placement déjà utilisé sur le thème n’est jamais ajouté deux fois.
• Quand d’autres boutiques équipées de Yaco utilisent le même thème dans la même version, un encart placements prêts pour votre thème propose leurs placements. Ils sont anonymisés et marqués Même version ou Version proche. Cochez ceux qui vous intéressent et vérifiez le résultat.
• Quand vous dupliquez un thème dans Shopify, ses placements sont recopiés automatiquement sur le nouveau thème.

Méthodes alternatives

L’onglet Méthodes alternatives regroupe les autres façons d’ajouter la barre :

• Page produit et page panier : les blocs d’app de l’éditeur de thème. Pour Yaco progress bar et Yaco recommandations, cliquez sur Ajouter à la page produit ou Ajouter à la page panier : l’éditeur de thème s’ouvre avec le bloc déjà ajouté à la page, il ne reste qu’à cliquer sur Enregistrer. Chaque bloc affiche son statut sur votre thème publié, par exemple Bloc d’application · 1 actif. Dans les réglages du bloc Yaco recommandations, l’ID de recommandation choisit les recommandations affichées (vide = par défaut). Dans les réglages du bloc Yaco progress bar, cochez par leur nom les paliers à afficher dans Paliers, et choisissez le design par son nom dans Design (vide = design par défaut). Le Filtre de paliers décide si les paliers cochés sont les seuls affichés ou ceux masqués ; sur Afficher tous les paliers, les cases cochées sont ignorées. La Condition de visibilité masque le bloc selon le panier, sur toutes les pages où il est posé ; dans l’éditeur de thème, un bloc masqué apparaît sous forme de cadre pointillé pour rester sélectionnable. Le cadre indique pourquoi la barre est masquée : barre désactivée dans l’app, aucun palier créé, aucun palier ne s’appliquant à l’aperçu, aucun des paliers cochés ne s’appliquant (Filtre de paliers), ou condition de visibilité. CSS du conteneur, sous Couleurs et CSS, ajoute vos propres déclarations CSS au conteneur du bloc, comme le CSS du conteneur d’un placement ; elles s’appliquent même quand un design est choisi.
• Je suis développeur : copiez la ligne de code avec Copier et collez-la dans n’importe quel template Liquid. Modifier le code ouvre l’éditeur de code du thème.
• Intégration auto au tiroir panier (Haut du tiroir panier ou Bas du tiroir panier) : une ancienne méthode, marquée Obsolète, qui ne fonctionne pas sur tous les thèmes. Préférez Placer la barre de progression. Cette section n’apparaît que si votre boutique l’utilise encore : une fois les deux cases décochées et enregistrées, elle disparaît.

Pour le checkout, voir barre de progression au checkout.

2:00

0:58

Ce que lisent les lecteurs d’écran et les assistants IA d’achat

Sur chaque page où l’app embed est actif, Yaco Progress Bar ajoute un résumé des offres en cours, destiné aux lecteurs d’écran et aux assistants IA qui parcourent votre boutique pour un client. Ce résumé n’est pas affiché et ne modifie pas l’apparence de la page. Il est présent même quand le tiroir panier est fermé.

• Il ne liste que les paliers auxquels le visiteur a droit : le marché, le pays, les dates et les règles client de chaque palier s’appliquent comme sur la barre.
• Pour chaque palier, il donne son nom, les cadeaux offerts avec leur prix normal, son seuil et l’avancée du panier, ou indique que le palier est débloqué.
• Quand un palier a une date de fin, il la donne dans le fuseau horaire de votre boutique. Le palier quitte le résumé à sa fin, même sur une page restée ouverte.
• Quand un palier est réservé à certains pays, il les nomme. Quand il est limité par marché, il nomme le pays du visiteur. Un assistant qui navigue depuis un pays ne promet alors pas l’offre à un client d’un autre pays.
• Quand un palier de remise ou de cadeau ne se combine avec aucune autre remise (les trois icônes de combinaison désactivées), il indique que l’offre n’est pas cumulable avec les codes promo. Sinon, il ne dit rien du cumul : le code doit aussi l’autoriser.
• Quand une barre ne compte qu’une partie du panier (Filtrage des articles du panier ou Type d’achat), il le dit et nomme les produits ou collections qui comptent, ou qui ne comptent pas. Un assistant ne promet alors pas d’avancée avec un produit qui ne fait pas progresser le palier.
• Il suit le panier, comme la barre, et se termine par la date de votre dernier enregistrement de la barre.

La barre elle-même s’annonce comme une barre de progression, avec le palier en cours et le montant du panier rapporté à son seuil.

Il n’y a rien à régler. Il n’y a pas de résumé quand la barre est désactivée, quand aucun palier ne concerne le visiteur, ni pour les visiteurs du groupe témoin (holdout) d’un test A/B de la barre. Un assistant qui télécharge la page sans l’ouvrir dans un navigateur ne voit pas ce résumé.

Demander une intégration sur mesure gratuite

Si vous ne trouvez pas le bon endroit, cliquez sur Contactez-nous dans le bandeau Besoin d’aide pour placer la barre de progression sur votre thème ?. L’équipe Yaco place la barre pour vous, gratuitement. Ajouter votre Code de demande de collaboration est facultatif mais accélère le traitement : Shopify vous transmet alors notre demande de collaboration, et une fois que vous l’avez acceptée (depuis l’e-mail de Shopify, ou dans Paramètres › Utilisateurs), nous pouvons ouvrir votre boutique, même protégée par un mot de passe. Sauf indication contraire, la barre est placée dans votre tiroir panier, juste sous son en-tête ; demandez-nous un autre endroit si vous préférez, par exemple au-dessus du bouton de paiement. La plupart des intégrations sont faites le jour même ou le jour ouvrable suivant.

Depuis l’éditeur de thème, le menu de Yaco propose la même demande : Demander une intégration gratuite sur mesure l’ouvre dans l’app.

Si la barre est placée mais reste invisible, lisez la barre ne s’affiche pas ou problèmes de tiroir panier.