Produkt-Bilder

Tipps, wie du herausragende Produktfotografien zu deinem Shop hinzufügen kannst.

Zuletzt aktualisiert: 3. Januar 2025

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

Registriere dich für unser Webinar „Design tips to increase your store’s sales“ („Design-Tipps zur Umsatzsteigerung in deinem Shop“; auf Englisch), in dem wir Tools und Tipps präsentieren, mit denen du deine Produkte auf deiner Website hervorheben und den Umsatz steigern kannst.

Video ansehen

Bevor du Bilder hinzufügst

Du kannst Bilder zu einem Produkt hinzufügen, indem du sie direkt hochlädst oder Bilder wiederverwendest, die du bereits in anderen Bereichen deiner Website hochgeladen hast.

Bevor du ein Bild hochlädst, lies unsere Richtlinien zur Bildformatierung, um sicherzustellen, dass deine 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 Zuschneiden. Wir empfehlen, deine Bilder vor dem Hochladen zu bearbeiten, sodass diese das gewünschte Seitenverhältnis haben. Du kannst auch den Fokus eines zugeschnittenen Bildes nach dem Hinzufügen mit seinem Bildausschnitt ändern.

Ein Produkt kann bis zu 100 Bilder haben. Das Überladen des Produkts mit Bildern kann jedoch dazu führen, dass die Seite langsam geladen wird. Wir empfehlen, Seiten unter 5 MB zu halten.

Tipp

Füge zunächst einige Testbilder hinzu, um zu sehen, wie sie aussehen, und experimentiere mit den Stil-Optionen.

Shop-Seite vs. Produktdetailseiten

Bevor wir auf Produktbilder eingehen, ist es hilfreich zu verstehen, wie Squarespace Produkte auf allen Websites strukturiert. Produkte sind in zwei Teile gegliedert:

  • Shop-Seiten sind Landing-Pages für mehrere Produkte.
  • Details-Seiten zeigen Details für ein einzelnes Produkt

Auf dieser Shop-Seite können Besucher beispielsweise mehrere Produkte durchstöbern.

Galapagos__.jpg

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

Teresa_Jacket___Galapagos.jpg

Arten von Produktbildern

Wenn Sie ein Produkt hinzufügen oder bearbeiten, können Sie diese Bilder hinzufügen:

  • Ausgewähltes Bild
  • Hauptbild
  • Additional images
  • Variantenbilder
  • Alternative Social-Sharing-Bilder

Die Darstellung hängt von der Version deiner Seite ab.

In den meisten Bereichen deiner Seite repräsentieren ausgewählte Bilder das Produkt, weshalb es sich empfiehlt, das Bild zu verwenden, das deine Kunden als erstes sehen sollen. Das Bild erscheint in folgenden Bereichen:

  • Shop-Seiten. Käufer klicken auf das ausgewählte Bild eines Produkts, um zur Produktdetails-Seite zu gelangen.
  • Produkt-Blöcke
  • Übersichts-Blöcke
  • Die Shop-Seite und die Produkte-Menüs

Standardmäßig wird das Hauptbild deines Produkts zum ausgewählten Bild. So legst du ein anderes ausgewähltes Bild fest:

  1. Klicke im Produkt-Editor auf das Vorschaubild des aktuell ausgewählten Bildes.
  2. Lade ein Bild hoch.
  3. Bewege den Mauszeiger über Fertig und klicke auf Speichern.

Hauptbilder

Das Hauptbild erscheint als erstes Bild auf Produktdetails-Seiten. Das Hauptbild ist das erste Bild, das im Produkt-Editor angezeigt wird. Du kannst Bilder anklicken und an die gewünschte Stelle ziehen, um deren Reihenfolge zu ändern.

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 Produkt-Editor 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 ausgewählte Produktbild angezeigt, bis Käufer eine Variante aus dem Drop-down-Menü auswählen.

So passen Sie ein Variantenbild an:

  1. Scrolle im Produkt-Editor zum Abschnitt „Varianten“ und klicke auf Alle bearbeiten.
  2. Klicke neben einer Variante auf das Bild-Upload-Symbol.
  3. Klicke auf das Symbol +, um ein Bild hochzuladen, oder wähle ein Bild aus, das du bereits hochgeladen hast.
  4. Klicken Sie auf Anwenden.

