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.
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.
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:
- Ausgewähltes Bild
- Hauptbild
- Additional images
- Variantenbilder
- Alternative Social-Sharing-Bilder
Die Darstellung hängt von der Version deiner Seite ab.
Ausgewählte Bilder
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 Inventar-Menüs
Standardmäßig wird das Hauptbild deines Produkts zum ausgewählten Bild. So legst du ein anderes ausgewähltes Bild fest:
- Klicke im Produkt-Editor auf Ausgewähltes Bild.
- 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 ausgewählte Produktbild 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.
Ausgewählte Bilder
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:
- 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 ausgewählten Bild. So legst du ein anderes ausgewähltes Bild fest:
- Klicke im Produkt-Editor auf den Tab Optionen.
- Klicke im Feld „Ausgewähltes Bild“ auf das Papierkorb-Symbol.
- Ausgewähltes Bild hinzufügen.
- 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:
- 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 ausgewählte Bild 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 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:
- Bearbeite die Seite, öffne Website-Stile und klicke dann auf das Drop-down-Menü „Layout“.
- Wähle ein Layout aus, bewege den Mauszeiger über Fertig und klicke auf Speichern.
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 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“.