Exemples de boutiques Shopify

Design de galerie d'images produit : 15 exemples Shopify

Le design de la galerie d'images d'un produit commence par ce que le client a besoin de voir. La galerie d'un livre doit montrer ses pages intérieures ; la photo d'un café doit correspondre à la taille de sachet sélectionnée. Comparez ce que chaque vue explique et comment les clients y accèdent sur ordinateur et mobile.

15 exemples Dernière révision

FINEX

Chargement de la capture d'écran complète…

FINEX

Chargement de la capture d'écran complète…

FINEX

L'image suivante apparaît partiellement sur mobile

FINEX utilise une bande verticale de miniatures sur ordinateur et une galerie horizontale sur mobile. Une partie de l'image suivante reste visible sur mobile, signalant qu'il y a d'autres éléments à regarder. La séquence doit conserver les détails de sa poignée, de la surface de cuisson et de son échelle lorsque les commandes changent d'un écran à l'autre.

Pour votre boutique

Donnez aux visiteurs sur mobile un repère visuel indiquant que la galerie continue.

Visiter le site web

Ritual

Chargement de la capture d'écran complète…

Ritual

Photos de produits à côté de graphiques d'information

Ritual associe des photos de produits en gros plan à des graphiques de certification dans une galerie horizontale. Les flèches sur ordinateur laissent place à une vue mobile où une partie de l'image suivante est visible. Les graphiques ajoutent des informations à la séquence, bien que toute certification ou allégation de santé nécessite des preuves allant au-delà de son apparition dans la galerie.

Pour votre boutique

Gardez les graphiques d'information précis et liés à des preuves justificatives.

Visiter le site web

Unit Editions

Chargement de la capture d'écran complète…

Unit Editions

Doubles pages intérieures en plus de la couverture

Unit Editions offre à sa publication sur le design une grande image principale et un ensemble important de miniatures. Les lecteurs peuvent inspecter les doubles pages intérieures, qui expliquent le contenu du livre. La version mobile conserve les flèches sur l'image principale et les miniatures en dessous, donnant à ces vues un système de navigation explicite.

Pour votre boutique

Montrez le contenu intérieur d'une publication visuelle.

Visiter le site web

Intelligentsia

Chargement de la capture d'écran complète…

Intelligentsia

L'image du sachet s'adapte à la taille sélectionnée

Intelligentsia met à jour son image principale lorsqu'un client choisit une taille de sachet différente. Les autres vues de la galerie restent accessibles via les commandes habituelles. L'image confirme l'emballage associé à la sélection, permettant au produit visible de rester aligné avec la taille de la commande.

Pour votre boutique

Mettez à jour l'image lorsqu'un format sélectionné a un aspect différent.

Visiter le site web

Heart Coffee Roasters

Chargement de la capture d'écran complète…

Heart Coffee Roasters

Détails du café inclus dans la séquence d'images

Heart place un graphique d'information sur le café à côté de ses photos de produits. La version mobile utilise un carrousel avec pagination, de sorte que les détails sur l'origine et le traitement peuvent être inspectés dans la même séquence que le sachet. Ces faits nécessitent également un texte accessible ailleurs sur la page, où ils ne dépendent pas de la lecture d'un petit graphique.

Pour votre boutique

Associez les graphiques de spécifications à un texte de produit équivalent.

Visiter le site web

TRNK

Chargement de la capture d'écran complète…

TRNK

Le canapé reste visible à côté de ses caractéristiques

TRNK garde la galerie sur ordinateur en vue à côté des informations sur le produit, en utilisant des miniatures circulaires pour changer l'image principale. La version mobile montre une seule image avec une pagination compacte. La mise en page côte à côte sur ordinateur permet au lecteur de comparer les détails du meuble avec sa forme, à condition que la zone épinglée permette toujours d'accéder aux images suivantes.

Pour votre boutique

Gardez l'objet visible lorsque ses caractéristiques écrites ont besoin de contexte.

Visiter le site web

Smith Teamaker

Chargement de la capture d'écran complète…

Smith Teamaker

Le format de thé sélectionné modifie l'image

Smith Teamaker met à jour l'image principale avec la variante sélectionnée. Les miniatures sur ordinateur sont placées à côté et remplacent l'image sur place ; la version mobile utilise un carrousel avec des points. Les clients peuvent vérifier visuellement le format tout en restant près du formulaire d'achat.

