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.

Remarque : nous avons récemment mis à jour l’éditeur de produit. Il est donc possible que les étapes décrites dans ce guide ne correspondent pas à ce que vous voyez sur votre site. Vous pouvez à tout moment passer au nouvel éditeur de produit. Vous pouvez également suivre les étapes décrites dans l’article Utiliser l’éditeur de produit classique si vous n’êtes pas prêt(e) à changer d’éditeur.

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 Boutique ou 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 Boutique correspondent aux pages de destination de plusieurs produits.
  • Les pages Informations affichent les détails d’un produit spécifique.

Par exemple, sur cette page Boutique, 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 :

  • Miniature
  • Image principale
  • Additional images
  • Images de variantes
  • Autres images de partage social

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 Boutique (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 Boutique et Inventaire

Par défaut, l’image principale de votre produit est utilisée comme image miniature. Pour changer d’image miniature :

  1. Dans l’éditeur de produit, cliquez sur Image miniature.
  2. Chargez une image.
  3. Survolez Terminé et cliquez sur Enregistrer.

Images principales

L’image principale apparaît comme première image sur les pages Informations sur le produit. L’image principale est la première image qui s’affiche dans l’éditeur de produit. Cliquez sur les images et faites-les glisser pour en modifier l’ordre.

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’é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.

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, faites défiler la page jusqu’à la section Variante et cliquez sur Tout modifier.
  2. Cliquez sur l’icône de chargement d’image à côté d’une variante.
  3. Cliquez sur l’icône + pour charger une image ou sélectionnez une image que vous avez déjà chargée.
  4. Cliquez sur Appliquer.

Vous pouvez également cliquer sur une variante dans l’éditeur de produit principal, puis cliquer sur Ajouter des images pour ajouter une image de variante. 

Dans la version 7.0, l’affichage des images dépend du type de page Boutique 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 Boutique de la catégorie Classique ou Unique ;
  • comme première image sur les pages Informations sur le produit ;
  • dans le panneau Page Boutique ou le panneau Inventaire.

L’image principale est la première image qui apparaît dans l’éditeur de produit. Cliquez sur les images et faites-les glisser pour modifier leur 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 Boutique 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 montrent un aperçu de vos produits dans différentes zones de votre site. Dans les templates qui prennent en charge la page Boutique avancée, les acheteurs cliquent sur l’image miniature d’un produit pour accéder à la page Informations sur le 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.

Autres images de partage social

L’autre image de partage social d’un produit s’affiche sur les plateformes de partage social ou dans les applications de SMS lorsque vous partagez l’URL de la page Informations sur le produit. Si vous n’ajoutez pas d’autre image de partage social à un produit, nous utiliserons la miniature de l’article à la place.

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 Styles du site.

Sections de produits

Pour modifier l’affichage des images miniatures des produits dans les sections de boutique, 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.

Si les images de vos produits sont coupées ou rognées, consultez l’article Résoudre les problèmes de recadrage.

Pages Informations sur le produit

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

  1. Modifiez la page, ouvrez le panneau Styles du site, puis cliquez 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 du site pour modifier l’affichage de vos images de produits. Les dispositions et les options de style disponibles dépendent du type de page Boutique de votre famille de templates. Pour en savoir plus, consultez l’article Personnaliser le style des pages Boutique.

  • Classique
  • Avancé
  • Unique

Ajustements pour les pages de la catégorie Classique

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

  • Pages Boutique - Utilisez les ajustements Taille du produit, Recadrage automatique de l’image du produit et Couleur d’arrière-plan du produit pour personnaliser l’affichage sur la page Boutique des images de 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 Boutique avancées :

  • Pages Boutique - Utilisez l’ajustement Valeur de proportion de l’image de la section Produits : Disposition pour définir la forme des images sur la page Boutique. 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 Boutique proposent des fonctionnalités spéciales qui vous permettent d’afficher des images de manière dynamique. La façon dont ces images s’affichent 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 Boutique.

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 : 35 sur 149
Images de produits