Images de produits

Conseils pour ajouter des photos de produits exceptionnelles à votre boutique.

Dernière mise à jour le 3 janvier 2025

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.

Astuce

inscrivez-vous à notre webinaire Design tips to increase your store’s sales webinar (Conseils de design pour augmenter les ventes de votre boutique, en anglais uniquement), au cours duquel nous présenterons des outils et des conseils pour faire ressortir vos produits sur votre site et générer plus de ventes.

Regarder une vidéo

Avant d'ajouter des images

Vous pouvez ajouter des images à un produit en les chargeant directement ou en réutilisant des images que vous avez déjà chargées dans d'autres zones de votre site.

Avant de charger une image, consultez nos conseils pour formater vos 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 les options 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 ajoutée grâce à son point focal.

Un produit peut compter jusqu’à 100 images. Toutefois, le fait de surcharger le produit avec des images peut ralentir le chargement de la page. Nous vous recommandons de maintenir la taille des pages en dessous de 5 Mo.

Astuce

commencez par ajouter 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 :

  • Image mise en avant
  • 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.

Les images mises en avant 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 mise en avant d’un produit, la page Informations sur le produit s’affiche.
  • Blocs Produit
  • Blocs Sommaire
  • Les panneaux Page Boutique et Produits

Par défaut, l’image principale de votre produit devient l’image mise en avant. Pour définir une autre image mise en avant :

  1. Dans l’éditeur de produit, cliquez sur la miniature de l’image actuelle sélectionnée.
  2. Chargez une image.
  3. Survolez Enregistrer 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 du produit mise en avant 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. Les images des variantes s’affichent dans la galerie d’images supplémentaires sur la page Informations sur le produit. 

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 dans le panneau Produits.

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

Les images mises en avant 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 mise en avant d’un produit pour accéder à la page Informations sur le produit. Les images mises en avant 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 mise en avant. Pour changer d’image mise en avant :

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

Si vous supprimez l’image mise en avant sans définir de remplacement, 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 du produit mise en avant 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.

Les images des variantes s’affichent dans la galerie d’images supplémentaires sur la page Informations sur le produit.

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 l’image mise en avant à la place.

Supprimer les images de produits

Pour supprimer les images de produits :

  1. Modifiez le produit
  2. Dans la section Images, survolez l’image et cliquez sur l’icône corbeille
  3. Cliquez sur Supprimer

La suppression d’une image de variante de la galerie d’images supplémentaires la supprime également de l’éditeur de variantes.

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 mises en avant 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 et cliquez sur Modifier le design.
  2. Ouvrez les styles de section, puis cliquez sur le menu déroulant des dispositions.
  3. Sélectionnez une disposition.
  4. Cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez également cliquer sur Quitter, puis sur Enregistrer pour fermer l’éditeur.

Vous pouvez styliser des éléments tels que la valeur de proportion de l’image, l’alignement du texte et la conception de la galerie de produits. Pour obtenir un design cohérent, ces modifications de style s’appliquent à tous les produits de votre boutique. Il n’est pas possible de modifier ces paramètres pour des produits spécifiques.

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 des éléments : utilisez les ajustements Taille de la galerie produits et Recadrage automatique de la galerie produits pour définir la taille d’image et le recadrage pour les pages Informations sur le produit.

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 ». Vous pouvez ajouter un texte de remplacement de 200 caractères maximum à chaque image de produit. Pour en savoir plus sur la création d’un site Commerce accessible, consultez ce guide.

Améliorer les images des produits à l’aide d’extensions

Connectez soona, un studio de contenu virtuel pour la photographie et la vidéo pour le eCommerce, au panneau Extensions de votre site afin de créer des visuels de qualité professionnelle qui feront passer votre boutique en ligne au niveau supérieur. Il vous suffit d’expédier vos produits à soona, de partager ce que vous souhaitez créer, d’imaginer votre séance photo ou de sélectionner un pack prépayé et de participer à votre séance virtuelle.

Bien que nous travaillions avec des services tiers pour garantir le bon fonctionnement des Squarespace Extensions, nous ne fournissons pas d’assistance pour les extensions. Nous pouvons vous aider à connecter ou à déconnecter vos extensions. Pour toute autre question, contactez directement le fournisseur d’extensions.

Footer Image
  • Obtenir de l’aide de notre communauté

  • Obtenez de l’aide sur les personnalisations avancées auprès de notre communauté.

  • Trouver un Squarespace Expert

  • Démarquez-vous en ligne avec l’aide d’un designer ou d’un développeur expérimenté.