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 Placements de Yaco. Cliquez sur Ajouter la barre de progression (ou Ajouter un autre placement s’il en existe déjà un), puis sur l’élément de la page où la barre doit apparaître. Ce clic termine le placement : la barre s’affiche en aperçu et le formulaire s’ouvre. Cliquez sur Enregistrer pour la garder, ou sur Annuler pour l’abandonner ; rien n’est enregistré avant Enregistrer.
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.

Au clic, la barre reprend les marges latérales de l’élément pointé. Si cet élément va jusqu’au bord de l’écran, comme une image produit sur mobile, la barre s’aligne plutôt sur le contenu voisin, le titre du produit par exemple. Ces marges valent pour toutes les tailles d’écran : ajustez-les sous Mise en page dans le formulaire du placement si besoin.

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. Pendant ce choix, le menu se réduit à une ligne avec un bouton Annuler, pour laisser la page visible. Dans un tiroir panier étroit ou dans l’aperçu mobile de l’éditeur de thème, il se cale en bas ; faites glisser sa poignée vers le haut pour le passer en haut, ou vers le bas pour le replier sur sa barre de titre. Un clic sur la poignée ou le titre le replie ou le déplie.

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.
• Mise en page : l’espace extérieur et intérieur de chaque côté (haut, droite, bas et gauche, chacun réglé à part), et la Largeur : Pleine, ou Limitée à une largeur max en px, alignée à Gauche, au Centre ou à Droite. Reprendre du thème recalcule l’espacement et la largeur comme au placement de la barre, et garde l’encadré.
• Encadré : une couleur de Fond, une Bordure (épaisseur en px et couleur), un Arrondi et une Ombre (Aucune, Légère, Moyenne ou Forte) autour de la barre, pour ce placement seulement. Une couleur de bordure choisie avant l’épaisseur trace une bordure de 1 px ; videz la couleur ou mettez l’épaisseur à 0 pour retirer la bordure. Les couleurs et l’aspect de la barre elle-même restent dans son design.
• Classes CSS et CSS du conteneur : pour les développeurs, tout autre CSS. Mise en page et Encadré écrivent dans le même CSS du conteneur : un changement dans l’un se voit dans l’autre. Une ombre écrite à la main s’affiche Sur mesure (réglages pour développeurs).

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

Chaque placement utilise votre design par défaut, sauf si vous en choisissez un autre dans Design. Pour afficher la barre différemment dans le tiroir panier et sur la page produit, ajoutez un placement par emplacement et réglez son Filtre de paliers et sa Condition de visibilité : inutile de créer un second design. Créez-en un seulement si un placement doit avoir un autre style.

Dans l’éditeur de thème, le formulaire présente ces réglages avec des libellés courts, un par ligne : Type, Position, Élément, Visibilité, Templates, puis Paliers et Design pour une barre, ou Recommandation pour des recommandations. En dessous, Mise en page montre l’espacement sous forme de boîte : les champs extérieurs autour des champs intérieurs, chacun du côté qu’il règle. Survoler ou cliquer un champ allume ce côté sur la page : l’espace extérieur en orange, l’espace intérieur en vert. Saisissez un nombre en px, ou une valeur comme auto ou 2em. Encadré suit. Le nom du placement et l’interrupteur Actif sont en haut. Pour pointer un autre endroit, cliquez sur le bouton flèche (une flèche qui clique) à côté d’Élément, puis sur la page. La Mise en page (espacement et largeur max, y compris ceux écrits dans le CSS du conteneur) est alors recalculée pour le nouvel élément ; l’Encadré et les autres règles du CSS du conteneur restent. Classes CSS, CSS du conteneur et, pour des recommandations, ID d'intégration (Analytics) sont sous Réglages pour développeurs, replié en bas du formulaire ; la ligne sous ce titre dit ce qu’il contient. Supprimer est en bas à gauche, loin d’Annuler et d’Enregistrer. Annuler (ou la croix) remet un placement modifié dans son état enregistré.

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.
• Dans l’éditeur de thème, sur un thème sans placement, Reprendre les placements d’autres boutiques propose les mêmes placements. Ceux que vous cochez s’affichent dans la page en aperçu ; rien n’est enregistré avant de cliquer sur Importer. Si vous avez coché des placements vous-même et fermez le panneau sans les importer, l’app vous prévient d’abord : cliquez sur Quitter sans importer pour les abandonner.
• Dans l’éditeur de thème, si un import échoue, le panneau le signale et reste ouvert avec votre choix : cliquez sur Importer pour réessayer.
• 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 classes décochées dans Se cumule avec), 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.
• Au plan gratuit, il se termine par « Offres gérées avec Yaco Progress Bar par Yaco Studio », dans la langue du visiteur. Cette ligne est du texte simple, sans lien, et ne s’affiche pas non plus. Les plans payants, Starter compris, ne l’ajoutent pas.

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 sans la barre d’un test A/B. 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 : le lien Besoin d’aide ? Intégration gratuite sur mesure, en bas du menu, l’ouvre dans l’app. Il reste affiché pendant que vous choisissez l’emplacement de la barre.

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