Rubik Variant Images Guides, Shopify Tips & Tutorials

Afficher uniquement les images de la variante choisie

April 1, 2026
Flacons de parfum avec cartes de couleur

Un client clique sur “Bleu”. L’image principale change. Mais dans la galerie en dessous? Toutes les photos sont encore la : Rouge, Noir, Vert, Beige. 30 images en vrac, sans aucun lien avec la couleur choisie.

Shopify ne filtre pas les images par variante. Ce n’est pas un bug. La plateforme traite les images comme une liste unique. Quand le client change de variante, l’image principale se met a jour. Le reste de la galerie ne bouge pas.

Ce probleme se resout. Dans cet article, vous allez voir comment configurer votre galerie pour qu’elle n’affiche que les images de la variante selectionnee.

Dans cet article

Pourquoi Shopify affiche toutes les images

Dans le modele produit de Shopify, les images appartiennent au produit, pas a la variante. Vous pouvez assigner une seule image par variante. Quand le client selectionne cette variante, Shopify affiche cette image en premier. Toutes les autres restent visibles.

Un produit avec 6 couleurs et 5 photos par couleur, ca fait 30 images dans la galerie. Toujours. Peu importe la couleur choisie. Il n’existe aucun reglage pour changer ca.

Shopify stocke les images dans une liste a plat, sans notion de groupement. Aucune association “image X appartient a la variante Y” n’existe au niveau de la plateforme. C’est exactement ce qu’une application doit ajouter.

Ce que ca change pour vos clients

Quand toutes les couleurs apparaissent en meme temps dans la galerie, voici ce qui se passe :

  • Confusion. Le client fait defiler les photos sans savoir laquelle correspond a sa couleur. Avec des teintes proches (bleu marine vs noir), ca devient vraiment penible.
  • Experience mobile degradee. 30 vignettes sur un smartphone, c’est inutilisable. Defilement interminable, apercu minuscule, zero lisibilite.
  • Plus de retours. Un client qui ne peut pas bien voir le produit commande au hasard. Et retourne l’article quand il ne correspond pas.
  • Conversion en baisse. Chaque seconde d’hesitation est une occasion de quitter votre boutique. Une galerie claire avec uniquement les images pertinentes convertit mieux.

Trois approches possibles

1. L’astuce du texte alternatif (manuelle, fragile)

Certains themes premium (Prestige, Impulse, Streamline) prennent en charge les hashtags dans le texte alt : Veste bleue vue de face #Bleu. Le theme filtre alors la galerie d’apres ce hashtag.

Les problemes : une faute de frappe et tout casse. Ca ne passe pas a l’echelle sur un gros catalogue. Le texte alt se retrouve pollue par des donnees techniques, ce qui nuit au SEO. Et au prochain changement de theme, plus rien ne marche.

2. Du code personnalise (developpeur requis)

Avec les templates Liquid et du JavaScript, on peut filtrer la galerie manuellement. Ca fonctionne, mais il faut un developpeur, ca casse a chaque mise a jour de theme et ca demande une maintenance permanente.

3. Une application d’images par variante (recommande)

Une application specialisee gere tout : assignation des images, filtrage de la galerie, affichage des nuanciers, compatibilite theme et reinitialisation du slider. Pas de code a toucher. Pas de bidouillage dans le texte alt. Fonctionne meme apres les mises a jour de theme.

La solution : Rubik Variant Images

Rubik Variant Images & Swatch fait exactement ce que Shopify ne sait pas faire : assigner plusieurs images par variante et filtrer la galerie en temps reel. Le client choisit “Bleu” et ne voit que les photos bleues. Il passe a “Rouge”, les photos rouges apparaissent instantanement. Sans rechargement de page.

L’application remplace aussi le selecteur de variantes standard par des nuanciers visuels. Cercles de couleur, vignettes produit ou boutons texte. Le client voit toutes les options d’un coup d’oeil avant de cliquer.

Ce qui distingue Rubik des autres applications :

  • IA Auto-Assign. L’application analyse vos images produit et les assigne automatiquement aux bonnes variantes. L’IA evalue 4 points de donnees : nom du produit, nom de la variante, nom du fichier image et texte alt. Une veste en 10 couleurs avec 6 photos par couleur? L’IA determine quelle photo correspond a quelle couleur. Zero glisser-deposer.
  • Chargement rapide. Les donnees des images de variantes sont stockees dans les metafields Shopify. Chargement base sur les metafields, aucun appel API externe. Vos Core Web Vitals ne bougent pas.
  • 350+ themes avec code natif. Dawn (ID: 887), Horizon (2481), Prestige (855), Impulse (857), Impact (1190), Focal (714), Warehouse (871), Palo Alto (777), Motion (847), Symmetry (568) et plus de 350 autres. Plus 7 page builders : GemPages, PageFly, EComposer, Instant, Beae, Foxify, Replo.
  • Videos et modeles 3D par variante. Pas seulement des images statiques. Assignez des videos produit et des modeles 3D a des variantes specifiques.
  • Isolation Shadow DOM. Les styles des nuanciers s’executent dans un Shadow DOM. Le CSS de votre theme ne casse pas les swatches. Le CSS des swatches ne casse pas votre theme.

Comment ca fonctionne

