Afficher des pastilles de couleur et d’image pour les variantes de produit

Activez les pastilles dans le bloc Variant picker de Cama et fournissez les données de pastilles de couleur ou d’image depuis Shopify : les options du produit s’afficheront alors sous forme de pastilles de couleur ou d’image au lieu de simples boutons ou valeurs de menu déroulant. Appliquez les mêmes étapes à la page produit principal et à la section Produit vedette.

Comment les pastilles sont fournies

Les couleurs et les images des pastilles proviennent de Shopify, et non de Cama. Une valeur d’option affiche une pastille uniquement lorsqu’elle contient les données de pastille natives de Shopify — une couleur ou une image enregistrée sur la valeur d’option du produit. Lorsque ces données existent et que Enable swatches est activé, Cama affiche la pastille ; en l’absence de données natives, l’option utilise les boutons ou le menu déroulant configurés.

L’image du produit d’une variante est distincte d’une pastille d’image. Le téléversement d’une image de variante standard ne crée pas de pastille d’image ; une pastille d’image est définie directement sur la valeur d’option.

Ajouter des données de pastilles de couleur ou d’image dans l’interface d’administration Shopify

Configurez les données des pastilles dans Produits avant de configurer le thème. Le produit doit avoir une catégorie de Shopify Standard Product Taxonomy qui expose un métachamp de catégorie de couleur.

1. Dans l’interface d’administration Shopify, accédez à Products et ouvrez le produit.

2. Dans Category, attribuez une catégorie qui fournit un métachamp de catégorie de couleur.

3. Dans Category metafields, ouvrez le champ de couleur concerné et sélectionnez une entrée existante ou choisissez Add new entry.

4. Renseignez les champs prédéfinis de l’entrée, en saisissant la couleur sous forme de valeur hexadécimale ou en fournissant une image, puis enregistrez.

5. Dans Variants, cliquez sur + Add options like size or color et sélectionnez le métachamp de catégorie afin que ses entrées alimentent les valeurs d’option.

6. Sélectionnez les valeurs à utiliser et enregistrez le produit.

Pour consulter le guide Shopify complet, consultez le guide Shopify ajout de pastilles de couleur à l’aide de métachamps de catégorie.

Modifier la pastille d’une option existante

Modifiez l’entrée de métachamp de catégorie associée pour changer la couleur ou l’image affichée par une valeur d’option.

Sur le produit, cliquez sur l’option de variante, cliquez sur le champ de valeur d’option, cliquez sur l’entrée, cliquez sur Edit, modifiez les champs, puis cliquez sur Save.

Pour mettre à jour la pastille de chaque produit utilisant la même entrée, modifiez-la globalement sous Content → Metaobjects → category-metafield definition, puis ouvrez l’entrée.

Activer les pastilles dans l’éditeur de thème

Activez les pastilles pour chaque option de produit dans le bloc Variant picker, situé dans la zone Informations sur le produit du modèle de produit et également disponible dans la section Produit vedette.

1. Dans Boutique en ligne → Thèmes → Personnaliser, ouvrez le modèle de produit.

2. Sélectionnez la section Informations sur le produit et ouvrez le bloc Variant picker.

3. Activez Enable swatches. Cette option est activée par défaut.

4. Sous Picker type, choisissez Pills ou Dropdown.

Fonctionnement du type de sélecteur et des options indisponibles

Lorsque Enable swatches est activé et que les données de pastille sont disponibles, un sélecteur Pills devient un sélecteur de pastilles et un sélecteur Dropdown affiche un aperçu de la pastille sélectionnée. La sélection d’une pastille sélectionne la variante correspondante et met à jour le prix, les contenus multimédias, la disponibilité et l’état du bouton d’ajout au panier ; sur le modèle de produit, elle met également à jour l’URL du navigateur, contrairement à la section Produit vedette et aux interfaces d’ajout rapide.

Les options indisponibles s’affichent avec un style indiquant qu’elles sont épuisées ou indisponibles, ainsi qu’un libellé hors écran Variant sold out or unavailable ; dans un menu déroulant, une valeur indisponible affiche le suffixe « - Unavailable ».

Pour arrondir les angles des pastilles de couleur et d’image, définissez Swatch border radius dans les styles généraux du thème sur une valeur comprise entre 0 et 100 (la valeur par défaut est 30).

Prévisualiser le résultat

Prévisualisez la page du produit et sélectionnez chaque pastille pour vérifier que la variante, les contenus multimédias et le prix se mettent à jour comme prévu. Vérifiez ensuite une option dépourvue de données de pastille Shopify afin de confirmer qu’elle utilise les boutons ou le menu déroulant, puis sélectionnez une option indisponible pour vérifier qu’elle est indiquée comme telle. Répétez ces vérifications dans la section Produit vedette pour confirmer que le comportement est identique.

Le Variant picker est l’un des blocs de produit disponibles dans les sections de produit.

FAQ