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.
Hinweis: Wir haben vor Kurzem den Produkt-Editor aktualisiert, sodass die Schritte in dieser Anleitung möglicherweise nicht mit dem übereinstimmen, was du auf deiner Website siehst. Du kannst jederzeit zum neuen Produkt-Editor wechseln oder die Schritte unter Den klassischen Produkt-Editor verwenden befolgen, wenn du noch nicht wechseln möchtest.
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.
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.
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:
- Vorschaubild
- Hauptbild
- Additional images
- Variantenbilder
- Alternative Social-Sharing-Bilder
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:
- Shop-Seiten. Käufer klicken auf das Vorschaubild eines Produkts, um zur Produktdetails-Seite zu gelangen.
- Produkt-Blöcke
- Übersichts-Blöcke
- Die Shop-Seite und Inventar-Menüs
Standardmäßig wird das Hauptbild deines Produkts zum Vorschaubild. So legst du ein anderes Vorschaubild fest:
- Klicke im Produkt-Editor auf Vorschaubild.
- Lade ein Bild hoch.
- Fahre mit dem 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.
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. Klicken und ziehen Sie 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:
- Scrolle im Produkt-Editor zum Abschnitt „Varianten“ und klicke auf Alle bearbeiten.
- Klicke neben einer Variante auf das Bild-Upload-Symbol.
- Klicke auf das Symbol +, um ein Bild hochzuladen, oder wähle ein Bild aus, das du bereits hochgeladen hast.
- Klicken Sie auf Anwenden.
Du kannst auch im Haupt-Produkt-Editor auf eine Variante klicken und dann auf Bilder hinzufügen klicken, um ein Variantenbild hinzuzufügen.
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 Inventar-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.
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 Shop-Seiten beim 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 Shop-Seiten unterstützen, klicken Käufer auf das Vorschaubild eines Produkts, um zur Produktdetails-Seite zu gelangen. Vorschaubilder werden auch in diesen Bereichen angezeigt:
- Erweiterte Shop-Seiten
- 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:
- Klicke im Produkt-Editor auf den Tab Optionen.
- Klicke 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.
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 Vorschaubild des Artikels.
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 Produkt-Vorschaubildern 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:
- Bearbeite die Seite, öffne Website-Stile und klicke dann 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.
Ü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 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“.