Éléments Shopify – Image du produit

• Source d’image par défaut: Il existe 2 options pour choisir d’afficher l’image du produit, telles que:
  • L’image sélectionnée
  • Image de la première variante

Vous pouvez vérifier ces produits en vous rendant sur l’administrateur Shopify.

• Définir une hauteur fixe: activez cette option si vous souhaitez régler la hauteur de l’image principale du produit. La hauteur maximale est de 2000 pixels.
• Action de survol de l’image: vous avez 3 options pour choisir si vous voulez que l’image soit en survol ou non
  • Aucun: choisissez cette option si vous ne souhaitez pas que l’image du produit soit en survol.
  • Activer la loupe d’image: Chaque liste d’images de l’image du produit sera agrandie lorsque vous survolez chacune d’elles. Vous pouvez voir la démo ci-dessous

• • Afficher l’image en survol: lorsque vous passez la souris sur l’élément d’image du produit, l’image en survol remplacera l’image par défaut après un délai de 0,3 s. Il existe 4 types de survol à sélectionner
    • • Image suivante: affiche l’image suivante de l’image sélectionnée.
      • Dernière Image: affiche la dernière image de l’image sélectionnée.
      • Image aléatoire: affiche une image aléatoire de l’image sélectionnée.
      • Toutes les images: affichez plusieurs images lorsque vous déplacez le curseur de la souris sur l’image du produit.

Notez que l’action de survol d’image ne fonctionnera PAS sur les appareils tactiles comme les tablettes ou les smartphones.

• Action de Clic Image:  Il y a 3 options à choisir en cliquant sur l’image du produit:
  • Aucun: choisissez cette option si vous ne souhaitez pas de modification lorsque vous cliquez sur l’image.
  • Lien vers le produit: choisissez cette option si vous souhaitez lier l’image au produit correspondant.
  • Afficher l’image en plein écran: choisissez l’option si vous souhaitez afficher en plein écran avec des tapotements / clics sur l’image.

Vous pouvez voir la démo ci-dessous sur l’ordinateur portable

Sur l’appareil mobile, vous pouvez taper deux fois pour zoomer sur l’image du produit et taper deux fois pour faire un zoom arrière.

Vous pouvez parcourir les images lorsque l’image affichée n’est pas agrandie.

Loupe d’image: activez cette option si vous souhaitez zoomer sur l’image lorsque vous survolez la souris.

• Liste d’images: Vous avez le choix entre 2 options telles que Afficher et masquer la liste d’images. Si vous choisissez d’afficher la liste des images
  • Position de la liste: vous pouvez choisir la position de la liste avec 4 choix: Haut, Droite, Bas et Gauche.
  • Mise en page de la liste: vous pouvez choisir la mise en page de la liste des images et elle s’affichera sous forme d’options 1 sur 2: curseur et grille.
  • Éléments par diapositive: vous pouvez définir ici le nombre d’éléments affichés dans une colonne. Le nombre maximum est de 12 articles.
  • Espacement des éléments: vous pouvez ajuster ici l’espacement entre les éléments. L’espacement maximal est de 100 pixels.

Si vous choisissez de masquer la liste d’images, il n’y a aucune option avec la liste d’images pour vous.

• Afficher le badge: activez cette option si vous souhaitez afficher un badge sur l’image de votre produit
• Position du badge: Vous avez le choix entre 4 positions: en haut à gauche, en haut à droite, en bas à gauche et en bas à droite.

• Événement Google Analytics sur votre compte GA. Vous pouvez découvrir comment le configurer ici.
• Facebook Pixel lorsqu’un client clique sur l’élément. Vous pouvez lire plus ici.

• Texte: La zone de texte affiche les remises ou le stock restant de la variante de produit. Vous pouvez également ajouter du contenu personnalisé pour ce badge.

Notez que la “remise” et le “stock” sont calculés en fonction de la valeur de la variante de produit sélectionnée.

• Appliquer la condition du produit: Il y a 2 conditions à appliquer:
  • Appartenance à des collections:
    • Toutes les collections
    • Collection (s) personnalisée (s): le badge n’apparaît que lorsque le produit appartient à la ou aux collections sélectionnées.
  • Contient des balises: le badge s’affiche uniquement lorsque le produit contient l’une des balises définies.