Quand un client selectionne une variante, l’application execute ces etapes en quelques millisecondes :

  1. Detection de la variante. L’application utilise jusqu’a 8 methodes de detection selon le theme : parametres d’URL, objets globaux Shopify, selecteurs specifiques au theme, scan de formulaire, etc. C’est pour ca qu’elle fonctionne sur 350+ themes.
  2. Lecture des assignations. L’application lit la correspondance variante-images depuis les metafields Shopify (chargees avec la page, pas d’appel API).
  3. Filtrage de la galerie. Les images qui n’appartiennent pas a la variante choisie sont masquees par des classes CSS. Les images assignees restent visibles.
  4. Conservation des images communes. Les images marquees comme “communes” (photos lifestyle, guides de tailles) restent affichees quelle que soit la variante.
  5. Reinitialisation du slider. Du code specifique au theme reinitialise le carrousel de la galerie (Flickity, Swiper, Slick ou natif) pour eviter les slides vides.

Tout ca est plus rapide qu’un scroll. La mise a jour de la galerie parait instantanee.

Configuration en 5 minutes (ou en secondes avec l’IA)

  1. Installer Rubik Variant Images (plan gratuit disponible).
  2. Ouvrir un produit dans l’application.
  3. Glisser les images sur les variantes souhaitees. Ou cliquer sur IA Auto-Assign et laisser l’application faire le travail.
  4. Enregistrer. Visiter la page produit. Selectionner une variante. Seules les images assignees apparaissent.

Pour les gros catalogues, il y a le Bulk Assign. C’est un regroupement base sur l’ordre des images : les images doivent etre classees par variante dans la galerie Shopify. Chaque groupe commence par l’image de variante assignee par Shopify. L’application detecte les limites et assigne les images suivantes a la variante correspondante. Ca tourne en arriere-plan sur des centaines de produits.

La boutique demo montre l’application en action. Le guide de demarrage detaille chaque etape avec des captures d’ecran.

Images communes (lifestyle, guides de tailles)

Toutes les images ne sont pas liees a une variante specifique. Les photos lifestyle, les guides de tailles ou les photos d’emballage doivent rester visibles quelle que soit la couleur selectionnee.

Rubik Variant Images propose la fonction images communes. Marquez une image comme “commune” et elle apparait toujours dans la galerie, independamment de la variante choisie. Vous decidez aussi si les images communes s’affichent avant ou apres les images specifiques a la variante.

Et les nuanciers sur les pages collection?

Rubik Variant Images filtre la galerie d’images sur la page produit. Les nuanciers sur les pages collection (les petits cercles de couleur sous chaque produit dans la grille) sont une fonction differente. Pour ca, vous avez besoin de Rubik Combined Listings, une application distincte concue specifiquement pour les pages collection.

Pour en savoir plus, consultez notre article sur les nuanciers sur les pages collection Shopify.

Themes compatibles

Rubik Variant Images inclut du code natif pour plus de 350 themes Shopify et 7 page builders. Les plus demandes :

  • Dawn (ID: 887) et tous les themes gratuits : Horizon (2481), Atelier (3621), Fabric (3622), Dwell (3623), Heritage (3624), Ritual (3625), Savor (3626), Tinker (3627), Vessel (3628), Pitch (3620), Ride (1500), Sense (1356), Craft (1368), Taste (1434), Refresh (1567)
  • Prestige (855), Impulse (857), Impact (1190), Focal (714), Warehouse (871) : l’astuce du texte alt n’est plus necessaire.
  • Palo Alto (777), Motion (847), Symmetry (568), Streamline (872), Broadcast (868), Pipeline (739), Flow (801)
  • Themes ThemeForest : Minimog, Ella, Turbo, Debutify, Kalles, Ecomus, Booster
  • Page builders : GemPages, PageFly, EComposer, Instant, Beae, Foxify, Replo

Si votre theme n’est pas dans la liste, l’application fonctionne quand meme via la detection standard et les selecteurs generiques. Vous pouvez aussi contacter le support pour demander un code natif pour votre theme.

Video

Regardez le filtrage de galerie en action :

Essayer Rubik Variant Images gratuitement

Questions frequentes

Comment afficher uniquement les images de la variante selectionnee dans Shopify?

Shopify ne le fait pas nativement. Vous avez besoin d’une application d’images par variante ou de code theme personnalise. Rubik Variant Images assigne plusieurs images par variante et filtre la galerie en temps reel. Compatible avec plus de 350 themes sans modification de code.

Peut-on masquer les images des autres variantes?

Pas avec Shopify seul. Toutes les images produit apparaissent toujours dans la galerie, quelle que soit la variante choisie. Rubik Variant Images masque les images des autres variantes et n’affiche que celles de la variante selectionnee. Le filtrage est instantane, sans rechargement de page.

Peut-on assigner plusieurs images a une variante?

Pas avec Shopify tout seul. Shopify autorise exactement une image par variante. Rubik Variant Images permet un nombre illimite d’images, de videos et de modeles 3D par variante. Quand le client selectionne une variante, tous les medias assignes apparaissent dans la galerie.

Que faire des images qui doivent rester visibles pour toutes les variantes?

Marquez-les comme “images communes” dans Rubik Variant Images. Les photos lifestyle, guides de tailles ou images d’emballage resteront visibles quelle que soit la variante choisie par le client.

L’IA peut-elle assigner les images automatiquement?

Oui. L’IA Auto-Assign de Rubik analyse 4 points de donnees : nom du produit, nom de la variante, nom du fichier image et texte alt. Elle determine quelle image correspond a quelle variante. Vous pouvez lancer ca pour un produit ou pour tout votre catalogue via Bulk Assign.

Est-ce que ca ralentit la page produit?

Non. Rubik stocke toutes les donnees dans les metafields Shopify. Chargement base sur les metafields, aucun appel API externe. Vos Core Web Vitals et votre score Page Speed ne sont pas affectes.

A lire aussi

Co-Founder of Rubik Variant Images & Swatch

Related Posts