Personnaliser l’apparence de la barre de progression du panier sans code

Où se trouvent les réglages de design

Tout ce qui est visuel se règle sur la page Design de Yaco Progress Bar, découpée en onglets, un par partie de la barre :

Onglet	Ce qu’il règle
Style des barres	Disposition des paliers et des barres, couleurs, hauteur, bordure, ombre, arrondi
Images	Icônes des paliers et leurs couleurs, atteints ou non
Nom du palier	Affichage des noms de paliers, taille et couleurs
Seuil	Le seuil affiché sous chaque palier
Marqueur	Les points ou images qui marquent chaque palier sur la barre
Montant	La valeur de progression et le total
Conteneur	Marges, espacement intérieur, bordure, fond, largeur maximale, CSS personnalisé
Message de succès	La ligne de message, et l’arrondi des montants ; voir message de succès
Interface cadeau	Le bouton cadeau, la modale cadeau et la liste de cadeaux, et le choix entre liste et bouton pour les barres de ce design ; voir modale cadeau
Presets	Des designs prêts à l’emploi pour démarrer

Un aperçu en direct suit vos changements ; rien n’arrive sur la boutique avant Enregistrer (voir enregistrer et publier).

Choisir la disposition des paliers

Dans Style des barres, Mode d’affichage des paliers fixe la façon dont les paliers se partagent la barre :

• Symétrique : chaque palier a la même largeur.
• Pleine largeur : les paliers s’étirent sur toute la largeur.
• Proportionnel : la largeur de chaque palier suit son seuil.
• Un par un : un seul palier s’affiche à la fois.

En Proportionnel, Proportions manuelles permet de fixer la part de la barre de chaque palier. Chaque palier part de 1 : la barre est partagée à parts égales tant que vous ne changez aucune valeur. Un palier à 0 ne prend aucune largeur : il se place au début de la barre et les autres paliers se partagent tout l’espace, y compris quand les barres sont enchaînées. Si tous les paliers valent 0, ils se partagent la barre à parts égales.

Proportionnel et Un par un demandent au moins 2 paliers actifs sur la même barre (des barres enchaînées comptent pour une seule). Avec un palier par barre, ces deux options sont grisées et un design déjà réglé sur l’une d’elles s’affiche en Symétrique.

Limiter les paliers affichés est désactivé par défaut : la barre montre tous les paliers. Cochez la case pour en montrer au plus 4 à la fois (Paliers affichés (max)), dont toujours au moins 2 paliers non atteints (Paliers non atteints affichés (min)). La fenêtre avance à mesure que les paliers sont débloqués. Elle ne s’applique pas en mode Un par un. Avec Enchaîner les barres de progression, la limite porte sur l’ensemble des barres enchaînées : une barre dont aucun palier n’est dans la fenêtre est masquée jusqu’à ce que la fenêtre l’atteigne. Cela vaut pour les barres enchaînées en montant et en poids, dont les paliers s’entrelacent par seuil. Des barres en quantité consécutives sont dessinées comme une seule barre mais gardent chacune leur limite, car elles peuvent compter des produits différents. Deux barres de ce type limitées à 4 peuvent donc montrer jusqu’à 8 paliers.

Le même onglet contient Alignement du prix et les couleurs de la barre ; hauteur, bordure, ombre et arrondi sont dans Options avancées.

Garder un dégradé fixe sur toute la barre

Par défaut, un dégradé choisi dans Couleur par défaut de la barre glisse avec le remplissage : quel que soit le panier, le bout du remplissage affiche toujours la dernière couleur. Cochez Dégradé fixe sur toute la barre pour peindre le dégradé une fois pour toutes sur toute la barre. Le remplissage le découvre à mesure que le panier grandit et, avec Enchaîner les barres de progression, un seul dégradé court de la première barre à la dernière. Les marqueurs atteints sans couleur atteinte propre prennent la couleur de la barre sous eux, même quand tous les paliers sont atteints : le réglage Couleur par défaut du marqueur tous atteints est masqué et ignoré dans ce mode. Un dégradé animé reste immobile dans ce mode.

