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

> La page Design règle la barre sans code : disposition des paliers, couleurs, marqueurs, prix, images, marges mobile et CSS, enregistrés en designs réutilisables.

Mis à jour le 2026-09-25 · https://www.yaco.studio/fr/docs/design

## 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](https://www.yaco.studio/fr/docs/message-de-succes) |
| **Interface cadeau** | Le bouton cadeau, la modale cadeau et la liste de cadeaux ; voir [modale cadeau](https://www.yaco.studio/fr/docs/modal-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](https://www.yaco.studio/fr/docs/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](https://www.yaco.studio/fr/docs/emplacement-theme)).

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