Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.

Images de produits

La réussite d’une boutique en ligne passe notamment par la qualité des images qui représentent les produits. Vous pouvez utiliser des images pour montrer vos produits sur l’ensemble de votre site, mettre en avant leurs principales caractéristiques et permettre à vos clients de mieux voir les détails et les textures. Ce guide présente les différentes utilisations possibles des images de produits.

Conseil : pour profiter pleinement de ce guide, commencez par créer une page Produits et ajoutez des produits à votre boutique.

Regarder une vidéo

Avant de charger des images

Lisez nos conseils sur la mise en forme des images afin de vous assurer que la taille et la qualité de vos images sont adaptées à un affichage en ligne.

La valeur de proportion d’une image affecte la façon dont elle s’affiche avec lesoptions de taille de produit et de recadrage automatique que vous avez définies. Nous vous conseillons de modifier vos images pour qu’elles aient la valeur de proportion souhaitée avant de les charger. Vous pouvez également ajuster le centrage d’une image recadrée après l’avoir chargée grâce à son point focal.

Astuce : commencez par charger quelques images de test pour voir comment elles apparaissent et essayez les différentes options de style.

Page Produits et pages Informations sur le produit

Avant que nous vous parlions des images de produits, il est important que vous compreniez comment Squarespace organise les produits sur tous les sites. Les produits sont présentés sur deux types de pages :

  • Les pages Produits correspondent aux pages de destination de plusieurs produits. Dans la version 7.1, elles portent le nom de « pages Boutique ».
  • Les pages Informations affichent les détails d’un produit spécifique.

Par exemple, sur cette page Produits, les visiteurs peuvent découvrir plusieurs produits.

Galapagos__.jpg

Lorsque les visiteurs cliquent sur l’un des produits, la page Informations sur le produit s’affiche. Ils peuvent alors voir d’autres images et consulter des informations sur le produit.

Teresa_Jacket___Galapagos.jpg

Types d’images de produits

Lorsque vous ajoutez ou modifiez un produit, vous pouvez ajouter les images suivantes :

  • Image principale
  • Additional images
  • Vignette
  • Images de variantes

La façon dont elles s’affichent dépend de la version de votre site.

Miniatures

Les images miniatures sont celles qui représentent le plus souvent le produit sur votre site. Vous devez donc choisir l’image que vous souhaitez montrer en priorité à vos clients. L’image apparaît dans les zones suivantes : 

  • Pages Produits (lorsque les visiteurs cliquent sur l’image miniature d’un produit, la page Informations sur le produit s’affiche)
  • Blocs Produit
  • Blocs Sommaire
  • Panneaux Page Produits et Inventaire

Par défaut, la première image ajoutée dans l’onglet Élément de l’éditeur de produit est utilisée comme image miniature. Pour changer d’image miniature :

  1. Dans l’éditeur de produit, cliquez sur l’onglet Options.
  2. Dans la zone Image miniature, cliquez sur l’icône corbeille.
  3. Ajoutez une image miniature.
  4. Cliquez sur Enregistrer.

Si vous supprimez l’image miniature sans la remplacer, l’image principale s’affiche à la place.

Images principales

L’image principale apparaît comme première image sur les pages Informations sur le produit.

L’image principale est l’image en haut à gauche de l’onglet Élément de l’éditeur de produit. Cliquez sur les images et faites-les glisser pour en modifier l’ordre.

product_primary_image.png

Additional images

Les images supplémentaires vous permettent présenter vos produits de manière plus complète. Utilisez-les pour montrer vos produits en détail, sous différents angles ou en situation. Les images supplémentaires apparaissent sur les pages Informations sur le produit. Dans l’onglet Élément de l’éditeur de produit, toutes les images après la première image sont considérées comme des images supplémentaires. Cliquez sur les images et faites-les glisser pour en modifier l’ordre. 

Additional_Image.png 

Images de variantes

Sur les pages Informations sur le produit, les images de variantes montrent aux visiteurs à quoi ressemble chaque variante du produit. Vous pouvez par exemple utiliser des images de variantes pour montrer les produits dans différentes tailles et différents coloris. Par défaut, l’image miniature du produit reste affichée tant que le visiteur n’a pas sélectionné de variante dans le menu déroulant.

Pour personnaliser une image de variante :

  1. Dans l’éditeur de produit, cliquez sur Prix et variantes.
  2. Dans la colonne de gauche, cliquez dans le champ de l’image pour la modifier.

Dans la version 7.0, l’affichage des images dépend du type de page Produits de votre template.

Images principales

L’image principale est celle qui représente le plus souvent le produit sur votre site. Vous devez donc choisir comme image principale l’image que vous souhaitez montrer en priorité à vos clients. L’image apparaît dans les zones suivantes :

  • sur les pages Produits de la catégorie Classique ou Unique ;
  • comme première image sur les pages Informations sur le produit ;
  • dans le panneau Page produits et le panneau Inventaire.

L’image principale est l’image en haut à gauche de l’onglet Élément de l’éditeur de produit. Cliquez sur les images et faites-les glisser pour en modifier l’ordre.

product_primary_image.png

Additional images

Les images supplémentaires vous permettent de donner aux visiteurs une vue plus complète de vos produits. Utilisez-les pour montrer vos produits en détail, sous différents angles ou en situation. Les images supplémentaires apparaissent :

  • sur les pages Informations sur le produit ; 
  • si le visiteur les survole dans les pages Produits de la catégorie Avancée (uniquement la deuxième image).