Générer depuis les marqueurs construit ce dégradé pour vous : une couleur par palier, celle de son marqueur atteint (ou le fond de son image quand les images servent de marqueurs), placée à l’endroit du marqueur dans l’aperçu. Il faut au moins deux couleurs différentes. Le résultat s’ouvre dans l’éditeur de dégradé, où chaque couleur et chaque position restent réglables. Cliquez de nouveau après avoir ajouté ou déplacé un palier.

Empiler plusieurs barres dans un même bloc

Quand au moins deux barres ont des paliers, par exemple une barre au montant pour la livraison offerte et une barre en quantité pour « 3 achetés, 20 % de remise », Disposition des barres dans Style des barres fixe la façon dont elles se partagent le bloc :

• Côte à côte (par défaut) : les barres sont sur une même ligne, avec une seule ligne de message pour toutes.
• Empilées : chaque barre a sa ligne, l’une sous l’autre, avec son propre message : le texte de son prochain palier, puis son propre message de succès quand tous ses paliers sont atteints (voir message de succès).

Espace entre les barres règle l’écart entre les lignes empilées (16 px par défaut). Avec Enchaîner les barres de progression coché, les barres consécutives du même type (montant, quantité…) partagent une ligne et se lisent comme une seule barre. Une barre d’un autre type entre elles les sépare, même quand un bloc ne l’affiche pas. Le bouton cadeau et la liste de cadeaux restent sous la dernière ligne. La disposition appartient au design : un tiroir panier peut empiler ses barres pendant que la page produit les garde côte à côte.

Styler marqueurs, prix, images et montants

• Marqueur : activez Afficher le marqueur, ou remplacez-le par l’image du palier avec Utiliser l’image du palier comme marqueur. Les couleurs peuvent varier selon l’état : non atteint, atteint, tous atteints.
• Seuil : Afficher le seuil du palier, puis taille, gras, couleurs par état, espacements et marges. Le texte du seuil lui-même se réécrit pour chaque palier : voir ajouter un palier.
• Images : Afficher l’image du palier active les images pour tous les paliers. L’image de chaque palier se choisit dans sa carte ; cet onglet ne règle que la taille, les couleurs, l’arrondi et l’ombre. Pour un palier cadeau, Image puis Image du produit offert est le choix par défaut quand vous activez l’image : le palier affiche l’image de la variante offerte (ou l’image principale du produit) et la suit quand elle change dans Shopify. Avec plusieurs cadeaux, choisissez le produit, ou la variante quand un produit est offert en plusieurs ; sans image, celle du produit offert suivant prend le relais, puis l’icône cadeau.
• Montant : Afficher la valeur de progression et Afficher la valeur totale, avec couleur, taille et espacement.

4:26

Arrondir les montants à l’unité

Dans l’onglet Message de succès, à côté de Toujours afficher les décimales, cochez Arrondir les montants à l’unité pour retirer les centimes de tous les montants que la barre affiche avec ce design. L’arrondi vaut pour toutes les devises, que le montant soit converti pour un marché ou non :

• les seuils et le montant restant sont arrondis au supérieur ;
• le total du panier et les montants de remise sont arrondis à l’inférieur : la barre ne promet jamais plus que ce que le client obtiendra ;
• le montant restant se compte depuis le seuil affiché : additionnés, le total et le montant restant donnent toujours ce seuil. Tant que le palier n’est pas atteint, le montant restant n’affiche jamais 0 : il vaut au moins 1.

Avec des paliers à 100,50 € et 200,50 € et un panier de 24,95 €, la barre affiche « 77 € restants », des seuils de « 101 € » et « 201 € » et un total de « 24 € ».

