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 Be Yours, dans laquelle vous pouvez spécifier certaines images pour une valeur d'option d'option . Cette fonction est particulièrement adaptée à l’option de couleur, mais vous pouvez l’utiliser à d’autres fins.

Mesures:
Exigences
- Soyez le vôtre 4.0.0 ou version ultérieure
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 Be Yours, cette option est disponible dans les sections suivantes :
- Section produits en vedette
- Section d'informations sur le produit (sur les pages produits)
- Section d'informations sur le produit (sur le modal du produit)
Choisissez une option
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 . Mon produit est disponible dans les couleurs Blanc , Blé et Noir et je souhaite afficher les images respectives uniquement lorsqu'un utilisateur sélectionne une valeur d'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
- Dans la zone de texte Alt , saisissez votre texte alternatif en utilisant le nom de l'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 Noir , le texte alternatif doit être
#color_black
Remarques :
À partir de la version 7.2.0 de Be Yours , nous prenons en charge plusieurs langues dans notre fonctionnalité d'images à options multiples .
Jetez un œil à cet exemple ci-dessous pour l’anglais et le français. Le nom de l'option est « Color » en anglais et « Couleur » en français, la valeur de l'option est « Black » en anglais et « Noire » en français.
Après avoir cliqué sur l'image à laquelle vous souhaitez ajouter du texte ALT, définissez le texte ALT :
#en:color_black,fr:couleur_noire
Voici comment procéder :
- Inclure le code de langue : Ajoutez le code de langue, suivi de deux points (:), avant chaque nom de couleur.
- Séparez chaque paire de langues par des virgules : Séparez chaque paire de langues par des virgules (,). Cela indiquera la fin d’une paire de langues et le début de la suivante.
- Passez la souris sur l'image et cliquez sur le bouton à six points pour ouvrir les informations de l'image
- Cliquez sur Enregistrer 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 savons que la plupart des clients se soucient du référencement et vous pourrez améliorer votre efficacité en ajoutant des balises alt à toutes les images conformément aux instructions ci-dessus.
SEO : Image Optimizer Page Speed d'AVADA est une application hautement recommandée pour le référencement d'images afin de vous aider à surpasser vos concurrents dans les résultats de recherche. Cette application exploite facilement votre référencement grâce à l'automatisation en :
- Optimisation de l'image ALT/balises méta/JSON-LD pour être compatible avec la recherche Google.
- Optimiser la taille des images sans perte de qualité pour accélérer votre site Web.
>> Apprenez-en plus sur le référencement : Image Optimizer Page Speed dès aujourd'hui !
* Les images sont utilisées uniquement à des fins de démonstration de produits non commerciales et sont uniquement destinées à être utilisées dans la documentation d'instructions du thème Be Yours.
Besoin d'une aide supplémentaire
Si vous rencontrez des problèmes ou avez besoin d'aide supplémentaire avec votre thème BeYours, veuillez contacter nos services d'assistance via notre système de tickets pour obtenir de l'aide dans les 8 heures.
Scannez le code QR ci-dessous pour rejoindre notre communauté WhatsApp pour les mises à jour, les actualités et les annonces.
Share:
Comment configurer des échantillons de couleurs dans Be Yours 7.1.0 ou version ultérieure
Tirez parti de votre personnalisation en utilisant des sources dynamiques et des métachamps