Du kannst auch im Haupt-Produkt-Editor auf eine Variante klicken und dann auf Bilder hinzufügen , um ein Variantenbild hinzuzufügen. Variantenbilder werden in der Galerie der zusätzlichen Bilder auf der Produktdetailseite angezeigt. 

In Version 7.0 hängt die Darstellung von Bildern vom Shop-Seitentyp 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 Shop-Seiten.
  • als erstes Bild auf Produktdetails-Seiten
  • Im Shop-Seiten-Menü oder Produkte-Menü.

Das Hauptbild ist das erste Bild, das im Produkt-Editor angezeigt wird. Du kannst Bilder anklicken und an die gewünschte Stelle ziehen, um deren Reihenfolge zu ändern.

product_primary_image.png

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

Ausgewählte Bilder zeigen eine Vorschau deiner Produkte in verschiedenen Bereichen deiner Website. Bei Templates, die erweiterte Shop-Seiten unterstützen, klicken Käufer auf das ausgewählte Bild eines Produkts, um zur Produktdetails-Seite zu gelangen. Ausgewählte Bilder werden auch in diesen Bereichen angezeigt:

Standardmäßig wird das erste Bild, das im Tab Artikel des Produkt-Editors hinzugefügt wurde, zum ausgewählten Bild. So legst du ein anderes ausgewähltes Bild fest:

  1. Klicke im Produkt-Editor auf den Tab Optionen.
  2. Klicke im Feld „Ausgewähltes Bild“ auf das Papierkorb-Symbol.
  3. Ausgewähltes Bild hinzufügen.
  4. Klicken Sie auf Speichern.

Wenn du das ausgewählte Bild entfernst, 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 ausgewählte Produktbild 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.

Variantenbilder werden in der Galerie der zusätzlichen Bilder auf der Produktdetailseite angezeigt.

Alternative Social-Sharing-Bilder

Das alternative Social-Sharing-Bild eines Produkts wird auf Social-Sharing-Plattformen oder in SMS-Anwendungen angezeigt, wenn du die URL der Produktdetailseite teilst. Wenn du kein alternatives Social-Sharing-Bild für ein Produkt hinzufügst, verwenden wir stattdessen das ausgewählte Bild des Artikels.

Produktbilder löschen

So löschst du Produktbilder:

  1. Produkt bearbeiten
  2. Fahre im  Bild-Abschnitt mit dem Cursor als Mouseover über das Bild und klicke auf das Papierkorb-Symbol. 
  3. Klicke auf Löschen

Wenn du ein Variantenbild aus der Galerie der zusätzlichen Bilder löschst, wird es auch aus dem Varianten-Editor entfernt.

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 Abschnittsstile und die Produktartikel-Anpassungen im Menü „Website-Stil“ verwendest.

Produktbereiche

Um die Anzeige von ausgewählten Bilder der Produkte in den Shop-Abschnitten zu ändern, bewege den Mauszeiger über den Abschnitt und klicke auf das Bleistiftsymbol.

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.

Wenn deine Produktbilder abgeschnitten wirken, besuche Fehlerbehebung beim Zuschneiden.

Produktdetailseiten

So änderst du die Art und Weise, wie Produkte auf der Produktdetailseite erscheinen:

  1. Bearbeite die Seite und klicke auf Design bearbeiten.
  2. Öffne Abschnittsstile und klicke dann auf das Drop-down-Menü „Layout“.
  3. Wähle ein Layout aus.
  4. Klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder klicke auf Beenden und dann auf Speichern, um den Editor zu schließen.

Du kannst Elemente wie das Seitenverhältnis von Bildern, die Textausrichtung und das Design der Produkt-Galerie gestalten. Um ein einheitliches Design zu erzielen, gelten diese Stil-Änderungen für alle Produkte in deinem Shop. Es ist nicht möglich, diese Einstellungen für bestimmte Produkte zu bearbeiten.

