Afficher des pastilles de couleur et d’image pour les variantes de produit
Mis à jour avant-hier
Activez les pastilles dans le bloc Sélecteur de variante de Cama et fournissez les données de pastilles de couleur ou d’image depuis Shopify : les options du produit s’affichent alors sous forme de pastilles de couleur ou d’image au lieu de simples boutons ou valeurs de liste déroulante. 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, c’est-à-dire une couleur ou une image enregistrée sur la valeur de l’option du produit. Lorsque ces données existent et que Activer les pastilles est activé, Cama affiche la pastille ; en l’absence de données natives, l’option utilise les boutons ou la liste déroulante configurés.
L’image du produit d’une variante est distincte d’une image de pastille. Le téléversement d’une image de variante standard ne crée pas d’image de pastille ; une image de pastille est définie directement sur la valeur de l’option.
Ajouter des données de pastille de couleur ou d’image dans l’interface administrateur Shopify
Configurez les données des pastilles dans Produits avant de configurer le thème. Le produit doit disposer d’une catégorie de la taxonomie standard des produits Shopify qui expose un métachamp de catégorie de couleur.
Dans l’interface administrateur Shopify, accédez à Produits et ouvrez le produit.
Dans Catégorie, attribuez une catégorie qui fournit un métachamp de catégorie de couleur.
Dans Métachamps de catégorie, ouvrez le champ de couleur approprié, puis sélectionnez une entrée existante ou choisissez Ajouter une nouvelle entrée.
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.
Dans Variantes, cliquez sur + Ajouter des options telles que la taille ou la couleur et sélectionnez le métachamp de catégorie afin que ses entrées alimentent les valeurs de l’option.
Sélectionnez les valeurs à utiliser, puis enregistrez le produit.
Pour consulter la procédure complète de Shopify, 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 de l’option, cliquez sur l’entrée, cliquez sur Modifier, modifiez les champs, puis cliquez sur Enregistrer.
Pour mettre à jour la pastille de chaque produit qui utilise la même entrée, modifiez-la globalement sous Contenu → Métaobjets → définition du métachamp de catégorie, 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 Sélecteur de variante, situé dans la zone Informations sur le produit du modèle de produit et également disponible dans la section Produit vedette.
Dans Boutique en ligne → Thèmes → Personnaliser, ouvrez le modèle de produit.
Sélectionnez la section Informations sur le produit et ouvrez le bloc Sélecteur de variante.
Activez Activer les pastilles. Cette option est activée par défaut.
Sous Type de sélecteur, choisissez Boutons ou Liste déroulante.
Comportement du type de sélecteur et des options indisponibles
Lorsque Activer les pastilles est activé et que les données de pastille sont présentes, un sélecteur Boutons devient un contrôle de pastilles et un sélecteur Liste déroulante 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 de l’ajout au panier ; sur le modèle de produit, elle met également à jour l’URL du navigateur, contrairement aux surfaces Produit vedette et d’ajout rapide.
Les options indisponibles s’affichent avec un style indiquant qu’elles sont épuisées ou indisponibles et un libellé hors écran « Variante épuisée ou indisponible » ; dans une liste déroulante, une valeur indisponible affiche le suffixe « - Indisponible ».
Pour arrondir les angles des pastilles de couleur et d’image, définissez Rayon de bordure des pastilles sous 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 la liste déroulante, puis sélectionnez une option indisponible pour confirmer qu’elle est indiquée comme telle. Répétez ces vérifications dans la section Produit vedette pour confirmer le même comportement.
Le Sélecteur de variante fait partie des blocs de produit disponibles dans les sections de produit.