Variantes de produit

Liens en vedette

1. Blog Shopify : pastilles
2. Documentation pour développeurs Shopify sur l’objet swatch
3. Documentation MDN sur les couleurs nommées
4. Documentation Shopify sur l’ajout de variantes
5. Application Shopify Translate & Adapt
6. Documentation Shopify sur l’ajout de pastilles de couleur à l’aide de métachamps de catégorie

Vidéos utiles

Vidéo Shopify Academy : personnaliser votre boutique

Vidéo Shopify Academy : personnaliser votre boutique

Utilisez le bloc Variant selector d’Align pour permettre aux clients de choisir des options de produit telles que la taille, la couleur ou la longueur des manches. Ajoutez le bloc à la section Product information d’un modèle de produit ou à une section Featured product sur un autre modèle.

Pour configurer les produits et les variantes dans Shopify, consultez la documentation Shopify sur l’ajout de variantes

Les produits comportant des options de variante nécessitent un bloc Variant selector pour que l’action d’ajout au panier fonctionne. Le bloc ne s’affiche pas pour les produits ne comportant aucune option de variante.

Styles de sélecteur de variantes

Choisissez la manière dont les options de variante standard apparaissent dans le modèle Align sélectionné. Chaque bloc Variant selector possède ses propres paramètres, ce qui vous permet d’adapter l’expérience à différents produits ou collections.

Menus déroulants et boutons

Utilisez le paramètre Variant selector style pour choisir l’une des mises en page suivantes :

• Les Dropdowns constituent la mise en page par défaut et placent les options telles que Size, Color et Sleeves dans des menus de sélection.

  Dropdown style

• Les Pills affichent les options sous forme de boutons sélectionnables.

  Pills style

Pastilles

Les pastilles sont des contrôles de variante visuels qui peuvent rendre les options plus faciles à comparer que des menus déroulants ou des boutons constitués uniquement de texte. Elles fournissent un retour visuel, permettent une mise en page plus compacte et aident les clients à identifier rapidement les couleurs, les motifs ou les images de produits.

Align prend en charge deux types de pastilles :

1. Les Color swatches affichent une couleur pour une valeur d’option.
2. Les Image swatches affichent la miniature attribuée à une option de variante.

Pastilles de couleur

Les pastilles de couleur tentent automatiquement d’associer une valeur d’option à une couleur CSS nommée. Par exemple, la valeur d’option Black utilise #000000 par défaut. Ajoutez des définitions de couleur personnalisées lorsque les valeurs d’option nécessitent un traitement de couleur spécifique.

Activer les pastilles de couleur

1. Ouvrez un modèle de produit dans l’éditeur de thème Shopify.

2. Dans la section Product information, sélectionnez le bloc Variant selector.

3. Activez les pastilles de couleur.

   [!NOTE] Les pastilles de couleur remplacent le style Variant selector sélectionné. L’option concernée n’utilise donc plus de contrôles de type menu déroulant ou bouton.

4. Saisissez le ou les noms d’option de variante dans Color swatch Option names.

   • Utilisez le nom de l’option, tel que Color, plutôt que ses valeurs, telles que Black, Brown, Blue.
   • Vous pouvez saisir plusieurs noms d’option séparés par des virgules.
   • Les noms d’option traduits fonctionnent également. Par exemple, les boutiques utilisant l’application Shopify Translate & Adapt peuvent utiliser Color, Couleur ou Spalva.

5. Prévisualisez les pastilles. Par défaut, chaque pastille utilise sa valeur d’option comme nom de couleur. Consultez les couleurs CSS nommées disponibles.

6. Ajoutez des valeurs de couleur personnalisées si nécessaire.

   1. Ouvrez Theme settings dans l’éditeur de thème.
   2. Ouvrez Colors et recherchez Custom color swatches.
   3. Saisissez des paires nom d’option-couleur HEX séparées par des virgules, par exemple : Black: #000, Red: #ff0000.

