La plupart des boutiques Shopify proposent des produits en plusieurs couleurs, mais ces options ne sont pas toujours visibles lorsque les clients parcourent une collection.
Un produit peut exister en Noir, Blanc, Olive et Marine, alors que la page de collection n’affiche qu’une seule image produit. Les clients doivent ouvrir la page produit simplement pour découvrir les autres couleurs.
Ajouter des pastilles de couleur (swatches) aux pages de collection Shopify résout ce problème en affichant les couleurs de variantes disponibles directement sous chaque carte produit.
La façon de procéder dépend de votre thème Shopify. Dawn et Horizon gèrent les pastilles de couleur différemment, et tous les thèmes ne peuvent pas afficher nativement des pastilles sur les cartes produits des collections.
Dans ce guide, nous expliquons la différence et montrons comment ajouter des pastilles de couleur, d’image ou bouton aux pages de collection avec Stamp — Show Variants on Collection.
Que sont les pastilles de couleur sur une page de collection Shopify ?
Les pastilles de couleur sont de petits sélecteurs visuels affichés sous une carte produit.
Au lieu de n’afficher qu’une seule image produit, les acheteurs voient immédiatement que le produit existe aussi dans d’autres couleurs.
Par exemple, une veste pourrait apparaître sous la forme d’une seule carte produit avec :
- Noir
- Olive
- Sable
- Marine
affichées sous forme de quatre petites pastilles de couleur en dessous.
Les clients obtiennent ainsi plus d’informations sans devoir ouvrir chaque produit individuellement.
Pastilles de couleur ou variantes affichées comme produits séparés
Il existe deux façons courantes de rendre les variantes Shopify plus visibles sur les pages de collection.
Les pastilles de couleur conservent une seule carte produit et affichent les options de variante en dessous.
Les variantes comme produits affichent les variantes sélectionnées sous forme de cartes individuelles dans la grille de collection.
Par exemple :
- Avec des pastilles : une seule carte « T-shirt Classique » avec des pastilles Noir, Blanc et Vert en dessous.
- Avec les variantes comme produits : T-shirt Classique Noir, T-shirt Classique Blanc et T-shirt Classique Vert apparaissent chacun séparément dans la collection.
Si vous préférez afficher les variantes sous forme de cartes produits individuelles, consultez notre guide :
Comment afficher les variantes sur la page de collection dans Shopify
Shopify peut-il afficher des pastilles de couleur sur les pages de collection ?
Cela dépend de votre thème.
Shopify prend en charge les données de pastilles (swatch) pour les options de produit, mais c’est votre thème qui décide où et comment ces données sont affichées.
Autrement dit, avoir des pastilles de couleur sur votre page produit ne signifie pas automatiquement que ces mêmes pastilles apparaîtront sur les cartes produits des collections.
Dawn peut-il afficher des pastilles de couleur sur les pages de collection ?
Pas nativement sur les cartes produits des collections.
Le thème Dawn de Shopify prend en charge les pastilles via le sélecteur de variantes de la page produit. Si l’option de couleur d’un produit dispose de données de pastilles Shopify configurées, Dawn peut l’afficher sous forme de pastille de couleur ou d’image sur la page produit.
Cependant, Dawn ne propose aucun paramètre natif dans l’éditeur de thème pour afficher ces pastilles de variantes sous les cartes produits des pages de collection.
Si vous ouvrez :
Boutique en ligne → Thèmes → Personnaliser → Collection
vous ne trouverez aucun paramètre intégré du type « Afficher les pastilles de couleur » pour les cartes produits des collections de Dawn.
Techniquement, un développeur pourrait écrire du code Liquid, CSS et JavaScript personnalisé pour ajouter cette fonctionnalité à Dawn. Mais cela implique de modifier l’implémentation des cartes produits du thème et de maintenir ces modifications à chaque évolution du thème.
Si vous souhaitez afficher des pastilles sur les pages de collection de Dawn sans développer ni maintenir de code de thème personnalisé, vous pouvez utiliser Stamp — Show Variants on Collection.
Horizon peut-il afficher des pastilles de couleur ?
Oui. Horizon prend en charge nativement les pastilles de couleur.
Horizon fait partie de la nouvelle architecture de thèmes de Shopify et inclut la prise en charge native des pastilles de couleur et des filtres par pastilles.
Si vous utilisez Horizon, commencez par configurer l’option de couleur de votre produit à l’aide des données de pastilles Shopify.
Pour cela, associez l’option de produit au métachamp de catégorie « Couleur » de Shopify et attribuez la couleur ou l’image appropriée à chaque valeur d’option.
Une fois les données de pastilles configurées, ouvrez :
Boutique en ligne → Thèmes → Personnaliser
et vérifiez les paramètres disponibles pour les cartes produits et la grille de produits dans votre thème Horizon.
Horizon repose sur la nouvelle architecture de thèmes par blocs de Shopify : les pastilles peuvent donc s’intégrer plus naturellement au thème qu’avec Dawn.
Toutefois, les pastilles natives du thème et une application comme Stamp répondent à des besoins légèrement différents.
Quand utiliser Stamp plutôt que les pastilles natives d’Horizon ?
Si les pastilles natives d’Horizon vous offrent déjà exactement la mise en page de collection dont vous avez besoin, vous pouvez les utiliser.
Mais Stamp devient utile lorsque vous avez besoin de plus de contrôle sur l’affichage des variantes dans votre boutique.
Par exemple, avec Stamp, vous pouvez configurer des pastilles de variantes pour les emplacements pris en charge suivants :
- Pages de collection
- Résultats de recherche
- Sections produits Stamp
Vous pouvez aussi choisir différents styles visuels et sources de données, plutôt que de dépendre entièrement de ce que propose votre thème.
C’est particulièrement utile si vous souhaitez la même présentation des variantes, que votre boutique utilise Dawn, Horizon ou un autre thème Shopify.
Comment afficher des pastilles de couleur sur les pages de collection Shopify avec Stamp
L’option la plus simple et indépendante du thème est Stamp — Show Variants on Collection.
Stamp est conçu spécifiquement pour afficher les variantes Shopify dans les grilles de produits.
Au lieu de réécrire les cartes produits de votre thème, vous configurez l’affichage des variantes directement depuis l’application.
Étape 1 : installer Stamp
Installez Stamp — Show Variants on Collection depuis le Shopify App Store.
Étape 2 : activer l’intégration d’application Stamp
Rendez-vous dans :
Admin Shopify → Boutique en ligne → Thèmes → Personnaliser → Intégrations d’applications
Activez l’intégration d’application Stamp et enregistrez votre thème.
Étape 3 : activer les pastilles de variantes
Ouvrez Stamp et activez la fonctionnalité de pastilles pour vos pages de collection.
Vos produits restent alors des cartes produits classiques, tandis que leurs options de variantes s’affichent en dessous.
Choisir le style d’affichage de vos pastilles Shopify
Stamp propose plusieurs styles de pastilles selon le type d’option que vous souhaitez afficher.
Pastilles de couleur
Les pastilles de couleur sont idéales pour les options de couleur simples.
Par exemple :
- Noir
- Blanc
- Bleu
- Vert
- Rouge
peuvent être affichées sous forme de pastilles colorées plutôt qu’en texte brut.
Pastilles d’image
Parfois, une couleur unie ne suffit pas à représenter une variante.
Les pastilles d’image conviennent mieux pour :
- Les motifs
- Les textures de tissu
- Les imprimés
- Les finitions bois
- Les matières
- Les designs multicolores
Au lieu d’un simple rond de couleur, l’acheteur voit une image représentant cette option.
Pastilles bouton
Toutes les variantes n’ont pas besoin d’être représentées par une couleur.
Stamp peut aussi afficher les valeurs de variantes sous forme de boutons.
C’est utile pour des options comme :
- S / M / L / XL
- 25 cm / 30 cm / 35 cm
- 250 ml / 500 ml / 1 L
Choisir la source de la valeur des pastilles
Stamp vous permet aussi de contrôler la source utilisée pour générer vos pastilles.
Variante
Vous pouvez générer la pastille directement à partir de la valeur d’option de la variante du produit.
Pastille du thème
Si vous avez déjà configuré des données de pastilles Shopify pour vos produits, Stamp peut réutiliser ces valeurs existantes.
C’est pratique lorsque votre page produit dispose déjà de pastilles de couleur ou d’image correctement configurées et que vous souhaitez les réutiliser sur les pages de collection.
Métachamp
Pour des catalogues plus avancés, vous pouvez utiliser les données d’un métachamp comme source de vos pastilles.
Personnaliser l’apparence des pastilles de collection
Les pastilles doivent s’intégrer naturellement au design de votre boutique.
Stamp propose des réglages pour styliser leur affichage sous les cartes produits.
Selon votre configuration, vous pouvez ajuster des paramètres tels que :
- La forme des pastilles
- La taille des pastilles
- La hauteur
- L’épaisseur de la bordure
- La couleur de la bordure
- L’alignement
- Les marges et espacements
Par exemple, une boutique de vêtements pourra utiliser de petites pastilles rondes, tandis qu’une boutique de meubles ou de tissus préférera de plus grandes pastilles d’image.
Afficher les pastilles des variantes épuisées
Un produit peut exister en six couleurs alors que seules quatre sont actuellement disponibles.
Au lieu de masquer complètement les couleurs indisponibles, vous pouvez les distinguer visuellement des variantes disponibles.
Les clients comprennent ainsi que le produit existe dans cette couleur, sans que l’option indisponible paraisse sélectionnable.
Afficher des pastilles sur Dawn avec Stamp
Pour les boutiques sous Dawn, Stamp est particulièrement utile, car Dawn ne dispose d’aucun paramètre natif de pastilles sur les cartes de collection.
Vous pouvez conserver vos cartes produits Dawn existantes et utiliser Stamp pour ajouter des pastilles de variantes en dessous, sans reconstruire manuellement le code des cartes produits de collection de Dawn.
Vous pouvez ainsi ajouter :
- Des pastilles de couleur
- Des pastilles d’image
- Des pastilles bouton
tout en conservant la mise en page de collection Dawn existante.
Afficher des pastilles sur Horizon avec Stamp
Horizon prend déjà en charge nativement les pastilles de couleur Shopify : vous n’aurez donc pas toujours besoin d’une application pour des pastilles basiques.
Cependant, Stamp reste utile si vous souhaitez un contrôle plus cohérent sur l’affichage des variantes dans les pages de collection, les résultats de recherche et les autres sections produits prises en charge.
Cela signifie aussi que la mise en avant de vos variantes n’est pas entièrement liée à un seul thème.
Si vous passez plus tard d’Horizon à un autre thème, vous pouvez continuer à gérer l’affichage des variantes de vos collections via Stamp, au lieu de tout reconfigurer pour le nouveau thème.
Combiner variantes de couleur et pastilles
Vous n’êtes pas obligé de choisir entre afficher les variantes comme produits et afficher des pastilles de variantes.
Stamp permet aussi de combiner les deux approches.
Par exemple, imaginez une veste avec :
- 5 couleurs
- 4 tailles
Vous pourriez afficher chaque variante de Couleur comme sa propre carte produit dans la collection, puis afficher la Taille sous forme de pastilles bouton sous chaque carte.
Votre collection pourrait ressembler à ceci :
Veste Classique — Noir
S M L XL
Veste Classique — Olive
S M L XL
Veste Classique — Marine
S M L XL
Les clients obtiennent ainsi beaucoup plus d’informations sur les variantes directement depuis la page de collection, sans avoir besoin de produits Shopify séparés.
Quelle méthode choisir ?
Si vous utilisez Dawn et souhaitez des pastilles de couleur sous les cartes produits des collections, il n’existe pas de paramètre natif pour cela. Il vous faut soit un développement de thème personnalisé, soit une application comme Stamp.
Si vous utilisez Horizon, Shopify inclut déjà des pastilles de couleur natives : vérifiez si l’implémentation native du thème offre l’expérience que vous recherchez.
Si vous voulez plus de contrôle sur la présentation des variantes, ou la même fonctionnalité sur différents thèmes et grilles de produits, Stamp offre une solution indépendante du thème.
Résultat final
Afficher les couleurs des variantes directement sur une page de collection aide les acheteurs à comprendre quels produits sont réellement disponibles avant même d’ouvrir la page produit.
Avec Stamp — Show Variants on Collection, vous pouvez ajouter des pastilles de couleur, d’image et bouton aux pages de collection Shopify et contrôler l’affichage de vos variantes dans toute votre boutique.
Vous utilisez Dawn ? Stamp peut ajouter des pastilles de collection qui ne sont pas disponibles en tant que paramètre natif des cartes produits.
Vous utilisez Horizon ? Vous pouvez utiliser la prise en charge native des pastilles de Shopify, ou Stamp si vous avez besoin de plus de contrôle sur la présentation des variantes dans vos collections.
Vous préférez que chaque variante apparaisse comme un élément séparé dans la collection ?
Lisez notre guide complet : Comment afficher les variantes sur la page de collection dans Shopify.
