Système complet de sélection de variantes : swatches couleur et image, boutons, dropdown. Configuration par option, detection automatique et personnalisation avancee.
Options de variantes
Le bloc Variant Option de Scale Theme offre un système complet pour afficher les options de variantes de vos produits. Trois types de sélecteur sont disponibles -- boutons, swatches visuels (image) et dropdown -- chacun entièrement configurable pour s'adapter à votre catalogue.
Les 3 types de sélecteur
| Type | Rendu | Idéal pour |
|---|---|---|
| Button (Bouton) | Boutons rectangulaires avec texte | Tailles (S/M/L/XL), matériaux, options textuelles |
| Image (Swatch) | Pastilles visuelles avec image ou couleur | Couleurs, motifs, textures, configurations visuelles |
| Dropdown | Menu déroulant | Options tres nombreuses (20+), gain d'espace vertical |
Button (Bouton)
Le type Button affiche chaque valeur d'option sous forme de bouton rectangulaire avec texte. C'est le choix le plus courant pour les tailles et les options textuelles.
Settings du type Button
| Setting | Description | Options |
|---|---|---|
| Direction | Disposition des boutons | Horizontal (en ligne) / Vertical (empile) |
| Items par ligne | Nombre de boutons par ligne (mode horizontal) | Auto / 2 / 3 / 4 / 5 / 6 |
| Style de sélection | Comment marquer la valeur active | Background (fond coloré) / Border (bordure epaisse) |
| Border radius | Arrondi des coins des boutons | 0 a 50px |
| Taille | Dimension des boutons | Small / Medium / Large |
| Masquer le label | Ne pas afficher le nom de l'option au-dessus | Oui / Non |
Image / Swatch (Pastille visuelle)
Le type Image affiche des pastilles visuelles pour chaque valeur. Il fonctionne en deux modes : images (photos des variantes) ou couleurs (pastilles colorées détectées automatiquement).
Swatches avec images de variante
Quand chaque variante a sa propre image dans Shopify, le swatch affiche une miniature de cette image.
Swatches avec couleurs détectées
Quand les valeurs de l'option correspondent a des noms de couleur, Scale Theme génère automatiquement des pastilles colorées.
Detection automatique des couleurs
Scale Theme détecte les couleurs à partir du nom de l'option en francais et en anglais :
| Nom détecte (FR / EN) | Couleur générée |
|---|---|
| Noir / Black | #000000 |
| Blanc / White | #FFFFFF |
| Rouge / Red | #E53E3E |
| Bleu / Blue | #3182CE |
| Bleu marine / Navy | #1A365D |
| Vert / Green | #38A169 |
| Rose / Pink | #ED64A6 |
| Gris / Gray | #A0AEC0 |
| Beige | #D4C5A9 |
| Bordeaux / Burgundy | #800020 |
| Corail / Coral | #FF6F61 |
| + 30 autres couleurs | Auto-détectées |
Settings du type Image/Swatch
| Setting | Description | Options |
|---|---|---|
| Taille | Dimension des swatches | Small (24px) / Medium (32px) / Large (40px) |
| Forme circulaire | Swatches en cercle au lieu de carre | Oui / Non |
| Direction | Disposition des swatches | Horizontal / Vertical |
| Items par ligne | Nombre de swatches par ligne | Auto / 3 / 4 / 5 / 6 |
| Style de sélection | Comment marquer le swatch actif | Background (anneau coloré) / Border (bordure epaisse) |
| Masquer le label | Ne pas afficher le nom de l'option | Oui / Non |
Dropdown (Menu déroulant)
Le type Dropdown affiche les options dans un menu déroulant classique. Particulièrement utile quand l'option a de nombreuses valeurs ou que l'espace vertical est limité.
| Setting | Description | Options |
|---|---|---|
| Masquer le label | Ne pas afficher le nom de l'option au-dessus | Oui / Non |
| Marge inférieure | Espace sous le bloc | 0 a 100px |
Source de l'option : Auto vs Custom
Chaque bloc Variant Option peut detecter automatiquement quelle option afficher, où vous pouvez specifier un nom précis.
Mode Auto
En mode Auto, les blocs Variant Option se mappent aux options du produit dans l'ordre :
- Le 1er bloc affiche la 1ere option du produit
- Le 2eme bloc affiche la 2eme option
- Le 3eme bloc affiche la 3eme option
Mode Custom
En mode Custom, vous spécifiez le nom exact de l'option Shopify a afficher dans ce bloc. Le nom doit correspondre exactement a celui défini dans l'admin Shopify.
| Setting | Description |
|---|---|
| Nom de l'option | Le nom exact de l'option Shopify (ex : "Couleur", "Pointure", "Matiere") |
Configuration multi-options
Vous pouvez configurer un type de sélecteur différent par option du produit en ajoutant plusieurs blocs Variant Option.
Exemple typique : Mode (vetements)
| Bloc | Option | Type recommande | Raison |
|---|---|---|---|
| Bloc 1 | Couleur | Image / Swatch | Visuel immediat des couleurs disponibles |
| Bloc 2 | Taille | Button | Toutes les tailles visibles d'un coup |
Exemple typique : Chaussures
| Bloc | Option | Type recommande | Raison |
|---|---|---|---|
| Bloc 1 | Couleur | Image / Swatch | Visuel des coloris |
| Bloc 2 | Pointure | Button (4 par ligne) | Grille organisée de pointures |
Exemple typique : Électronique
| Bloc | Option | Type recommande | Raison |
|---|---|---|---|
| Bloc 1 | Couleur | Image / Swatch | Visuel des finitions |
| Bloc 2 | Stockage | Button | Peu d'options, toutes visibles |
| Bloc 3 | Garantie | Dropdown | Options textuelles longues |
Gestion des variantes epuisees
Scale Theme gère intelligemment les variantes epuisees selon le type de sélecteur :
| Type | Variante épuisée | Comportement |
|---|---|---|
| Button | Bouton barre en diagonale, texte grise, non cliquable | Visible mais désactivé |
| Image / Swatch | Swatch avec opacité réduite et barre | Visible mais désactivé |
| Dropdown | Option grisee avec mention "- Épuisé" | Visible mais non selectionnable |
Mise à jour dynamique
Quand le client sélectionné une valeur, le système met à jour automatiquement et instantanément :
| Élément mis à jour | Description |
|---|---|
| Prix | Le prix change selon la variante sélectionnée |
| Image | La galerie navigue vers l'image de la variante |
| Stock | L'indicateur de stock se met à jour |
| Disponibilite | Le bouton ATC devient "Épuisé" si nécessaire |
| Sticky ATC | La barre sticky se synchronise |
| URL | L'URL est mise à jour avec le paramètre ?variant= |
| Autres options | Les options incompatibles sont grisees (connected options) |
Bonnes pratiques
- Couleurs = Swatches : Utilisez toujours le type Image/Swatch pour les options de couleur. Les pastilles visuelles sont beaucoup plus efficaces que des noms textuels
- Tailles = Boutons : Les boutons sont preferes aux dropdowns pour les options avec moins de 8-10 valeurs. Toutes les options sont visibles d'un coup
- Beaucoup d'options = Dropdown : Au-dela de 10 valeurs (ex : pointures europeennes 36-47), utilisez le dropdown ou les boutons en grille (4 par ligne)
- Maximum 2 types : Évitez de mélanger plus de 2 types de sélecteur différents sur un même produit. Par exemple, Swatch + Button est un bon combo. Swatch + Button + Dropdown est trop heterogene
- Label visible : Gardez le label de l'option visible (ne masquez pas le label) pour que le client sache ce qu'il sélectionné, sauf si le contexte est evident
- Mobile : Les swatches et boutons s'adaptent automatiquement en wrap sur mobile. Vérifiez que les labels ne sont pas tronques et que les swatches restent assez grands pour être facilement cliquables au doigt
Prochaines étapes
- **Blocs de la page produit** — Explorez tous les blocs disponibles pour construire votre fiche produit
- **Quick View** — Affichez les variantes dans une modale rapide depuis les collections
- **Cartes produit** — Personnalisez l'apparence des cartes produit dans les grilles et collections
- **Guide des tailles** — Ajoutez un guide des tailles juste sous vos sélecteurs de variantes