Shopify-Shop-Beispiele

Design von Produktbildergalerien: 15 Shopify-Beispiele

Das Design einer Produktbildergalerie beginnt damit, was der Kunde sehen muss. Die Galerie eines Buches sollte Innenseiten zeigen; das Produktfoto eines Kaffees sollte zur gewählten Beutelgröße passen. Vergleiche, was jedes Einzelbild erklärt und wie Kunden es auf Desktop und Mobile erreichen.

15 Beispiele Zuletzt überprüft

FINEX

Vollständiger Screenshot wird geladen…

FINEX

Vollständiger Screenshot wird geladen…

FINEX

Das nächste Mobile-Bild ragt bereits ins Blickfeld

FINEX nutzt auf dem Desktop einen vertikalen Thumbnail-Streifen und auf Mobile eine horizontale Galerie. Ein Teil des nächsten Mobile-Bildes bleibt sichtbar und signalisiert so, dass es noch mehr zu sehen gibt. Die Bildsequenz muss die Details zu Griff, Bratfläche und Größenverhältnissen beibehalten, wenn sich die Steuerung zwischen den Bildschirmen ändert.

Für deinen Shop

Gib Mobile-Besuchern einen sichtbaren Hinweis, dass die Galerie weitergeht.

Website besuchen

Ritual

Vollständiger Screenshot wird geladen…

Ritual

Produktfotos neben Infografiken

Ritual kombiniert Nahaufnahmen der Produkte mit Zertifizierungs-Grafiken in einer horizontalen Galerie. Desktop-Pfeile weichen einer Mobile-Ansicht, bei der ein Teil des nächsten Bildes sichtbar ist. Die Grafiken fügen der Sequenz Informationen hinzu, auch wenn Zertifizierungen oder gesundheitsbezogene Aussagen über ihr Erscheinen in der Galerie hinaus belegt werden müssen.

Für deinen Shop

Halte Infografiken spezifisch und verknüpfe sie mit stichhaltigen Belegen.

Website besuchen

Unit Editions

Vollständiger Screenshot wird geladen…

Unit Editions

Innenseiten sowie das Cover

Unit Editions gibt seiner Design-Publikation ein großes Hauptbild und ein umfangreiches Thumbnail-Set. Leser können die Innenseiten begutachten, die den Inhalt des Buches erklären. Auf Mobile bleiben Pfeile über dem Hauptbild und Thumbnails darunter erhalten, was diesen Ansichten ein explizites Navigationssystem verleiht.

Für deinen Shop

Zeige den inneren Inhalt einer visuellen Publikation.

Website besuchen

Intelligentsia

Vollständiger Screenshot wird geladen…

Intelligentsia

Das Bild der Verpackung passt sich der gewählten Größe an

Intelligentsia aktualisiert das Hauptbild, wenn ein Kunde eine andere Beutelgröße wählt. Die restlichen Bilder der Galerie bleiben über die normalen Steuerungselemente verfügbar. Das Bild bestätigt die mit der Auswahl verbundene Verpackung, wodurch das sichtbare Produkt mit der bestellten Größe übereinstimmt.

Für deinen Shop

Aktualisiere das Bild, wenn ein ausgewähltes Format anders aussieht.

Website besuchen

Heart Coffee Roasters

Vollständiger Screenshot wird geladen…

Heart Coffee Roasters

Kaffee-Details in die Bildsequenz integriert

Heart platziert eine Infografik zum Kaffee neben der Produktfotografie. Mobile nutzt ein Karussell mit Paginierung, sodass Herkunft und Verarbeitungsdetails in derselben Sequenz wie der Kaffeebeutel betrachtet werden können. Diese Fakten benötigen auch anderswo auf der Seite barrierefreien Text, der nicht davon abhängt, ob man eine kleine Grafik lesen kann.

Für deinen Shop

Kombiniere Spezifikationsgrafiken mit entsprechendem Produkttext.

Website besuchen

TRNK

Vollständiger Screenshot wird geladen…

TRNK

Das Sofa bleibt neben seinen Spezifikationen sichtbar

TRNK behält die Desktop-Galerie neben den Produktinformationen im Blickfeld und verwendet runde Thumbnails, um das Hauptbild zu wechseln. Auf Mobile wird ein Bild mit kompakter Paginierung angezeigt. Das Side-by-Side-Layout auf dem Desktop lässt den Leser die Möbeldetails mit der Form vergleichen, vorausgesetzt, der Sticky-Bereich erlaubt weiterhin den Zugriff auf spätere Bilder.

Für deinen Shop

Halte das Objekt sichtbar, wenn seine geschriebenen Spezifikationen Kontext benötigen.

Website besuchen

Smith Teamaker

Vollständiger Screenshot wird geladen…

Smith Teamaker

Das ausgewählte Tee-Format verändert das Bild

Smith Teamaker aktualisiert das Hauptbild mit der ausgewählten Variante. Auf dem Desktop befinden sich die Thumbnails daneben und ersetzen das Bild direkt; Mobile verwendet ein Karussell mit Punkten. Kunden können das Format visuell überprüfen und bleiben dabei in der Nähe des Kaufbereichs.

