Paramètres du thème
Boutons et champs
Une seule grammaire pour tout ce que l’acheteur touche : hauteur, forme, champs, options et icônes.
Sur cette page
Tout ce que l’acheteur manipule — boutons, champs, options de produit, sélecteur de quantité — partage la même hauteur, le même contour et le même type de libellé. Ouvrez Paramètres du thèmeBoutons et champs pour régler cette grammaire commune.
| Réglage | Valeurs | À quoi il sert |
|---|---|---|
| Taille des contrôlesEN : Control size |
| La hauteur de chaque bouton, champ, option et sélecteur de quantité. |
| Forme des contrôlesEN : Control shape |
| S’applique aux boutons, aux champs encadrés, aux options et aux sélecteurs de quantité. Images, cartes et panneaux gardent des angles droits. |
| Style des champsEN : Field style |
| Tous les champs du thème suivent ce style. |
| Style des optionsEN : Option style |
| La présentation des options de produit, comme les tailles. Les couleurs et les visuels de variante s’affichent toujours en pastilles ; les longues listes passent en menu déroulant. |
| Épaisseur des icônesEN : Icon weight |
| — |
Taille des contrôles
| Taille | Hauteur |
|---|---|
| Compacte | 44 px |
| Standard | 48 px |
| Grande | 52 px |
Même en taille compacte, aucun contrôle n’est plus petit que 44 px de haut sur un écran tactile.
Forme des contrôles
- Carrée : angles droits.
- Adoucie : angles arrondis de 6 px.
- Pilule : extrémités entièrement arrondies.
La forme s’applique aux boutons, aux champs encadrés, aux options en boîtes et au sélecteur de quantité. Les pastilles de couleur sont rondes avec la forme Pilule et carrées sinon. Les images, les fiches, les panneaux et les tiroirs gardent toujours des angles droits.
Style des champs
- Souligné : seul le bord inférieur du champ est tracé.
- Encadré : le champ a un contour complet, qui suit la forme des contrôles.
Tous les champs du thème suivent ce réglage : recherche, newsletter, contact, commentaires, note de commande, filtres de prix, destinataire de carte-cadeau, quantité.
Style des options
Ce réglage définit l’affichage des options de produit nommées, comme les tailles :
- Texte : les valeurs sont écrites côte à côte ; la valeur choisie est soulignée.
- Cases : chaque valeur est dans une boîte à la hauteur des contrôles ; la valeur choisie est entourée.
- Menu déroulant : un menu déroulant par option.
Quel que soit ce réglage :
- les couleurs et les motifs définis comme échantillons dans Shopify s’affichent toujours en pastilles (voir Pastilles de couleur) ;
- une option dont les variantes ont chacune leur propre image s’affiche en vignettes de ces images ;
- une liste trop longue bascule en liste déroulante (seuil réglable dans le bloc Sélecteur de variante, 12 valeurs par défaut).
Les boutons
Il n’existe pas de style de bouton global : le style d’un bouton exprime ce qu’il engage.
| Style | Pour | Exemple |
|---|---|---|
| Plein | L’action principale d’un écran | Ajouter au panier, Payer |
| Contour | Une vraie alternative | Découvrir la collection quand un produit est épuisé |
| Souligné | Une suite qui n’engage à rien | Voir tout, Lire plus |
Pour un bouton que vous placez vous-même (bloc Bouton, lien de la section Image avec texte), vous choisissez le style. Les couleurs du bouton plein viennent de l’accent et du texte d’accent de la palette de la section.
Épaisseur des icônes
Fine trace les icônes avec un trait de 1 px, Normale avec un trait de 1,5 px. Toutes les icônes du thème (panier, recherche, compte, menu, flèches, réseaux sociaux) suivent ce réglage.
Maison 1.0.0