Shopify vous permet d'ajouter des images aux options de produits, afin que les clients puissent voir à quoi ressemble chaque choix. Cependant, étant réglementé par Shopify, vous ne pouvez associer qu'une seule image à une seule valeur d'option. La question est donc de savoir comment associer plusieurs images à une seule option ?
Il existe une réponse dans Concept , dans laquelle vous pouvez spécifier certaines images pour une valeur d'option . Cette fonction est particulièrement adaptée à l’option de couleur, mais vous pouvez l’utiliser à d’autres fins.
Sur cette page
- Exigences
- Choisis une option
- Modifier la balise ALT des images
- Définir (ou conserver) mon propre texte alternatif
Exigences
Cet article concerne la configuration dans le thème Concept .
Vous devez désactiver l' option Masquer les médias des autres variantes après avoir sélectionné une variante . Cette option est compatible avec le comportement natif de Shopify : associer une seule image à une valeur d'option.
Dans Concept , cette option est disponible dans les sections suivantes :
- Section produits en vedette .
- Section d'informations sur le produit (dans les pages produits.)
Choisissez une option que vous souhaitez
Regardez votre produit dans votre interface administrateur et choisissez une option pour laquelle vous souhaitez classer vos images.
Dans l'exemple ci-dessous, j'ai décidé de choisir Color . Le produit Flow Harmony est disponible dans les couleurs Gold Tone , Black , Chestnut , Navy et Crimson Shadow et je souhaite uniquement afficher les images respectives lorsqu'un utilisateur sélectionne une option.
Modifier la balise ALT des images
Vous devez modifier la balise alt pour spécifier le « nom de l'option et la valeur de l'option » auxquels appartient l'image :
Passez la souris sur l'image et cliquez sur le bouton à six points pour ouvrir les informations de l'image
Cliquez sur Ajouter un texte alternatif .
Utilisez le nom de votre option que vous choisissez en combinant avec la valeur de l'option . La syntaxe est ici très importante et doit être dans l'ordre suivant :
-
#
(caractère hashtag) -
option-name
(minuscule, remplacer tous les espaces par des tirets) -
_
(caractère de soulignement) -
option-value
(minuscule, remplacer tous les espaces par des tirets)
Par exemple, si je choisis l'option Couleur et que je souhaite associer une image à la couleur Gold Tone , le texte alternatif doit être
#color_gold-tone
-
Cliquez sur Enregistrer le texte alternatif pour enregistrer les modifications.
Faites le même processus pour les autres images.
Définir (ou conserver) mon propre texte alternatif
Que faire si je souhaite définir (ou conserver) mon propre alt utilisé à des fins de référencement ? Ajoutez simplement quelque chose dans le champ alt avant le caractère # , comme ceci :
Nous espérons que cet article vous a été utile. Si vous avez des questions ou des préoccupations concernant cette fonctionnalité, n'hésitez pas à contacter notre équipe pour obtenir de l'aide.
"