Faut-il connaître le CSS pour personnaliser les nuanciers Shopify?

Non. L'éditeur visuel de Rubik Variant Images permet de modifier formes, tailles et couleurs sans code. Pour des personnalisations avancées, l'assistant IA génère le CSS à partir d'instructions en langage naturel.

Peut-on mélanger les types de nuanciers sur une même page produit?

Oui. Cercles de couleur pour la couleur, vignettes produit pour le design, boutons pilules pour la taille. Chaque option peut avoir un type de nuancier différent.

Le CSS des nuanciers peut-il casser mon thème Shopify?

Non. Rubik utilise le Shadow DOM pour isoler les styles. Le CSS des nuanciers et le CSS du thème sont complètement séparés. Aucun risque de conflit.

Comment marquer les variantes en rupture de stock dans les nuanciers?

Rubik propose trois options : ligne diagonale, opacité réduite, ou masquage complet. Combinaisons possibles. Couleur et épaisseur de la ligne sont personnalisables.

Comment fonctionne l'assistant IA pour le CSS des nuanciers?

Décrivez le design souhaité en français ou en anglais. L'IA génère le CSS correspondant. Prévisualisation et application en un clic. L'IA connaît toutes les variables CSS disponibles.

Rubik Variant Images Guides, Shopify Tips & Tutorials

Personnaliser les nuanciers Shopify: formes et styles

April 1, 2026

Les nuanciers sont installes, les images assignees, tout fonctionne. Mais les swatches ne ressemblent pas a ce que vous voulez. Trop petits. Mauvaise forme. La bordure ne correspond pas a votre design. Les variantes en rupture de stock ne sont pas assez visibles.

Rubik Variant Images vous donne le controle total sur l’apparence de vos nuanciers. Plus de 100 variables CSS, un editeur visuel et un assistant IA qui ecrit le CSS a votre place. Voici tout ce que vous pouvez personnaliser.

Les trois types de nuanciers

Avant de parler du design, Rubik prend en charge trois types de nuanciers. Chacun se personnalise independamment.

Nuanciers couleur. Un cercle ou un carre rempli d’une couleur unie. Ideal pour les options comme Rouge, Bleu, Noir, ou la couleur elle-meme est l’information. Rubik reconnait les noms de couleurs courants et assigne automatiquement le bon code hexadecimal.

Nuanciers image produit. De petites vignettes avec une photo de la variante. Parfait pour les motifs, les imprimes, les tissus ou les produits dont l’aspect varie selon la couleur. Le client voit le produit, pas juste une couleur.

Boutons pilules. Des rectangles arrondis avec du texte. Pour les options qui ne se representent pas visuellement : taille (S, M, L), materiau (coton, lin), modele (Standard, Pro).

Le plus interessant : vous pouvez combiner differents types par option. Des cercles de couleur pour la couleur, des pilules pour la taille, des vignettes pour le design. Le tout sur la meme page produit.

Formes : rond, carre, arrondi

La forme des nuanciers definit la premiere impression. Rubik propose trois formes de base :

Cercles (Circle). Le classique. Des nuanciers ronds, comme dans la plupart des grandes boutiques en ligne. Look epure et moderne. Bien adapte aux designs minimalistes.

Carres (Square). Des angles nets, un look geometrique. Ca va bien avec les designs anguleux et les boutiques au style technique ou industriel. Pour les vignettes produit, les carres montrent plus de l’image que les cercles.

Arrondis (Rounded). Des carres avec les coins arrondis. Le juste milieu. Plus doux qu’un carre, mais avec plus de surface visible qu’un cercle. Tres populaire dans les boutiques de mode.

La forme se controle via la variable CSS --swatch-border-radius. 50% donne un cercle, 0% un carre, tout ce qui est entre les deux donne une forme intermediaire. Dans l’editeur visuel, cliquez simplement sur la forme souhaitee.

Taille et espacement

Par defaut, les nuanciers Rubik font 34×34 pixels. Ca fonctionne pour la plupart des boutiques. Mais pas toutes.

Les bijouteries avec des nuances subtiles ont besoin de nuanciers plus grands pour que la difference entre or rose et or jaune soit visible. Les boutiques avec 20+ couleurs par produit ont peut-etre besoin de nuanciers plus petits pour eviter le debordement sur deux lignes.

Valeurs personnalisables : largeur et hauteur (identiques ou differentes pour des formes non carrees), espacement entre les nuanciers (horizontal et vertical), espacement par rapport au libelle de l’option au-dessus des nuanciers.

Bordures et styles de selection

Comment montrer au client quelle couleur est selectionnee? Rubik offre plusieurs possibilites :

Bordure epaissie. Le nuancier selectionne recoit une bordure plus epaisse ou d’une couleur differente. Par defaut : une bordure noire de 2px autour du nuancier actif.

Contour avec espacement. Au lieu d’une bordure directement sur le nuancier, un anneau separe avec un petit ecart. Ca rend particulierement bien avec les cercles de couleur, parce que la couleur n’est pas “mangee” par la bordure.

