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, couleurs, hauteur, bordure, ombre, arrondi
Images	Icônes des paliers et leurs couleurs, atteints ou non
Nom du goal	Affichage des noms de paliers, taille et couleurs
Prix	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 ; voir message de succès
Interface cadeau	Le bouton cadeau, la modale cadeau et la liste de cadeaux ; 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 goals 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.

Limiter les goals affichés est actif par défaut. La barre montre au plus 4 paliers à la fois (Goals affichés (max)) et garde toujours au moins 2 paliers non atteints visibles (Goals non atteints affichés (min)). La fenêtre avance à mesure que les paliers sont débloqués. Décochez la case pour tout afficher. Elle ne s’applique pas en mode Un par un.

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

Styler marqueurs, prix, images et montants

• Marqueur : activez Afficher le marqueur, ou remplacez-le par l’image du palier avec Utiliser l’image du goal comme marqueur. Les couleurs peuvent varier selon l’état : non atteint, atteint, tous atteints.
• Prix : Afficher le prix du goal, puis taille, gras, couleurs par état, espacements et marges.
• Images : Afficher l’image du goal 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.
• Montant : Afficher la valeur de progression et Afficher la valeur totale, avec couleur, taille et espacement.

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 emplacement dans l’intégration au thème peuvent les remplacer (voir emplacement 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.
• 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.

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 emplacements précis.