Für deinen Shop

Verwende variantenabhängige Bilder, um das zu kaufende Format zu verdeutlichen.

Website besuchen

Borough Kitchen

Vollständiger Screenshot wird geladen…

Borough Kitchen

Mobiles Swipen ohne sichtbaren Positionshinweis

Borough Kitchen bietet Desktop-Pfeile und Thumbnails an, während die gezeigte Mobile-Galerie auf Wischen ohne sichtbare Paginierung setzt. Die Mobile-Ansicht lässt mehr Raum für das Foto, kündigt die verbleibenden Bilder aber nicht klar an. Ein Hinweis wie ein Zähler oder ein Teil des nächsten Bildes würde es einfacher machen, die restlichen Fotos zu entdecken.

Für deinen Shop

Behalte einen sichtbaren Hinweis darauf bei, dass es noch weitere Bilder gibt.

Website besuchen

Momentous

Vollständiger Screenshot wird geladen…

Momentous

Mobile Thumbnails identifizieren verschiedene Bilder

Momentous nutzt Punkte auf dem Desktop und einen Thumbnail-Streifen unter dem Hauptbild auf Mobile. Thumbnails helfen dabei, Bilder mit unterschiedlichen Produktinformationen zu unterscheiden. Die aufgenommene Galerie hatte keinen Lightbox-Zoom, was die Lesbarkeit in der angezeigten Größe wichtig macht. Touch-Bereiche und das aktuell ausgewählte Thumbnail müssen ebenfalls klar erkennbar sein.

Für deinen Shop

Wähle Galerie-Steuerungen, die Kunden helfen, eine bestimmte Ansicht zu finden.

Website besuchen

Athletic Brewing

Vollständiger Screenshot wird geladen…

Athletic Brewing

Gestapelte Desktop-Bilder werden zur Mobile-Sequenz

Athletic Brewing stapelt Produkt- und Lifestyle-Fotos auf der Desktop-Seite untereinander. Mobile verwandelt diese in eine horizontale Sequenz, bei der ein Teil des nächsten Bildes sichtbar ist. Da die meisten Mobile-Bilder außerhalb des sichtbaren Bereichs beginnen, bestimmt ihre Reihenfolge, welche Details Kunden als Erstes sehen.

Für deinen Shop

Platziere die Produktidentifikation und wesentliche Details früh in der Mobile-Sequenz.

Website besuchen

Our Place

Vollständiger Screenshot wird geladen…

Our Place

Eine scrollbare Galerie neben dem Kaufbereich

Our Place präsentiert Desktop-Bilder in einer scrollbaren Spalte neben einem fixierten Kaufbereich. Auf Mobile wird zu einem Full-Width-Karussell mit Punkten gewechselt. Die Desktop-Spalten benötigen aufeinander abgestimmte Längen, damit die Kauf-Optionen nützlich bleiben, ohne große Lücken zu hinterlassen oder das Ende der Bildsequenz zu verdecken.

Für deinen Shop

Prüfe die Galerie und den Kaufbereich gemeinsam auf der gesamten Seite.

Website besuchen

Nourished

Vollständiger Screenshot wird geladen…

Nourished

Ein Diagramm erklärt die Produktschichten

Nourished integriert Verpackung, Lifestyle-Fotos und ein Explosionsdiagramm der Schichten in seine Thumbnail-Galerie. Das Diagramm zeigt den Aufbau, den das Verpackungsbild nicht erklären kann. Die Auswahl der Thumbnails ändert das Bild, ohne ein Zoom-Overlay zu öffnen. Deshalb müssen die Beschriftungen der Grafik in ihrer angezeigten Größe lesbar sein und in barrierefreiem Text wiederholt werden.

Für deinen Shop

Verwende Diagramme für Details, die ein Foto nicht deutlich zeigen kann.

Website besuchen

Jonathan Adler

Vollständiger Screenshot wird geladen…

Jonathan Adler

Ein numerischer Zähler ersetzt mobile Thumbnails

Jonathan Adler kombiniert Thumbnails und Zoom auf dem Desktop mit einem numerischen Zähler in der Mobile-Galerie. Der Zähler zeigt die aktuelle Position und die Gesamtanzahl der Bilder an. Zoom- und Navigationssteuerungen benötigen ein klar unterscheidbares Verhalten, damit sich ein Kunde durch die Ansichten bewegen kann, ohne versehentlich ein vergrößertes Bild zu öffnen.

Für deinen Shop

Mache die aktuelle Position und die Galerielänge auf Mobile sichtbar.

Website besuchen

House of Spoils

Vollständiger Screenshot wird geladen…

House of Spoils

Rahmenansichten und eine Raumvorschau-Funktion

House of Spoils kombiniert Renderings von gerahmten Kunstwerken und Videos mit einer dauerhaften Positionsanzeige und einer Raumvorschau. Diese Ansichten adressieren, wie das fertige Stück in einer Umgebung aussehen wird. Klare Beschriftungen und die Trennung von Wunschzettel- oder Mediensteuerungen halten die grundlegende Galerie-Navigation einfach bedienbar.

Für deinen Shop