Pour votre boutique

Utilisez des images liées aux variantes pour clarifier le format acheté.

Visiter le site web

Borough Kitchen

Chargement de la capture d'écran complète…

Borough Kitchen

Le balayage sur mobile n'a aucun repère de position visible

Borough Kitchen fournit des flèches et des miniatures sur ordinateur, tandis que la galerie mobile capturée repose sur le balayage sans pagination visible. La vue mobile laisse plus de place à la photo, mais elle n'annonce pas clairement les images restantes. Un repère tel qu'un compteur ou une partie de l'image suivante rendrait les autres photos plus faciles à découvrir.

Pour votre boutique

Conservez un indice visuel indiquant que des images supplémentaires existent.

Visiter le site web

Momentous

Chargement de la capture d'écran complète…

Momentous

Les miniatures sur mobile identifient les différentes vues

Momentous utilise des points sur ordinateur et une bande de miniatures sous l'image principale sur mobile. Les miniatures aident à distinguer les vues contenant différentes informations sur le produit. La galerie capturée n'avait pas de zoom lightbox, rendant la lisibilité à la taille affichée importante. Les zones tactiles et la miniature sélectionnée doivent également être claires.

Pour votre boutique

Choisissez des commandes de galerie qui aident les clients à trouver une vue en particulier.

Visiter le site web

Athletic Brewing

Chargement de la capture d'écran complète…

Athletic Brewing

Les images empilées sur ordinateur deviennent une séquence sur mobile

Athletic Brewing empile les photos de produits et lifestyle sur la page pour ordinateur. La version mobile les transforme en une séquence horizontale avec une partie de l'image suivante visible. Parce que la plupart des images sur mobile sont d'abord hors écran, leur ordre détermine les détails que les clients rencontrent en premier.

Pour votre boutique

Placez l'identification du produit et les détails essentiels au début de la séquence mobile.

Visiter le site web

Our Place

Chargement de la capture d'écran complète…

Our Place

Une galerie défilante à côté de la zone d'achat

Our Place place les images sur ordinateur dans une colonne défilante à côté d'une zone d'achat fixe. La version mobile passe à un carrousel pleine largeur avec des points. Les colonnes sur ordinateur ont besoin de longueurs coordonnées pour que les commandes d'achat restent utiles sans laisser de grands vides ou masquer la fin de la séquence d'images.

Pour votre boutique

Examinez la galerie et la zone d'achat ensemble sur l'ensemble de la page.

Visiter le site web

Nourished

Chargement de la capture d'écran complète…

Nourished

Un schéma explique les couches du produit

Nourished inclut l'emballage, des photos lifestyle et un schéma éclaté des couches dans sa galerie de miniatures. Le schéma montre une construction que l'image de l'emballage ne peut pas expliquer. La sélection des miniatures change l'image sans ouvrir de zoom en superposition, les étiquettes graphiques doivent donc être lisibles à la taille affichée et répétées dans un texte accessible.

Pour votre boutique

Utilisez des schémas pour les détails qu'une photo ne peut pas montrer clairement.

Visiter le site web

Jonathan Adler

Chargement de la capture d'écran complète…

Jonathan Adler

Un compteur numérique remplace les miniatures sur mobile

Jonathan Adler combine des miniatures et un zoom sur ordinateur avec un compteur numérique dans sa galerie mobile. Le compteur indique la position actuelle et le nombre total d'images. Les commandes de zoom et de navigation doivent avoir un comportement distinct pour qu'un client puisse parcourir les vues sans ouvrir accidentellement une image agrandie.

Pour votre boutique

Rendez la position actuelle et la longueur de la galerie visibles sur mobile.

Visiter le site web

House of Spoils

Chargement de la capture d'écran complète…

House of Spoils

Vues du cadre et action de prévisualisation dans la pièce

House of Spoils combine des rendus d'œuvres encadrées et des vidéos avec un indicateur de position persistant et une commande de prévisualisation dans la pièce. Ces vues montrent à quoi ressemblera l'œuvre finie dans un décor. Des étiquettes claires et une séparation avec les commandes de liste d'envies (wishlist) ou de médias permettent de garder la navigation de base de la galerie facile à utiliser.

Pour votre boutique

Utilisez des prévisualisations pour aider les clients à juger l'objet fini en contexte.

