Utiliser l’application

Apparence

La page Apparence stylise tous les guides de votre boutique en une fois, pour qu’ils correspondent tous à votre marque. Un aperçu en direct sur la page montre chaque modification au fur et à mesure.

Cliquez sur Enregistrer dans la barre en haut pour appliquer vos modifications. Tous les guides actifs de votre boutique sont mis à jour immédiatement — inutile d’enregistrer les guides un par un. Vous voulez qu’un guide ait un style différent ? Voir donner un style propre à un guide.

Fenêtre du guide

Paramètre	Rôle
Largeur	Étroit (idéal pour trois ou quatre colonnes), Moyen (par défaut), Large (de la place pour les tableaux larges sans défilement horizontal), ou Très large (idéal avec les photos du produit à côté du guide).
Arrondi des coins	0 à 24 px. 8 px par défaut.
Marge intérieure	0 à 48 px. 24 px par défaut. Espace entre le bord du tableau et son contenu.

La barre en haut de la fenêtre ou du panneau.

Paramètre	Rôle
Afficher le nom du produit	Place en tête de la fenêtre le nom du produit depuis lequel elle a été ouverte. Quand il est masqué, les lecteurs d’écran l’annoncent quand même.
Arrière-plan de l’en-tête	Laissez vide pour utiliser l’arrière-plan du guide.
Couleur du titre	Laissez vide pour utiliser la couleur du texte.
Alignement du titre	À gauche ou Au centre.
Bouton de fermeture	✕ simple, ou ✕ dans un cercle plein.
Couleur de l’icône	Le ✕ lui-même. Laissez vide pour utiliser la couleur du titre.
Couleur du cercle	Pour le style cercle plein.

Photos du produit

Paramètre	Rôle
Afficher les photos du produit à côté du guide	Affiche les photos du produit à côté du guide, avec des flèches pour les parcourir. Sur les grands écrans, elles n’apparaissent que dans la fenêtre modale — les panneaux sont trop étroits. À associer à la fenêtre Très large.
Les afficher aussi sur téléphone	Sur téléphone, les photos s’affichent au-dessus du guide, dans la fenêtre comme dans les panneaux. Désactivé, les téléphones n’affichent que le guide.

Arrière-plan

Paramètre	Rôle
Couleur d’arrière-plan	La surface du guide. Blanc par défaut.
Couleur du texte	Le texte courant — changez-la en même temps qu’un arrière-plan sombre pour que le guide reste lisible.
Image d’arrière-plan	Une image derrière tout le guide.
Ajustement de l’image	Remplir le guide, Ajuster l’image entière, ou Répéter (mosaïque).
Position de l’image	Centre, En haut ou En bas.
Superposition	0 à 90 %. Estompe l’image avec la couleur d’arrière-plan pour que le texte reste lisible. À 0 %, l’image s’affiche telle quelle.

Remarque: Les guides intégrés reposent sur l’arrière-plan de page de votre thème, sauf si vous définissez une image d’arrière-plan ou une couleur d’arrière-plan autre que le blanc.

Tableau

Paramètre	Rôle
Arrière-plan des en-têtes de colonne	Gris clair par défaut.
Texte des en-têtes de colonne	Presque noir par défaut.
Lignes de grille	La couleur des lignes entre les rangées et les cellules.
Alterner la couleur des lignes	Teinte une ligne sur deux pour faciliter la lecture des tableaux larges.

Chaque tableau peut remplacer ces couleurs dans l’éditeur, sous Options de style.

Texte

Paramètre	Rôle
Couleur du titre	Les titres du guide, ainsi que des accents comme l’unité active du sélecteur d’unités et les contours de focus clavier.
Taille de base	11 à 20 px. 14 px par défaut. Les titres et le texte s’ajustent à partir de cette valeur.

Comportement

Paramètre	Rôle
Fermer en cliquant à l’extérieur	Activé par défaut. Désactivez-le pour que le guide ne se ferme qu’avec le bouton de fermeture. Échap fonctionne toujours.

CSS personnalisé

Pour tout ce que les options ci-dessus ne couvrent pas. Le CSS est ajouté partout où un guide apparaît. Commencez vos sélecteurs par .plug-sc pour qu’ils ne touchent que le guide des tailles et pas le reste de votre thème.

Noms de classes utiles :

Paramètre	Rôle
.plug-sc__trigger	Le lien ou bouton Guide des tailles.
.plug-sc__dialog	La fenêtre modale ou le panneau.
.plug-sc__heading	Le titre en haut de la fenêtre.
.plug-sc__table	Chaque tableau de mesures.
.plug-sc__units	Le sélecteur d’unités au-dessus d’un tableau.
.plug-sc__float	Le bouton flottant.
.plug-sc__inline	Un guide intégré à la page.

/* Texte de tableau plus petit sur la boutique */
.plug-sc .plug-sc__table {
  font-size: 13px;
}

/* Masquer le bouton flottant sur téléphone */
@media (max-width: 749px) {
  .plug-sc .plug-sc__float { display: none; }
}

Important: Le CSS personnalisé n’est pas vérifié. Si quelque chose ne s’affiche plus correctement après une modification, videz le champ et enregistrez pour revenir aux styles standard.

Réinitialiser

Rétablir les valeurs par défaut remet toutes les options à leur valeur par défaut dans le formulaire. Rien ne change sur votre boutique tant que vous n’avez pas cliqué sur Enregistrer.