Hervorragende Produktbilder sind ein wichtiger Teil des Betriebs eines Onlineshops. Sie können Bilder verwenden, um Produkte auf Ihrer gesamten Website zu präsentieren, wichtige Funktionen hervorzuheben und Details und Texturen genauer hervorzuheben. Diese Anleitung beschreibt verschiedene Möglichkeiten, wie Sie Produktbilder verwenden können.
Tipp: Um den größtmöglichen Nutzen aus dieser Anleitung zu ziehen, erstellen Sie bitte zunächst eine Produktseite und fügen Sie Produkte zu Ihrem Shop hinzu.
Video ansehen
Bevor Sie Bilder hochladen
Überprüfen Sie unsere Richtlinien zur Bildformatierung, um sicherzustellen, dass Ihre Bilder eine angemessene Größe und Qualität für die Online-Anzeige haben.
Das Seitenverhältnis eines Bildes beeinflusst dessen Erscheinungsbild, ebenso wie deine Optionen für Produktgröße und automatisches Abschneiden. Wir empfehlen, die Bilder vor dem Hochladen zu bearbeiten, sodass diese das gewünschte Seitenverhältnis haben. Du kannst auch den Fokus eines zugeschnittenen Bildes nach dem Hochladen mit seinem Bildausschnitt anpassen.
Tipp: Laden Sie zunächst ein paar Testbilder hoch, um zu sehen, wie diese angezeigt werden, und experimentieren Sie mit den Stil-Optionen.
Produkt-Seite vs. Produktdetails-Seite
Bevor wir auf Produktbilder eingehen, ist es hilfreich zu verstehen, wie Squarespace Produkte auf allen Websites strukturiert. Produkte sind in zwei Teile gegliedert:
- Produkt-Seiten sind Landing-Pages für mehrere Produkte. In Version 7.1 heißen Sie Shop-Seiten.
- Details-Seiten zeigen Details für ein einzelnes Produkt
Auf dieser Produktseite können Besucher beispielsweise mehrere Produkte durchstöbern.
Wenn du auf ein Produkt klickst, gelangst du zu dessen Produktdetails-Seite, wo du weitere Bilder und Informationen über das jeweilige Produkt sehen kannst.
Arten von Produktbildern
Wenn Sie ein Produkt hinzufügen oder bearbeiten, können Sie diese Bilder hinzufügen:
- Hauptbild
- Additional images
- Vorschaubild
- Variantenbilder
Die Darstellung hängt von der Version deiner Seite ab.
Vorschaubilder
In den meisten Bereichen deiner Seite repräsentieren Vorschaubilder das Produkt, weshalb es sich empfiehlt, das Bild zu verwenden, das deine Kunden als erstes sehen sollen. Das Bild erscheint in folgenden Bereichen:
- Produkt-Seiten. Käufer klicken auf das Vorschaubild eines Produkts, um zur Produktdetails-Seite zu gelangen.
- Produkt-Blöcke
- Übersichts-Blöcke
- Produkt-Seite und Inventar-Menü
Standardmäßig wird das erste Bild, das im Tab Artikel des Produkt-Editors hinzugefügt wurde, zum Vorschaubild. So legen Sie ein anderes Vorschaubild fest:
- Klicken Sie im Produkt-Editor auf den Tab Optionen.
- Klicken Sie im Feld „Vorschaubild“ auf das Papierkorb-Symbol.
- Fügen Sie ein Vorschaubild hinzu.
- Klicken Sie auf Speichern.
Wenn Sie das Vorschaubild entfernen, ohne einen Ersatz festzulegen, wird stattdessen das Hauptbild angezeigt.
Hauptbilder
Das Hauptbild erscheint als erstes Bild auf Produktdetails-Seiten.
Das Hauptbild ist das Bild links oben im Tab Artikel des Produkt-Editors. Klicken und ziehen Sie Bilder, um deren Reihenfolge zu ändern.
Additional images
Zusätzliche Bilder geben Kunden einen umfassenden Überblick über deine Produkte. Verwende zusätzliche Bilder, um Detailaufnahmen, dein Produkt aus verschiedenen Blickwinkeln oder inszenierte Fotos anzuzeigen. Zusätzliche Bilder erscheinen auf Produktdetails-Seiten. Im Tab Artikel des Produkt-Editors sind alle Bilder nach dem ersten Bild zusätzliche Bilder. Klicke und ziehe Bilder, um deren Reihenfolge zu ändern.
Variantenbilder
Auf Produktdetails-Seiten zeigen Variantenbilder Käufern, wie die einzelnen Produktvarianten aussehen. Du kannst Variantenbilder beispielsweise verwenden, um Produkte in verschiedenen Größen und Farben anzuzeigen. Standardmäßig wird das Produkt-Vorschaubild angezeigt, bis Käufer eine Variante aus dem Drop-down-Menü auswählen.
So passen Sie ein Variantenbild an:
- Klicken Sie im Produkt-Editor auf Preise & Varianten.
- Klicken Sie in der Spalte ganz links auf das Bildfeld, um es zu bearbeiten.
In Version 7.0 hängt die Darstellung von Bildern vom Produkt-Seiten-Typ deines Templates ab.
Hauptbilder
In den meisten Bereichen deiner Seite repräsentiert das Hauptbild das Produkt, weshalb es sich empfiehlt, das Bild zu verwenden, das deine Kunden als erstes sehen sollen. Das Bild erscheint in folgenden Bereichen:
- auf klassischen oder einzigartigen Produkt-Seiten
- als erstes Bild auf Produktdetails-Seiten
- Im Produktseiten-Menü oder im Inventar-Menü.
Das Hauptbild ist das Bild links oben im Tab Artikel des Produkt-Editors. Klicken und ziehen Sie Bilder, um deren Reihenfolge zu ändern.
Additional images
Zusätzliche Bilder geben dem Kunden einen umfassenden Überblick über Ihre Produkte. Verwenden Sie zusätzliche Bilder, um Detailaufnahmen, Ihr Produkt aus verschiedenen Blickwinkeln oder inszenierte Fotos anzuzeigen. An diesen Stellen erscheinen weitere Bilder:
- Produktdetails-Seiten
- Das zweite Bild kann auf erweiterten Produktseiten bei Mouseover angezeigt werden.
Im Tab Artikel des Produkt-Editors sind alle Bilder nach dem ersten Bild zusätzliche Bilder. Klicken und ziehen Sie Bilder, um deren Reihenfolge zu ändern.
Vorschaubilder
Vorschaubilder zeigen eine Vorschau deiner Produkte in verschiedenen Bereichen deiner Website. Bei Templates, die Erweiterte Produktseiten unterstützen, klicken Käufer auf das Vorschaubild eines Produkts, um zur Produktdetails-Seite zu gelangen. Vorschaubilder werden auch in diesen Bereichen angezeigt:
- Erweiterte Produktseiten
- Produkt-Blöcke
- Übersichts-Blöcke
- Im Adirondack Template werden sie als Banner auf einzelnen Produktdetail-Seiten angezeigt.
Standardmäßig wird das erste Bild, das im Tab Artikel des Produkt-Editors hinzugefügt wurde, zum Vorschaubild. So legen Sie ein anderes Vorschaubild fest:
- Klicken Sie im Produkt-Editor auf den Tab Optionen.
- Klicken Sie im Feld „Vorschaubild“ auf das Papierkorb-Symbol.
- Fügen Sie ein Vorschaubild hinzu.
- Klicken Sie auf Speichern.
Wenn Sie das Vorschaubild entfernen, ohne einen Ersatz festzulegen, wird stattdessen das Hauptbild angezeigt.
Variantenbilder
Auf Produktdetails-Seiten zeigen Variantenbilder Käufern, wie die einzelnen Produktvarianten aussehen. Du kannst Variantenbilder beispielsweise verwenden, um Produkte in verschiedenen Größen und Farben anzuzeigen. Standardmäßig wird das Produkt-Vorschaubild angezeigt, bis Käufer eine Variante aus dem Drop-down-Menü auswählen.
So passen Sie ein Variantenbild an:
- Klicken Sie im Produkt-Editor auf Preise & Varianten.
- Klicken Sie in der Spalte ganz links auf das Bildfeld, um es zu bearbeiten.
Produktbilder gestalten
Wie du Produktbilder gestaltest, hängt davon ab, auf welcher Version von Squarespace sich deine Website befindet.
Passe die Darstellung von Produktbildern an, indem du die Anpassungen Abschnitts-Stile und Produktartikel im Design-Menü anpassen.
Produktbereiche
Um die Anzeige von Produkt-Vorschaubildern in Produkt-Abschnitten zu ändern, fahre mit der Maus über den Abschnitt und klicke auf das Bleistift-Symbol.
Du kannst die Abstände, Spalten, das Seitenverhältnis und die Textausrichtung ändern. Du kannst außerdem Produktpreise ein- oder ausblenden. Um die Farben zu ändern, klicke auf Farben.
Produktdetailseiten
So änderst du die Art und Weise, wie Produkte auf der Produktdetailseite erscheinen:
- Klicken Sie im Hauptmenü auf Design und anschließend auf Produktartikel.
- Nimm Änderungen vor und klicke dann auf Speichern.
Du kannst Elemente wie das Bildseitenverhältnis, die Textausrichtung und das Design der Produktgalerie gestalten.
Verwenden Sie das Menü Website-Stile, um die Darstellung von Produktbildern anzupassen. Die verfügbaren Layouts und Stiloptionen hängen vom Typ der Produktseite Ihrer Template-Gruppe ab. Weitere Informationen finden Sie unter Produkt-Seiten gestalten.
- Klassisch
- Erweitert
- Einzigartig
Anpassungen für klassische Seiten
Das sind die bildspezifischen Anpassungen für klassische Produktseiten:
- Produkt-Seiten: Verwende die Anpassungen Produktartikel: Größe, Produktbild: automatisch abschneiden und Produkt: Hintergrundfarbe, um die Darstellung der Produktbilder auf der Produkt-Seite zu gestalten.
- Artikel-Seiten: Verwende die Anpassungen Produkt-Galerie: Größe und Produkt-Galerie: automatisch abschneiden, um die Bildgröße und das Cropping für Details-Seiten festzulegen.
Erweiterte Anpassungen
Das sind die bildspezifischen Anpassungen für erweiterte Produktseiten:
- Produkt-Seiten: Verwende die Anpassung Bild: Seitenverhältnis im Abschnitt Produkte: Layout, um die Form der Bilder auf den Produkt-Seiten festzulegen. Die Bilder werden automatisch abgeschnitten, um der gewählten Form zu entsprechen.
- Artikel-Seiten: Verwende die Anpassungen im Abschnitt „Produkte: Galerie“, beispielsweise Design, Seitenverhältnis, Vorschaubild: Ausrichtung und Vorschaubild: Breite, um Bilder auf Details-Seiten zu gestalten.
Einzigartige Anpassungen
Wenn Sie Hilfe beim Gestalten von Produktbildern in diesen Templates benötigen, besuchen Sie deren spezifische Template-Anleitungen:
Besondere Bildoptionen
Einige Produkt-Seiten bieten spezielle Funktionen, mit denen Sie Bilder dynamisch anzeigen können. Wie diese Bilder angezeigt werden, hängt von der Version Ihrer Website ab.
- Produkt-Schnellansicht – Kunden können auf einen Button klicken, um Details von Produkten in einer Lightbox anzuzeigen, ohne die aktuelle Seite verlassen zu müssen. In Version 7.1 ist dies nur auf der Seite Produktdetails verfügbar.
- Artikelvorschau – Kunden können Bilder vergrößern, um Produkte genauer unter die Lupe zu nehmen. In Version 7.1 ist dies nur auf der Seite Produktdetails verfügbar.
- Alternatives Bild bei Mouseover – Das ist eine großartige Möglichkeit, eine Besonderheit, einen anderen Winkel oder ein wichtiges Detail für jedes Produkt zu zeigen.
Wenn Sie Hilfe bei einem dieser Aspekte benötigen, gehen Sie bitte zu spezielle Funktionen der Produktseite.
Alternativtext hinzufügen
Das Hinzufügen von Alternativtext zu Produktbildern identifiziert den Inhalt Ihrer Bilder für Browser und Suchmaschinen. So werden Ihre Bilder eher in Suchergebnissen angezeigt, und es macht Ihre Website für Besucher, die unterstützende Screenreader verwenden, leichter zugänglich.
Verwenden Sie beim Hinzufügen von Alternativtext kurze Begriffe, die sowohl das spezifische Bild als auch das Produkt beschreiben. Zum Beispiel „Messingschließe Nahaufnahme“ und „Strandkleid mit Blumen, Rücken“.