Visiter le site web

DedCool

Chargement de la capture d'écran complète…

DedCool

Des graphiques décrivent les notes olfactives et l'intensité

DedCool mélange des rendus de bouteilles avec des graphiques sur l'intensité du parfum et les notes olfactives. Les miniatures circulaires sur ordinateur deviennent un carrousel sur mobile. Les graphiques donnent aux clients un vocabulaire pour comparer les parfums, tout en restant des indications descriptives plutôt qu'un substitut pour les sentir. Un texte équivalent devrait être disponible en dehors des images.

Pour votre boutique

Fournissez des descriptions de parfums dans un texte lisible ainsi que dans les graphiques de la galerie.

Visiter le site web

Séquence d’images de la galerie produit : ce que chaque vue explique

Unit Editions montre les doubles pages intérieures ainsi que la couverture d’un livre. Nourished utilise un schéma éclaté pour expliquer les couches que la photo de son emballage ne peut pas montrer. Heart Coffee Roasters ajoute une infographie à la photo du sachet. Ces images répondent à des questions différentes, planifiez donc leur ordre avant de choisir des flèches ou des miniatures.

Notez ce que chaque vue apporte : l’apparence générale, les détails, l’échelle, l’utilisation ou une option sélectionnée. Intelligentsia et Smith Teamaker mettent à jour l’image principale lorsque la variante change, ce qui donne une confirmation visuelle de la sélection. Gardez les détails écrits du produit accessibles en dehors des graphiques, et vérifiez les preuves derrière toute certification ou allégation de santé indépendamment de la façon dont la galerie les présente.

FINEX et Athletic Brewing laissent une partie de l’image suivante visible sur mobile. Jonathan Adler utilise un compteur numérique, et Unit Editions conserve les miniatures et les flèches. Chacun indique aux clients que d’autres vues sont disponibles. La galerie défilante de Borough Kitchen, telle qu’elle a été capturée, manque d’un repère visuel de position, rendant cette information moins évidente.

Choisissez des contrôles adaptés aux images que les gens doivent reconnaître. Une miniature permet de distinguer un schéma d’une photo avant même de l’ouvrir ; les points prennent moins de place mais ne communiquent que la position. Vérifiez ensuite la lisibilité à la taille réelle sur mobile. Momentous et Nourished n’ont pas ouvert de vue agrandie dans les interactions capturées, les petites étiquettes graphiques ne peuvent donc pas dépendre du zoom pour devenir lisibles.

Questions fréquentes

De combien d'images une galerie produit a-t-elle besoin ?

Suffisamment pour répondre aux questions importantes sans répéter la même vue. Selon l'article, cela peut inclure son apparence générale, ses détails, son échelle, son utilisation et ses variantes.

Quand les miniatures sont-elles préférables aux points ?

Les miniatures permettent aux clients de reconnaître une vue particulière avant de la sélectionner. Les points prennent moins de place et indiquent la position. Prenez en compte le nombre de vues et ce qu'elles expliquent, puis vérifiez la version mobile.

L'image doit-elle se mettre à jour lorsqu'une variante change ?

Lorsque la couleur, l'emballage ou le format sont différents, une image mise à jour aide les clients à confirmer leur choix. Gardez-la synchronisée avec les contrôles d'achat.

Que doit-on trouver après la photo principale du produit ?

Utilisez la vue suivante pour répondre à la question la plus importante que la photo principale laisse en suspens. Il peut s'agir d'une double page intérieure, d'un détail de matière, d'une comparaison de taille ou du produit en cours d'utilisation. Évitez de remplir la séquence avec des angles presque identiques.

Les informations importantes sur le produit doivent-elles figurer uniquement dans les images de la galerie ?

Non. Répétez les détails tels que les dimensions, les ingrédients ou les instructions dans un texte de page accessible. Les petits graphiques peuvent être difficiles à lire sur un téléphone, surtout lorsque la galerie ne dispose pas de contrôle de zoom.

Faites le changement dans votre thème

Donnez à Fudge un objectif et une référence. Il suggère des modifications pour votre boutique, prépare un brouillon dans votre thème Shopify et vous fait un retour. Vous examinez chaque changement avant sa mise en ligne.

Découvrez comment fonctionne l'éditeur de boutique

Collections associées

Toutes les collections