Éléments Shopify – Image du produit

Dans cet article, vous découvrirez un autre élément Shopify nommé Image du produit. Cet élément est un nouveau de PageFly version 2.10.0. Fondamentalement, ce nouvel élément Image du produit a de nombreux paramètres communs avec l’ancien élément Image du produit, mais ce nouvel élément a plus d’options. Consultez cet article pour connaître les modifications.

À propos de l’élément Image produitClick to copy

L’élément Image produit est fait pour afficher des images de vos produits Shopify sur votre page pour augmenter votre taux de conversion. Vous pouvez utiliser l’élément Image produit pour promouvoir votre produit dans n’importe quelle page normale ou sur une page produit.

Vous pouvez vérifier plus de détails dans le didacticiel vidéo ci-dessous.

Notez que vous pouvez trouver facilement cet élément en utilisant la fonction recherche au lieu de le chercher manuellement dans la barre latérale.

pagefly product image element

L’élément Image Produit est disponible en 3 variantes mais nous en ajouterons de nouvelles prochainement pour vous aider à gagner du temps.

Glissez une variante vers votre mise en page actuelle pour voir comment le configurer.

Configuration de l’élément Image produitClick to copy

L’élément Image produit est livré avec de nombreux paramètres vous permettant d’affiner l’apparence du contenu pour le meilleur taux de conversion possible.

Sélectionnez l’élément dans la présentation pour voir ses paramètres.

Lorsque vous faites glisser et déposez l’élément Image Produit dans la page de l’éditeur, vous avez le choix entre deux options pour la Source du produit :

  • Auto
  • Produit Personnalisé

Notez que si vous êtes sur la Page Produit et utilisez l’élément Image Produit, vous pouvez choisir l’option Source du produit.

Cependant, si vous êtes dans une page standard et utilisez cet élément, l’option Source du produit est désactivée et le Produit Personnalisé est choisi par défaut.

Dans la page produit, si vous choisissez Auto, le produit qui a été affecté à cette page via l’attribution de page sera affiché dans l’éditeur de page.

Vous pouvez choisir un Produit Personnalisé et sélectionner le produit que vous souhaitez.

Paramètre de l’onglet Général
1. CONTENT
  • 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.
2. SUIVI C’est un endroit pour mettre en place:
  • É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.
3. ATTRIBUTS Ce sont le groupe de 3 éléments que tous les éléments ont. Vous pouvez lire plus ici.
4. VISIBILITÉ Ce sont le groupe de 3 éléments que tous les éléments ont. Vous pouvez lire plus ici.
5. ANIMATION Ce sont le groupe de 3 éléments que tous les éléments ont. Vous pouvez lire plus ici.
Paramètre de l’onglet de style
1. ESPACEMENT Vous pouvez lire tous ces paramètres ici.
2. ARRIERE PLAN Vous pouvez lire tous ces paramètres ici.
3. BORDURE Vous pouvez lire tous ces paramètres ici.
4. AFFICHER Vous pouvez lire tous ces paramètres ici.
5. CUSTOM CSS Vous pouvez lire tous ces paramètres ici.

Configuration des éléments imbriquésClick to copy

Configuration du badge produitClick to copy

Sélectionnez le badge pour définir des options pour celui-ci

product badge element

Paramètre de l’onglet Général
1. CONTENU
  • 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.
2. ATTRIBUTS Ce sont le groupe de 3 éléments que tous les éléments ont. Vous pouvez lire plus ici.
3. VISIBILITÉ Ce sont le groupe de 3 éléments que tous les éléments ont. Vous pouvez lire plus ici.
Paramètres de l’onglet de style
1. GLOBAL Vous pouvez lire sur le paramètre GLOBAL ici.
2. ESPACEMENT Vous pouvez lire sur le paramètre ESPACEMENT ici.
3. TYPOGRAPHIE Vous pouvez lire sur le paramètre TYPOGRAPHIE ici.
4. ARRIÈRE PLAN Vous pouvez lire sur le paramètre ARRIÈRE PLAN ici.
5. BORDURE Vous pouvez lire sur le paramètre BORDURE ici.
6. AFFICHER Vous pouvez lire sur le paramètre AFFICHER ici.
7. CSS PERSONNALISÉ Vous pouvez lire sur le paramètre CSS PERSONNALISÉ ici.

Élément de liste d’imagesClick to copy

Sélectionnez l’élément de liste d’images pour configurer les options

Les paramètres de l’onglet Style de l’Élément de liste d’images sont les suivants:

  • État de l’en-tête: vous pouvez définir un style pour les 3 états de l’en-tête, tels que Normal, Survoler et Sélectionné.
  • Style de bordure: vous pouvez choisir l’un des 4 styles de bordure pour chaque état. Cliquez sur le bouton Plus de paramètres pour configurer la largeur et le rayon de la bordure.

Navigate this category

Feedback
Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
Boost your holiday sales with PageFly's Thanksgiving Template 👉 Discover Now