Pour configurer les couleurs à l’aide de métachamps de catégorie, consultez la documentation Shopify sur l’ajout de pastilles de couleur à l’aide de métachamps de catégorie

Si vous utilisez une option qui n’est pas une couleur, telle que Material, comme pastille de couleur, définissez chaque valeur dans Custom color swatches. Sans définition correspondante, les pastilles apparaissent vides.

Pastilles d’image

Les pastilles d’image affichent la miniature attribuée à chaque option de variante. Une option sans image associée apparaît vide. Lorsque des pastilles de couleur et d’image s’appliquent à la même option, les pastilles d’image sont prioritaires.

Activer les pastilles d’image

1. Ouvrez un modèle de produit dans l’éditeur de thème Shopify.

2. Dans la section Product information, sélectionnez le bloc Variant selector.

3. Activez les pastilles d’image.

   [!NOTE] Les pastilles d’image remplacent le style Variant selector sélectionné pour l’option concernée.

4. Saisissez le ou les noms d’option de variante dans Image swatch Option names.

Fonctionnement des pastilles d’image

• Les pastilles de couleur et d’image peuvent être combinées. Un produit peut utiliser différents types de pastilles pour différents groupes d’options.
• Chaque variante prend en charge une pastille d’image.
• Les combinaisons de variantes utilisent leur image spécifique. Par exemple, une variante avec les options Small et Black utilise l’image attribuée à cette combinaison exacte.
• Les images répétées ne s’affichent qu’une seule fois. Si plusieurs groupes d’options utilisent la même image, seul le groupe d’options indiqué en premier dans le paramètre affiche une pastille d’image. Les groupes suivants utilisent l’interface par défaut pour éviter d’afficher plusieurs fois la même image.

Paramètres de style des pastilles

Les pastilles de couleur et d’image comprennent des paramètres d’affichage permettant d’ajuster leur forme et leur mise en page.

Style des pastilles

Choisissez un style de pastille adapté aux images du produit et à l’espace disponible :

• Default affiche les pastilles d’image selon leur rapport hauteur/largeur naturel. Cette option est disponible uniquement pour les pastilles d’image.
• Circle
• Landscape
• Portrait
• Square
• Widescreen

Nombre de colonnes

Utilisez des paramètres de colonnes distincts pour ordinateur et appareil mobile afin de contrôler la largeur des pastilles dans une mise en page responsive. Un nombre de colonnes élevé crée des pastilles plus étroites, tandis qu’un nombre plus faible crée des pastilles plus larges.

1. Choisissez entre une et huit colonnes.
2. Vérifiez les vues sur ordinateur et appareil mobile, puis ajustez chaque paramètre pour obtenir une zone tactile confortable et une mise en page lisible.
3. Le nombre de colonnes contrôle la largeur des pastilles de couleur et d’image et utilise automatiquement une taille d’image appropriée.

Astuce

Prévisualisez toujours les pastilles sur appareil mobile, en particulier lorsque les produits possèdent de nombreuses valeurs d’option. Un nombre de colonnes adapté à un ordinateur peut rendre les pastilles trop petites ou trop serrées sur les écrans plus petits.

Notes d’utilisation

1. Gardez un bloc de sélection disponible. Les produits avec variantes nécessitent le bloc Variant selector pour permettre aux clients d’ajouter la variante sélectionnée au panier.
2. Utilisez les noms d’option exacts. Saisissez des libellés d’option tels que Color ou Material, et non des valeurs d’option individuelles, lorsque vous activez les pastilles.
3. Définissez les couleurs non standard. Ajoutez des définitions de couleur personnalisées pour les valeurs qui ne sont pas reconnues comme des noms de couleur afin d’éviter des pastilles de couleur vides.
4. Attribuez soigneusement les images aux variantes. Les pastilles d’image dépendent des images attribuées aux combinaisons de variantes concernées.
5. Vérifiez les mises en page mobiles. Examinez le nombre de colonnes et la taille des pastilles sur mobile avant de publier les modifications.