Nutze Vorschauen, um Kunden zu helfen, das fertige Objekt im Kontext zu beurteilen.

Website besuchen

DedCool

Vollständiger Screenshot wird geladen…

DedCool

Grafiken beschreiben Duftnoten und Intensität

DedCool mischt Flakon-Renderings mit Grafiken zu Duftintensität und Duftnoten. Runde Desktop-Thumbnails werden zu einem Mobile-Karussell. Die Grafiken geben Kunden ein Vokabular zum Vergleichen von Düften, bleiben dabei aber eine beschreibende Orientierungshilfe und kein Ersatz für das tatsächliche Riechen. Äquivalenter Text sollte außerhalb der Bilder verfügbar sein.

Für deinen Shop

Stelle Duftbeschreibungen sowohl in lesbarem Text als auch als Galerie-Grafiken bereit.

Website besuchen

Reihenfolge der Bilder in der Produktgalerie: Was jede Ansicht erklärt

Unit Editions zeigt neben dem Buchcover auch die Innenseiten. Nourished nutzt eine Explosionszeichnung, um Schichten zu erklären, die das Foto der Verpackung nicht zeigen kann. Heart Coffee Roasters ergänzt die Fotografie der Kaffeetüte um eine Infografik. Diese Bilder beantworten unterschiedliche Fragen, plane also ihre Reihenfolge, bevor du dich für Pfeile oder Thumbnails entscheidest.

Notiere dir, was jede Ansicht beiträgt: Gesamterscheinung, Detail, Größenverhältnis, Verwendung oder eine ausgewählte Option. Intelligentsia und Smith Teamaker aktualisieren das Hauptbild, wenn sich die Variante ändert, und geben der Auswahl so eine sichtbare Bestätigung. Halte geschriebene Produktdetails auch außerhalb von Grafiken zugänglich und prüfe die Belege für Zertifizierungen oder Gesundheitsversprechen unabhängig davon, wie gut die Galerie sie darstellt.

FINEX und Athletic Brewing lassen einen Teil des nächsten mobilen Bildes sichtbar. Jonathan Adler verwendet einen numerischen Zähler, und Unit Editions behält Thumbnails und Pfeile bei. Jeder dieser Ansätze zeigt den Kunden, dass weitere Ansichten verfügbar sind. Bei der erfassten Swipe-Galerie von Borough Kitchen fehlt ein sichtbarer Hinweis auf die Position, wodurch diese Information weniger offensichtlich ist.

Wähle Bedienelemente, die zu den Bildern passen, die die Leute erkennen müssen. Ein Thumbnail kann ein Diagramm von einem Foto unterscheiden, bevor es geöffnet wird; Punkte benötigen weniger Platz, kommunizieren aber nur die Position. Prüfe dann die Lesbarkeit in der tatsächlichen mobilen Größe. Momentous und Nourished öffneten in den erfassten Interaktionen keine Zoom-Ansicht, daher dürfen kleine grafische Beschriftungen nicht auf eine Vergrößerung angewiesen sein, um lesbar zu werden.

Häufige Fragen

Wie viele Bilder braucht eine Produktgalerie?

Genug, um die wichtigsten Fragen zu beantworten, ohne dieselbe Ansicht zu wiederholen. Je nach Artikel kann das die Gesamterscheinung, Details, Größenverhältnisse, die Verwendung und Varianten umfassen.

Wann sind Thumbnails besser als Punkte?

Mit Thumbnails können Kunden eine bestimmte Ansicht erkennen, bevor sie sie auswählen. Punkte nehmen weniger Platz ein und zeigen die Position an. Berücksichtige die Anzahl der Bilder und was sie erklären, und prüfe dann die mobile Version.

Sollte sich das Bild aktualisieren, wenn sich eine Variante ändert?

Wenn Farbe, Verpackung oder Format unterschiedlich aussehen, hilft ein aktualisiertes Bild den Kunden, die Option zu bestätigen. Halte es mit den Kauf-Bedienelementen synchronisiert.

Was sollte nach dem Haupt-Produktfoto kommen?

Nutze die nächste Ansicht, um die wichtigste Frage zu beantworten, die das Hauptfoto offenlässt. Das kann eine Innenseite, ein Materialdetail, ein Größenvergleich oder das Produkt in der Anwendung sein. Vermeide es, die Reihenfolge mit fast identischen Blickwinkeln zu füllen.

Sollten wichtige Produktinformationen nur in den Galeriebildern erscheinen?

Nein. Wiederhole Details wie Maße, Inhaltsstoffe oder Anleitungen im leicht zugänglichen Seitentext. Kleine Grafiken können auf dem Smartphone schwer zu lesen sein, besonders wenn die Galerie keine Zoomfunktion hat.

Setze die Änderung in deinem Theme um

Gib Fudge ein Ziel und eine Referenz. Das Tool schlägt Änderungen für deinen Shop vor, erstellt einen Entwurf in deinem Shopify-Theme und gibt dir Rückmeldung. Du überprüfst jede Änderung, bevor sie live geht.

Sieh dir an, wie der Shop-Editor funktioniert

Ähnliche Kollektionen

Alle Kollektionen