1 - Introduction
Les vignettes de couleur correspondent aux déclinaisons de couleurs que peut voir un produit suivant ses variantes.
Pour un design professionnel, il est possible d’afficher les couleurs en question dans des vignettes, et permettre à l’utilisateur d’appréhender les couleurs disponibles du produit.
Ainsi vous augmenter implicitement votre taux de conversion en diminuant le temps de réflection du prospect lors de sa visite, l’affichage des variantes étant immédiat.
Ces couleurs sont également utilisées pour le filtrage par couleur dans les pages de collection.
2 - Mise en place de couleurs personnalisées dans la boutique
Suivant la nomination de vos couleurs, certaines apparaîtront visuellement par défaut. Ceci signifie que la nomination de ces couleurs en question font parties des 140 couleurs HTML de base, que nous avons pris soin de traduire dans les langues disponibles du thème pour les rendre compatibles.
Sur le Phantom Thème, vous pouvez personnaliser ces couleurs, mais également des couleurs spéciales grâce à des images.
Nommez vos fichiers de la même manière que le nom donné à vos couleurs, sans accent ni caractère spécial.
|  |
Les formats acceptés d’images sont jpg, jpeg, gif et png, et celui choisit doit être le même pour toute vos images. Celui-ci doit également être définit dans Paramètres de thème > Général > Format des vignettes de couleur .
Rendez-vous dans votre boutique Shopify puis Paramètres > Fichier .
Cliquez sur Importer les fichiers , puis sélectionnez vos images (50x50 pixels de préférence) et validez.
Désormais, il faut paramétrer le thème pour afficher ces couleurs.
3 - Affichage des couleurs personnalisées
Seulement si le format choisit est différent de Image des variantes dans Paramètres de thème > Général > Format des vignettes de couleur . Pour les exemples suivant, nous prendrons le format .jpg
Dans la personnalisation du thème, ces couleurs peuvent se retrouver à 3 endroits différents :
Sur les cartes produits (uniquement sur le Master +)
Le filtrage sur les pages de collection
Les pages produit
A - Carte produit (Uniquement sur le pack Master +)
Nous illustrerons le cas des cartes produits, les autres ayant le même procédé :
Dans un premier temps, rendez-vous dans Paramètres de thème > Carte produit > Vignettes . Type de vignette :
Options à afficher : Si vous sélectionnez en Type de vignette Ainsi, vous pouvez par exemple renseigner :
Si vous avez des produits ayant pour option Matériaux avec comme variante Bois / Métal / Tissu, vous pouvez ainsi imager ces matériaux avec des textures de bois, de métal et de tissu, pour montrer visuellement au prospect ce qu’il peut avoir et rendre esthétique la prévisualisation. | 
|
Rendez-vous ensuite dans une section possédant des cartes produits, ici nous prendrons la section Dans cet exemple, rendez-vous dans le bloc |
 |
| ← Voici le résultat
Ici les couleurs affichés sont Or et Argent et ce sont les couleurs HTML par défaut. |
Pour afficher une couleur personnalisé, nous allons importer une image d’une texture de bois (50x50 pixels) appelée argent.jpg comme ci-après → |   |
| ← Et nous obtenons ceci |
B - Section Collection
Pour les pages de produit, référez vous à la mise en place sur l’exemple des cartes produits. Définissez sur le bloc Champ variantes le Type de vignette sur Couleurs des variantes.
Les couleurs sont automatiquement affichées sur toutes options nommées soit Couleur, soit Couleurs et uniquement ces options là.
 | ← Vous obtiendrez alors ceci |
4 - Variantes affichées (Carte produit)
Voici comment afficher le nombre et nom de variantes disponibles sur vos cartes produits comme ci-après ⇒ |  |
 | Rendez-vous dans Paramètres de thème > Carte produit > Variantes. Notez le nom des options à afficher sur vos cartes produits. Par exemple
|
Attention : les noms des options doivent être séparés par une virgule
Une fois vos options définies, rendez-vous dans une section comportant des cartes produits, par exemple la section Collection, puis choisissez Nombre et nom pour le paramètre Informations sur les variantes |
 |