À propos de l'élément d'image du produit
L'élément Images de produit, qui fait partie du module Produit, vous permet de présenter des images d'un produit spécifique directement depuis votre interface administrateur Shopify.
Cet élément comprend :
- L'image sélectionnée: L'image principale, issue de la première image de la section Média de votre Administrateur Shopify > Produit.
- Liste d'images : Une collection d'images de la même section Média, affichées sous forme de galerie visuelle.
Pour utiliser l'élément Images du produit, assurez-vous d'avoir un produit avec des images dans la section média de votre interface administrateur Shopify.
Comment ajouter un élément d'image de produit à votre page
Remarque : Pour un bon fonctionnement, le Élément d'images de produits devrait être positionné à l'intérieur d'un module de produit.
Étape 1 : Consultez la Tableau de bord GemPages > Pages, et cliquez sur la page cible pour ouvrir l'éditeur.
Étape 2 : Si vous n'avez aucun module de produit sur votre page, faites-le glisser et déposez-le a Élément de produit à la position souhaitée.
L'élément produit contient plusieurs éléments enfants, notamment Élément d'image du produit.
Étape 3 : Asigne un produit à l'élément dans le Origine du produit .
Reportez-vous à cet article pour plus de détails sur attribution de produits dans GemPages.
Étape 4 : Cliquez sur l'image principale pour accéder à l'élément Image du produit
Configurer l'onglet Paramètres
Mise En Page
GemPages propose actuellement 9 mises en page prédéfinies pour vous aider à afficher efficacement l'image sélectionnée et la liste d'images.
Remarque :
- Vous pouvez affiner l’espacement entre les images dans la liste d’images.
- Assurez-vous de vérifier comment la mise en page apparaît sur différents appareils.
Origine du produit
Il existe deux manières de sélectionner un produit pour le module produit : Affichage par produit attribué or Choisir manuellement.
- Affichage par produit attribué
Lorsque vous sélectionnez l'option d'affichage par produit attribué, le modèle actuel sera appliqué à tous les produits attribués de manière dynamique. Le produit sera sélectionné de manière aléatoire pour s'afficher sur la page de l'éditeur actuel.
Passez la souris sur la source du produit actuel et cliquez sur le bouton éditer icône pour ouvrir le Sélectionner un produit dialogue. De là, vous pouvez sélectionner d'autres produits attribués disponibles.
- Choisir manuellement
Cette option vous permet d'afficher plusieurs modules de produits sur le même modèle et des options de variantes spécifiques.
Pour faire une sélection, cliquez sur Choisir manuellement, et une fenêtre s'ouvrira affichant une liste de produits parmi lesquels vous pourrez choisir.
Images en vedette
L'image en vedette sert de représentation visuelle principale de votre produit.
Cette section comprend:
| Paramètres | Description |
| Cadre métallique robuste | Choisissez entre : Carré, Vertical, Horizontal, Original et Personnalisé. |
| Largeur hauteur | Disponible lors de la sélection Encadrement Sur Mesure cadre. |
| Navigation | Sélectionnez la disposition : Intérieur ou Extérieur. Choisissez l'icône de navigation et ajustez la taille, la couleur, la largeur, la hauteur, le remplissage, l'arrière-plan du bouton et les options de forme, comme la bordure, les coins et l'ombre.
|
| CORNER | Ajustez le rayon des coins (par exemple, 10 px, 30 px). |
| Action de survol | Ajoutez des effets de survol comme le zoom. Vous pouvez également personnaliser : → Type de zoom : Par défaut / Lunettes → Valeur de zoom : Définissez le pourcentage de zoom.
|
| Action de clic | Choisissez ce qui se passe lorsque les clients cliquent sur l'image : → Ouvrir le produit → Zoom → Ouvrir dans un nouvel onglet : Oui/Non |
| Vitesse de glissement | Ajustez la vitesse de transition entre les images (par exemple, 500 ms). |
| Animation | Choisissez l'effet de transition : Entrée progressive, Sortie progressive, Entrée progressive et Sortie progressive.
|
| Glisser/Balayer | Activer le balayage pour mobile ou ordinateur de bureau. |
| Boucle d'infini | Activer la boucle continue vers la première image lors du balayage. |
Liste d'images
Cette section vous permet de contrôler la manière dont vos images de produits supplémentaires (vignettes) sont affichées sous ou à côté de l'image sélectionnée.
Configurer:
| Paramètres | Description |
| Écran | Vous pouvez choisir:
– Diapositive : afficher des images dans un carrousel – Tout : Afficher toutes les images à la fois |
| Cadre métallique robuste | Sélectionnez la forme de la vignette : Carré, Vertical, Horizontal, Original ou Personnalisé |
| Largeur hauteur | Disponible uniquement si l'option Personnalisé est sélectionnée. Définissez les dimensions exactes des vignettes. |
| Écart d'image | Définir l'espacement entre les vignettes (en px). |
| Échelle de l'image | Ajustez l'agrandissement de l'image au survol. Idéal pour une meilleure clarté visuelle. |
| Navigation | Activer les flèches pour la navigation par curseur (si Diapositive est sélectionné).
Choisissez la disposition (intérieur/extérieur), sélectionnez l'icône, ajustez la taille, la couleur, la largeur, la hauteur, le remplissage, l'arrière-plan du bouton et les options de forme, notamment la bordure, le coin et l'ombre. |
| CORNER | Définissez le rayon des coins pour créer des miniatures d'images arrondies. |
| bordure active | Mettez en surbrillance l’image sélectionnée avec une bordure visible. |
| Action de clic | Définissez ce qui se passe lorsqu'un utilisateur clique sur une miniature (par exemple, afficher dans la vue principale). |
| Glisser/Balayer | Activez l'interaction adaptée aux mobiles pour basculer entre les images. |
| Boucle infinie | Autoriser le carrousel à revenir à la première image après avoir atteint la dernière. |
Espacement des éléments
État d'affichage
En vertu des Normes sur l’information et les communications, les organismes doivent rendre leurs sites et applications Web accessibles. Ils y parviennent en conformant leurs sites Web au niveau AA des Web Content Accessibility Guidelines (WCAG). État d'affichage section, vous pouvez sélectionner une condition pour l'élément d'image par défaut dans la liste déroulante, notamment :
| 1ère variante disponible | Affiche la première image de variante associée à la première variante active du produit dans Shopify. Idéal pour les boutiques utilisant des images basées sur des variantes (par exemple, des couleurs ou des styles différents). |
| 1ère image | Affiche la première image de la liste des médias du produit. Idéal pour les produits standards utilisant une image principale. |
| 1ère vidéo | Affiche la première vidéo téléchargée dans la section média du produit. Idéal pour mettre en avant des vidéos promotionnelles ou de démonstration. |
| 1er modèle 3D | Affiche le premier modèle 3D (format GLB/GLTF) ajouté à la section Médias Shopify. Utilisez-le pour des vues de produits interactives permettant aux clients de faire pivoter et d'inspecter le produit en 3D. |
Optimiser le LCP
Si vous préférez que l'image soit préchargée une fois que les visiteurs accèdent à votre page, choisissez Oui pour cette section.
Aligner
Ce paramètre vous permet de déterminer la manière dont l'image est positionnée sur votre page. Vous avez le choix entre trois options : alignée à gauche, centrée et alignée à droite.
Configurer l'onglet Avancé
Pour une personnalisation plus avancée, accédez à l'onglet Avancé et suivez les instructions cet article.
FAQ concernant l'élément d'image du produit
Pourquoi les images de mes produits n'apparaissent-elles pas sur la page ?
Si les images de votre produit ne s'affichent pas, cela peut être dû à :
- L'élément Images du produit n'est pas placé à l'intérieur d'un module de produit.
- Le produit attribué dans le module Produit manque de contenu multimédia dans l'administrateur Shopify.
Vérifiez cet article pour un dépannage détaillé.
Pourquoi les images de mes produits se chargent-elles lentement ?
Un chargement lent peut être causé par :
- Les images haute résolution ne sont pas optimisées pour le Web.
- Trop d'images sont chargées à la fois sans chargement différé.
Reportez-vous à pour optimiser la vitesse de l'image.
Puis-je utiliser l'élément Images de produits sur des pages non produit ?
Oui. L'élément Images de produits peut être utilisé sur n'importe quelle page à condition qu'il soit placé à l'intérieur d'un Module produit.
Puis-je réorganiser l'ordre des images dans GemPages ?
Non. L'ordre des images est extrait de la section « Médias produits » de l'interface administrateur Shopify. Pour modifier l'ordre d'affichage, vous devrez réorganiser les médias dans Shopify.
Puis-je ajouter une vidéo à l'élément Images du produit ?
- Allez dans Produits dans votre administrateur Shopify.
- Sélectionnez le produit auquel vous souhaitez ajouter une vidéo.
- Dans l' Médiathèque section, cliquez sur + et téléchargez votre vidéo.
- Cliquez à nouveau sur Enregistrer appliquer les changements.
- Revenez à votre page produit dans GemPages et cliquez sur Sync. La vidéo apparaîtra alors dans le Images du produit .
Comment faire pour qu'une page affiche un produit spécifique avec ses images ?
Étape 1 : Faites glisser un Module produit dans votre mise en page.
Étape 2 : Affectez un produit au module soit :
- Affichage par produit attribué : Appliquer le modèle actuel de manière dynamique à tous les produits attribués.
- Sélectionner manuellement : Sélectionnez un produit directement dans votre catalogue Shopify.
Étape 3 : Une fois le produit attribué, le Images du produit L'élément à l'intérieur du module extraira et affichera automatiquement les images du produit à partir de l'administrateur Shopify.
Pour plus d'informations, s'il vous plaît se référer à cet article.
Pourquoi l'image de mon produit ne se synchronise-t-elle pas avec mon produit Shopify ?
L'élément Image du produit ne charge les images dynamiquement que lorsqu'il se trouve à l'intérieur d'un module Produit et qu'un produit lui est associé.
Si la photo de votre produit ne s'actualise pas, vérifiez que le produit possède bien des médias dans Shopify, cliquez Sync dans GemPages, et assurez-vous que la condition d'affichage corresponde à vos médias disponibles (par exemple, 1re image, 1re variante).
Merci pour vos commentaires