Dans l’onglet Élément de l’éditeur de produit, toutes les images après la première image sont considérées comme des images supplémentaires. Cliquez sur les images et faites-les glisser pour en modifier l’ordre.

Additional_Image.png

Miniatures

Les images miniatures affichent un aperçu de vos produits dans différentes zones de votre site. Dans les templates qui prennent en charge la page Produits avancés, les acheteurs cliquent sur l'image miniature d'un produit pour accéder à la page Détails du produit. Les images miniatures s'affichent également dans les zones suivantes :

Par défaut, la première image ajoutée dans l’onglet Élément de l’éditeur de produit est utilisée comme image miniature. Pour changer d’image miniature :

  1. Dans l’éditeur de produit, cliquez sur l’onglet Options.
  2. Dans la zone Image miniature, cliquez sur l’icône corbeille.
  3. Ajoutez une image miniature.
  4. Cliquez sur Enregistrer.

Si vous supprimez l’image miniature sans la remplacer, l’image principale s’affiche à la place.

Images de variantes

Sur les pages Informations sur le produit, les images de variantes montrent aux visiteurs à quoi ressemble chaque variante du produit. Vous pouvez par exemple utiliser des images de variantes pour montrer les produits dans différentes tailles et différents coloris. Par défaut, l’image miniature du produit reste affichée tant que le visiteur n’a pas sélectionné de variante dans le menu déroulant.

Pour personnaliser une image de variante :

  1. Dans l’éditeur de produit, cliquez sur Prix et variantes.
  2. Dans la colonne de gauche, cliquez dans le champ de l’image pour la modifier.

Personnaliser les images de produits

La méthode à suivre pour personnaliser les images de produits dépend de la version de Squarespace que votre site utilise.

Modifiez l’affichage de vos images de produits à l’aide des styles de section et des ajustements Produits dans le panneau Design.

Sections de produits

Pour modifier l’affichage des images miniatures des produits dans les sections de produits, survolez la section et cliquez sur l’icône crayon.

Vous pouvez modifier l’espacement, les colonnes, la valeur de proportion et l’alignement du texte. Vous pouvez également afficher ou masquer le prix des produits. Pour changer les couleurs, cliquez sur Couleurs.

Pages Informations sur le produit

Pour modifier l’affichage des produits sur la page Informations produit :

  1. Dans le Menu principal, cliquez sur Design, puis sur Produits.
  2. Faites les modifications souhaitées, puis cliquez sur Enregistrer.

Vous pouvez personnaliser des éléments tels que la valeur de proportion, l’alignement du texte et le design de la galerie de produits.

Utilisez le panneau Styles de site pour personnaliser l'affichage des images de produit. Les dispositions et les options de style disponibles dépendent du type de page Produitsde votre famille de templates. Pour en savoir plus, consultez l'article Personnaliser la page Produits.

  • Classique
  • Avancé
  • Unique

Ajustements pour les pages de la catégorie Classique

Les ajustements suivants spécifiques aux images s’appliquent aux pages Produits classiques :

  • Pages Produits - Utilisez les ajustements Taille du produitRecadrage automatique de l’image du produit et Couleur d’arrière-plan du produit pour personnaliser l’affichage des images de produits sur la page Produits.
  • Pages de produit individuel - Utilisez les ajustements Taille de la galerie de produits et Recadrage automatique de la galerie de produits pour définir la taille d’image et le recadrage pour les pages Informations.

Ajustements pour les pages de la catégorie Avancée

Les ajustements suivants spécifiques aux images s’appliquent aux pages Produits avancées :

  • Pages Produits - Utilisez l’ajustement Valeur de proportion de l’image de la section Produits : Disposition pour définir la forme des images sur la page Produits. Les images sont automatiquement recadrées pour s’adapter à la forme.
  • Pages de produit individuel - Utilisez les ajustements de la section Produits : Galerie tels que Design, Valeur de proportion, Alignement des miniatures et Largeur des miniatures pour personnaliser les images sur les pages Informations.

Ajustements pour les pages de la catégorie Unique

Si vous avez besoin d’aide pour personnaliser les images de produits dans les templates suivants, consultez les guides de ces templates :

Options d’image spéciales

Certaines pages Produits proposent des fonctionnalités spéciales qui vous permettent d'afficher des images de manière dynamique. L'affichage de ces images dépend de la version de votre site.

  • Aperçu rapide des produits : les clients peuvent cliquer sur un bouton pour afficher les détails du produit avec un effet lightbox sans quitter la page actuelle.  Dans la version 7.1, cette option est disponible uniquement sur la page Détails du produit.
  • Zoom d’image produit : les clients peuvent agrandir les images du produit pour mieux voir la matière, la texture et les détails. Dans la version 7.1, cette option est disponible uniquement sur la page Détails du produit.
  • Image de remplacement en cas de survol : cette option vous permet de montrer une certaine caractéristique, un autre angle ou un détail important de chaque produit. 

Si vous avez besoin d’aide pour l’une de ces fonctionnalités, consultez l’article Fonctionnalités spéciales de la page Produits.

Ajouter un texte de remplacement

Lorsque vous ajoutez un texte de remplacement aux images de vos produits, vous identifiez le contenu des images pour les navigateurs et les moteurs de recherche. Vos images apparaîtront plus facilement dans les résultats de recherche d’images, et votre site sera plus accessible aux visiteurs qui utilisent un lecteur d’écran.

Pour le texte de remplacement, utilisez des termes courts qui décrivent l’image ainsi que le produit. Par exemple : « Gros plan sur un fermoir en laiton » ou « Dos d’une robe d’été à fleurs ».

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 17 sur 78
Images de produits