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 produit
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.
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 produit
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 |
Vous pouvez vérifier ces produits en vous rendant sur l’administrateur Shopify.
Notez que l’action de survol d’image ne fonctionnera PAS sur les appareils tactiles comme les tablettes ou les smartphones.
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.
Si vous choisissez de masquer la liste d’images, il n’y a aucune option avec la liste d’images pour vous.
|
2. SUIVI | C’est un endroit pour mettre en place: |
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és
Configuration du badge produit
Sélectionnez le badge pour définir des options pour celui-ci
Paramètre de l’onglet Général | |
1. CONTENU |
Notez que la “remise” et le “stock” sont calculés en fonction de la valeur de la variante de produit sélectionnée.
|
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’images
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.