Puis-je associer plusieurs images à une seule option ?

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:

  1. 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)
  2. 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.

  3. 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 :

      1. Passez la souris sur l'image et cliquez sur le bouton à six points pour ouvrir les informations de l'image
      2. 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.
  4. Cliquez sur Enregistrer pour enregistrer les modifications
  5. Faites le même processus pour les autres images
  6. 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.

Discutez sur WhatsApp