L’arrondi ne change que ce qui est écrit : un palier se débloque toujours à son seuil exact. Le palier à 100,50 € se débloque à 100,50 € même s’il affiche « 101 € ». Une fois le dernier palier de la barre atteint, le total n’affiche jamais moins que son seuil : un panier de 100,50 € affiche « 101 € », pas « 100 € ».

Les assistants IA et les lecteurs d’écran lisent toujours les montants exacts : le résumé de vos offres et le texte lu pour la barre gardent leurs centimes (« 100,50 € », « 75,55 € restants »).

Les poids, les quantités et les nombres de commandes ne sont pas arrondis. Tant que l’arrondi est actif, Toujours afficher les décimales est grisé. Au checkout, c’est le réglage du design par défaut qui s’applique. Cette option remplace Arrondir les valeurs converties pour éviter les nombres décimaux, qui se trouvait dans les Options avancées du palier : si vous l’aviez cochée sur un palier actif, elle est désormais cochée sur vos designs.

Choisir où mène un clic sur un palier

Dans les réglages de chaque palier, la carte Au clic règle ce qui se passe quand un client clique sur le palier dans la barre, ou sur un cadeau de la liste inline :

• Aucune redirection : le clic ne fait rien.
• Page du produit offert : le choix par défaut d’un palier cadeau.
• Un autre produit : n’importe quel produit de votre boutique.
• Une page ou une URL : une page de votre boutique comme /pages/livraison ou /collections/ete, ouverte dans la langue du client, ou une adresse complète en https://.

Tous les types de palier peuvent mener à un produit ou à une page, pas seulement les paliers cadeau. Le réglage appartient au design sélectionné : changez de design en haut de la page pour le régler sur un autre.

Régler les marges sur ordinateur et sur mobile

Dans Conteneur, basculez entre Par défaut et Mobile en haut de l’onglet pour régler marges et espacements selon l’écran. Largeur maximale ne vaut que sur ordinateur. Ces valeurs s’appliquent partout où le design est utilisé ; les réglages propres d’un placement dans l’intégration au thème peuvent les remplacer (voir placement dans le thème).

Aller plus loin avec du CSS personnalisé

En bas de Conteneur, CSS personnalisé de la barre accepte votre propre CSS et Classes CSS ajoute des classes au conteneur de la barre. Le CSS est vérifié à l’enregistrement et limité à la barre : vos règles ne débordent pas sur le reste du thème.

Partir d’un preset ou d’une autre boutique

• Presets : choisissez un design prêt à l’emploi et cliquez sur Appliquer. Il remplace le style du design en cours ; votre message de succès, vos textes cadeau et leurs traductions restent tels quels.
• Importer depuis une autre boutique : vous gérez plusieurs boutiques ? L’icône à côté de Ajouter un design, ou la carte Reprendre un design d’une autre boutique dans Presets, copie l’un de leurs designs comme nouveau design, sans toucher aux designs existants. Une boutique apparaît si vous utilisez le même e-mail Shopify vérifié sur les deux et y avez déjà ouvert Yaco Progress Bar au moins une fois. Chaque design de la liste affiche ses couleurs principales et les placements où il apparaît dans cette boutique : deux designs nommés « Default » se distinguent d’un coup d’œil.

Dans les deux cas, cliquez sur Enregistrer pour conserver le résultat.

Utiliser plusieurs designs

Ajouter un design et Dupliquer le design créent des designs supplémentaires, par exemple un pour le tiroir de panier et un pour la fiche produit. Un design est celui par défaut ; Utiliser ce design en assigne un autre à des placements précis, ou ouvre la page panier dans l’éditeur de thème : dans le bloc d’app Yaco progress bar, choisissez-le par son nom dans Design.

Chaque design peut aussi afficher à sa façon les paliers à plusieurs cadeaux : en liste dans une barre, avec le bouton Choisir un cadeau dans une autre. Le réglage se trouve dans la carte Affichage des cadeaux de l’onglet Interface cadeau (voir modale cadeau).