Über das Menü „Website-Stil“ kannst du die Darstellung von Produktbildern anpassen. Welche Layouts und Stiloptionen jeweils verfügbar sind, hängt vom Shop-Seiten-Typ deiner Template-Familie ab. Weitere Informationen findest du unter Gestaltung von Shop-Seiten.

  • Klassisch
  • Erweitert
  • Einzigartig

Anpassungen für klassische Seiten

Dies sind die bildspezifischen Anpassungen für klassische Shop-Seiten:

  • Shop-Seiten – Anhand der Anpassungen Produktartikel: Größe, Produktbild: Automatisch zuschneiden und Produkt: Hintergrundfarbe kannst du die Darstellung der Produktbilder auf der Shop-Seite 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

Dies sind die bildspezifischen Anpassungen für erweiterte Shop-Seiten:

  • Shop-Seiten – Verwende die Anpassung Bildseitenverhältnis im Abschnitt Produkte: Layout, um die Form der Bilder auf der Shop-Seite festzulegen. Die Bilder werden automatisch auf die Form zugeschnitten.
  • Artikel-Seiten – Mit den Anpassungen im Abschnitt „Produkte: Galerie“, beispielsweise Design, Seitenverhältnis, Vorschaubild: Ausrichtung und Vorschaubild: Breite kannst du Bilder auf Details-Seiten gestalten.

Einzigartige Anpassungen

Wenn Sie Hilfe beim Gestalten von Produktbildern in diesen Templates benötigen, besuchen Sie deren spezifische Template-Anleitungen:

Besondere Bildoptionen

Einige Shop-Seiten bieten spezielle Funktionen, mit denen du Bilder dynamisch anzeigen kannst. Wie diese Bilder angezeigt werden, hängt von der Version deiner Website ab.

  • Produkt: Schnellansicht – Kunden können auf einen Button klicken, um Artikeldetails in einer Lightbox anzuzeigen, ohne die aktuelle Seite zu verlassen. In Version 7.1 ist dies nur auf der Produktdetails-Seite verfügbar.
  • Produkt-Zoomansicht – Kunden können Produktbilder vergrößern, um Material, Textur und feinere Details genauer zu betrachten. In Version 7.1 ist dies nur auf der Produktdetails-Seite 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 du Hilfe zu einem dieser Themen benötigst, besuche Spezielle Funktionen der Shop-Seite.

Alternativtext hinzufügen

Das Hinzufügen von Alternativtext zu Produktbildern identifiziert den Inhalt deiner Bilder für Browser und Suchmaschinen. So werden deine Bilder eher in Suchergebnissen angezeigt und deine Website wird für Besucher, die unterstützende Screenreader verwenden, barrierefreier.

Verwende 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“. Du kannst Alternativtext mit bis zu 200 Zeichen zu jedem Produktbild hinzufügen. In dieser Anleitung erfährst du mehr über das Erstellen einer barrierefreien E-Commerce-Website.

Produktbilder mit Erweiterungen verbessern

Stelle eine Verbindung mit soona, einem virtuellen Content-Studio für E-Commerce-Fotografie und -Videos, im Menü „Erweiterungen“ deiner Website her, um visuelle Elemente in professioneller Qualität zu erstellen, die deinen Onlineshop aufwerten. Versende deine Produkte einfach an soona, teile mit, was du erstellen möchtest, stelle dein Fotoshooting zusammen oder wähle ein Preispaket aus und nimm virtuell an deinem Shooting teil.

Wir arbeiten zwar mit Drittanbieter-Services zusammen, um sicherzustellen, dass Squarespace Extensions ordnungsgemäß funktionieren, jedoch fallen Erweiterungen nicht in den Zuständigkeitsbereich unseres Supports. Wir können dir beim Verbinden oder Trennen deiner Erweiterungen behilflich sein. Bei allen anderen Fragen wende dich bitte direkt an den Anbieter der Erweiterung.

Footer Image
  • Hol dir Hilfe von der Community

  • Hol dir Hilfe von unserer Community zu erweiterten individuellen Anpassungen.

  • Beauftrage einen Squarespace-Experten

  • Hebe dich online von der Masse ab, indem du dir von einem erfahrenen Webdesigner oder Entwickler helfen lässt.