Hinweis: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind einige Anleitungen nur auf Englisch verfügbar.

Produkt-Bilder

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.

Galapagos__.jpg

Wenn du auf ein Produkt klickst, gelangst du zu dessen Produktdetails-Seite, wo du weitere Bilder und Informationen über das jeweilige Produkt sehen kannst.

Teresa_Jacket___Galapagos.jpg

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:

  1. Klicken Sie im Produkt-Editor auf den Tab Optionen.
  2. Klicken Sie im Feld „Vorschaubild“ auf das Papierkorb-Symbol.
  3. Fügen Sie ein Vorschaubild hinzu.
  4. 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.

product_primary_image.png

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. 

Additional_Image.png 

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:

  1. Klicken Sie im Produkt-Editor auf Preise & Varianten.
  2. 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.

product_primary_image.png

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:

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.

Additional_Image.png

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: 

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:

  1. Klicken Sie im Produkt-Editor auf den Tab Optionen.
  2. Klicken Sie im Feld „Vorschaubild“ auf das Papierkorb-Symbol.
  3. Fügen Sie ein Vorschaubild hinzu.
  4. 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:

  1. Klicken Sie im Produkt-Editor auf Preise & Varianten.
  2. 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:

  1. Klicken Sie im Hauptmenü auf Design und anschließend auf Produktartikel.
  2. 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ößeProduktbild: 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“.

War dieser Beitrag hilfreich?
17 von 87 fanden dies hilfreich