Mise a l’echelle. Le nuancier selectionne est legerement plus grand que les autres. Subtil, mais efficace.

Vous pouvez combiner ces styles. Un contour avec espacement ET une mise a l’echelle, par exemple. Chaque parametre est independant.

Effets au survol

Le comportement au survol (hover) donne du feedback au client avant meme qu’il clique. Rubik permet de configurer :

Changement de bordure. La bordure change de couleur ou d’epaisseur au survol.
Mise a l’echelle. Le nuancier grossit legerement au survol.
Opacite. Les nuanciers non survoles deviennent legerement transparents.
Transition. La vitesse de l’animation de transition est ajustable.

Sur mobile, le survol n’existe pas. Rubik gere ca correctement : les styles de hover ne s’appliquent que sur les appareils avec un curseur.

Marquage des variantes en rupture

Les variantes en rupture de stock meritent un traitement visuel particulier. Le client doit voir immediatement quelles options sont indisponibles.

Rubik offre plusieurs styles pour les nuanciers de variantes en rupture :

Ligne diagonale. Une ligne qui traverse le nuancier en diagonale. Le style le plus courant et le plus reconnaissable.
Opacite reduite. Le nuancier devient semi-transparent. Plus discret que la ligne diagonale.
Masquage complet. Le nuancier disparait de la liste. Le client ne voit que les options disponibles.

Vous pouvez aussi personnaliser la couleur et l’epaisseur de la ligne diagonale, ou combiner opacite et ligne pour un double signal visuel.

Quand le client survole un nuancier, un tooltip affiche le nom de la variante. “Bleu Marine”, “Taille L”, “Coton Bio”. Rubik permet de personnaliser l’apparence de ces tooltips : couleur de fond, couleur du texte, taille de police, arrondi des coins, position (au-dessus ou en dessous du nuancier).

Les tooltips sont particulierement utiles pour les nuanciers de couleur, ou le cercle seul ne suffit pas toujours a identifier la teinte exacte.

L’assistant IA Visual Settings

Vous ne voulez pas manipuler les variables CSS manuellement? L’assistant IA ecrit le CSS pour vous.

Decrivez ce que vous voulez en langage naturel : “Je veux des nuanciers ronds de 40px avec une bordure doree de 2px au survol et une ligne diagonale rouge pour les variantes en rupture.” L’IA genere le CSS correspondant. Vous previsualiser le resultat et l’appliquez en un clic.

L’assistant comprend les termes en francais et en anglais. Il connait toutes les variables CSS disponibles et genere du code propre, sans conflits. C’est la facon la plus rapide de personnaliser vos nuanciers sans toucher au code.

Pourquoi le Shadow DOM compte

Le CSS de votre theme et le CSS des nuanciers Rubik vivent dans des mondes separes grace au Shadow DOM. C’est une technologie web native qui isole les styles.

En pratique, ca veut dire deux choses. Le CSS de votre theme ne peut pas casser l’apparence des nuanciers. Et le CSS des nuanciers ne peut pas casser votre theme. Pas de conflits de styles, pas de surprises apres une mise a jour de theme.

C’est un avantage reel. Beaucoup d’applications de nuanciers injectent du CSS global qui entre en conflit avec les styles du theme. Avec le Shadow DOM, ce probleme n’existe pas.

Video

Decouvrez la personnalisation des nuanciers en video :

Essayer Rubik Variant Images gratuitement

Questions frequentes

Faut-il connaitre le CSS pour personnaliser les nuanciers?

Non. L’editeur visuel permet de modifier les formes, les tailles et les couleurs sans toucher au code. Pour des personnalisations plus poussees, l’assistant IA genere le CSS a partir de vos instructions en langage naturel.

Peut-on melanger les types de nuanciers sur une meme page?

Oui. Vous pouvez utiliser des cercles de couleur pour l’option couleur, des vignettes produit pour le design et des boutons pilules pour la taille. Chaque option du produit peut avoir un type de nuancier different.

Le CSS des nuanciers peut-il casser mon theme?

Non. Rubik utilise le Shadow DOM pour isoler les styles des nuanciers. Le CSS de vos swatches et le CSS de votre theme sont completement separes. Aucun risque de conflit, meme apres une mise a jour du theme.

Comment marquer les variantes en rupture de stock?

Rubik propose trois options : une ligne diagonale a travers le nuancier, une opacite reduite, ou le masquage complet de la variante. Vous pouvez aussi combiner ligne diagonale et opacite. Couleur et epaisseur de la ligne sont personnalisables.

Comment fonctionne l’assistant IA pour le CSS?

Decrivez le design souhaite en langage naturel, en francais ou en anglais. L’IA genere le CSS correspondant. Vous previsualiser le resultat dans l’editeur et l’appliquez en un clic. L’IA connait toutes les variables CSS disponibles et produit du code sans conflits.