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

Gestalten der Shop-Seiten

Du kannst die Darstellung von Produkten auf deiner Website an das Design und die Präsentation deiner Marke anpassen. Verwende diese Anleitung, um die Stiloptionen für deine Shop-Seiten und Produktdetailseiten basierend auf der Version deiner Website zu finden.

Shop-Seite vs. Produktdetails-Seite

Bevor du deine Produkte gestaltest, solltest du verstehen, wie Squarespace sie auf allen Websites strukturiert. Die Produkte sind in zwei Bereiche unterteilt: Shop-Seiten, die eine durchsuchbare Landing-Page erstellen, und einzelne Produktdetailseiten. Beide Bereiche bieten einige Stil-Anpassungen und haben ihre eigenen Stiloptionen. Weitere Informationen findest du unter Produkte zu deinem Shop hinzufügen.

Öffnen der Stiloptionen

Du kannst die Stiloptionen für die Shop-Seite und Produktdetails an zwei Stellen ändern:

  • Shop-Seiten – Klicke in der Website-Vorschau auf Bearbeiten und dann im Shop-Abschnitt, den du bearbeiten möchtest, auf das Bleistiftsymbol. Um mehr über das Öffnen von Shop-Abschnittsstilen zu erfahren, besuche die Sammlungs-Seiten-Abschnitte in Version 7.1.
  • Produktdetailseiten – Öffne die Produktdetailseite, die du bearbeiten möchtest. Klicke auf Design bearbeiten und dann auf das Pinselsymbol. Diese Stileinstellungen gelten für alle Produktdetailseiten auf deiner Website.

So gestaltest du Shop-Seiten:

  1. Öffne die Shop-Seite, die du bearbeiten möchtest.
  2. Klicke im Hauptmenü auf Designs und anschließend auf Website-Stile.
  3. Verwende die Anpassungen in den Produktbereichen, um den Stil der Landing-Page zu ändern.
  4. Um Anpassungen einzelner Produktdetailseiten vorzunehmen, beende Website-Stile, öffne ein Produkt und gib Website-Stile erneut ein.

Tipps:

  • Klicken Sie auf einen beliebigen Bereich der Seite in der Vorschau, um nur die für diesen Bereich verfügbaren Stil-Anpassungen anzuzeigen und den Rest auszublenden.
  • Wenn du mehrere Shop-Seiten hast, gelten Stiländerungen für die gesamte Website auf allen Shop-Seiten, um ein einheitliches Erscheinungsbild zu schaffen.
  • Dein Template kann Funktionen wie Banner-Bilder oder Seiten-Header haben, die das Aussehen der Shop-Seite beeinflussen.

Shop-Seite

Besucher deiner Shop-Seite sehen alle Vorschaubilder deiner Produktartikel in einem Raster angeordnet. In den Abschnittsstilen des Shops kannst du diese Details anpassen, deine Änderungen gelten für alle Shop-Seiten auf deiner Website:

Format:

  • Bildbreite
  • Spalten-Abstände
  • Zeilen-Abstände
  • Anzahl der Spalten (mindestens zwei)
  • Seitenverhältnis von Bildern
  • Textausrichtung
  • Bildtext-Abstände
  • Preis ein- oder ausblenden
  • Wo die Kategorie-Navigation angezeigt wird. Es ist nicht möglich, die Kategorie-Navigation zu verbergen.
  • Text-Ausrichtung von Headern
  • Kategorie-Titel anzeigen – Blendet den Seitentitel oben im Shop-Abschnitt aus oder zeigt ihn an.
  • Produkt-Navigation
    • Brotkrümel – Zeigt den Navigationspfad der Besucher an, bevor sie ihre aktuelle Seite aufgerufen haben, mit Ausnahme ähnlicher Produkte und gefilterter Kategorie-Seiten. 
    • Keiner

Farben:

Verwende die folgende Tabelle, um die Stiloptionen für diese Template-Gruppen zu finden:

  • Erweitert – Brine, Farro, Skye, Tremont, York
  • Klassisch – Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley
  • Einzigartig - Galapagos und Supply folgen verschiedenen Stil-Anpassungen. Informationen zur Gestaltung von Produkten findest du in deiner Template-Anleitung.

Layout

Besucher deiner Shop-Seite sehen alle Vorschaubilder deiner Produktartikel in einem Raster angeordnet. Gestalte das Raster mit diesen Anpassungen.

Website-Stil-Abschnitt

  • Erweitert – Produkt: Layout
  • Klassisch – Produkte
Beschreibung Erweitert Klassisch
Anzahl der Elemente pro Zeile ändern Elemente pro Zeile Produkte pro Zeile
Abstand der einzelnen Elementen in der Zeile ändern Abstand der Elemente entf.
Bildform ändern. Bilder werden passend zugeschnitten Seitenverhältnis von Bildern entf.
Form des Bild-Containers festlegen entf. Produkt: Artikelgröße
Wähle aus, ob das Bild zum Ausfüllen des Bild-Containers zugeschnitten wird entf. Produktbild: Automatisch abschneiden
Ändere die Farbe, die hinter Bildern angezeigt wird, die nicht auf die Containergröße zugeschnitten sind entf. Produkt: Hintergrundfarbe

Produktinformationen

Um Mobilgerät-Anpassungen für erweiterte Shop-Seiten anzuzeigen, wähle Position: Overlay.

Website-Stil-Abschnitt

  • Erweitert – Produkte: Details
  • Klassisch – Produkte
Beschreibung Erweitert Klassisch
Lege den Titel und den Preis fest, die unter dem Bild oder bei Mouseover angezeigt werden sollen Position: Unter, Overlay Produktliste: Titel: Unter, Overlay
Richte den Text aus, wenn Produktliste: Titel: Unter aktiviert ist entf. Produktliste: Ausrichtung: Mitte, Links
Lege die Farbe des Mouseover-Overlays fest, wenn Produktliste: Titel: Overlay ausgewählt ist. Stelle den Schieberegler ein, um die Transparenz festzulegen entf. Produkt-Overlay-Farbe
Wähle aus, wo der Text in mobilen Browsern angezeigt wird Position (Mobil): Unter, Overlay entf.
Wähle die Textausrichtung aus Ausrichtung entf.
Lege die Farbe des Mouseover-Overlays fest, wenn Position: Overlay ausgewählt ist. Bewege den Schieberegler, um die Transparenz festzulegen Overlay-Farbe entf.
Ändere die Ausrichtung des Texts weiter, wenn Anzeige bei Mouseover festgelegt ist Overlay-Freiraum entf.
Abstand unter jeder Zeile ändern Abstände entf.
Deaktiviere diese Option, um die Titel der Elemente auszublenden Titel anzeigen entf.
Lege die Titel-Schriftart fest Titel: Schriftart entf.
Lege die Titelfarbe fest Titel: Farbe entf.
Lege die Titelfarbe auf Mobilgeräten fest Titelfarbe (Mobil) entf.
Lege den Abstand zwischen Text und Bild fest, wenn Position: Unter festgelegt ist Titel-Abstand entf.
Deaktiviere diese Option, um die Preise auszublenden Preis anzeigen Produktpreis anzeigen
Lege die Preis-Schriftart fest Preis: Schriftart entf.
Lege die Preisfarbe für Computer fest Preis: Farbe entf.
Lege die Preisfarbe für Mobilgeräte fest Preis: Farbe (Mobil) entf.
Lege die Farbe des Sale-Preises für Computer fest Farbe Sale-Preise entf.
Lege die Farbe des Sale-Preises für Mobilgeräte fest Verkaufspreis: Farbe (Mobil) entf.
Lege den Abstand zwischen dem Preis und dem Titel fest Preise: Abstand entf.

Produktdetails-Seite

Die angezeigten Bilder sind die Produktbilder. So gestaltest du die Produktdetailseite:

  1. Öffne die Produktdetailseite, die du bearbeiten möchtest.
  2. Klicke oben links auf Design bearbeiten . Auf einigen Websites kann es sein, dass du mit der Maus über Bearbeiten fahren, auf Design bearbeiten und dann auf das Bleistiftsymbol klicken musst.

Du kannst diese Optionen anpassen:

  • Bildbreite
  • Seitenverhältnis von Bildern (nur Slideshow-Galerie-Design)
  • Textausrichtung
  • Gestaltung der Produkt-Navigation
  • Bildabstände
  • Breite der Galerie
  • Ausrichtung des Inhalts (Oben, Mitte) – Die Ausrichtung oben zeigt möglicherweise ein Padding zwischen dem oberen Rand des Produktbildes und dem Text an
  • Galerie-Design (Slideshow, Gestapelt, Karussell) – Wenn es sich bei dem Galerie-Design um eine Slideshow handelt, werden Vorschaubilder der anderen Produktbilder angezeigt.
  • Galerie-Platzierung
  • Platzierung von Vorschaubildern für Galerien – Positioniert die Vorschaubilder des Produkts, wenn das Galerie-Design Slideshow ist.
  • Formular-Breite
  • Karussell-Pfeilgröße
  • Klicke auf Aktion (Zoom oder Lightbox)
  • Mouseover-Aktion (Zoom oder keine)
  • Bild-Zoomfaktor

Ähnliche Produkte

Der Abschnitt „Ähnliche Produkte“ auf den Produktdetailseiten folgt den Anpassungen in den Abschnittsstilen des Shops. Um von einer Produktdetailseite aus auf diese Einstellungen zuzugreifen, gehe zurück zur Shop-Seite und klicke oben links auf Bearbeiten. Die Schriftarten folgen den Schriftart-Anpassungen deiner Website.

In den Warenkorb-Button

Dieser Button folgt den Button-Stil-Anpassungen deiner Website. Es ist nicht möglich, den Button In den Warenkorb legen in Version 7.1 auszublenden. Wenn ein Produkt ausverkauft ist, wird der Button In den Warenkorb legen verdunkelt angezeigt.

Kasse-Button

Der Button Kasse, der auf der Warenkorb-Seite angezeigt wird, entspricht den Farbeinstellungen deiner Website. Es ist nicht möglich, seine Form oder Schriftart anzupassen.

Drop-down-Menüs für Varianten

Die Farbe des Drop-down-Menüs für Varianten ändert sich je nach Farbdesign des Abschnitts.

Das Mengenfeld

Das Mengenfeld wird auf der Produktdetailseite angezeigt, wenn:

  • Der Lagerbestand des Produkts größer als eins ist
  • Es Varianten hat, unabhängig von den Lagerbeständen der einzelnen Varianten

Um den aktuellen Lagerbestand für jede Variante auf der Produktdetailseite anzuzeigen, aktiviere Labels für begrenztes Inventar. Dies verhindert, dass Kunden versuchen, mehr als ein Produkt in ihren Warenkorb zu legen, wenn der Lagerbestand eins ist.

Verwende die folgende Tabelle, um die Stiloptionen für diese Template-Gruppen zu finden:

  • Erweitert – Brine, Farro, Skye, Tremont, York
  • Klassisch – Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley
  • Einzigartig - Galapagos und Supply folgen verschiedenen Stil-Anpassungen. Informationen zur Gestaltung von Produkten findest du in deiner Template-Anleitung.

Layout

Website-Stil-Abschnitt

  • Erweitert – Produkte: Layout
  • Klassisch – Produkte
Beschreibung Erweitert Klassisch
Abstand der Elemente ändern Abstände entf.
Leerzeichen oben auf der Seite hinzufügen Freiraum oben entf.

Anzeige der Seitennummerierung ändern

Navigationsanzeige: Nur Breadcrumb, Nur Seitennummerierung, Breadcrumb und Seitennummerierung, Keine Produktartikel-Navigation anzeigen
Text der Seitennummerierung ändern Stil der Seitennummerierung: Zurück/Weiter, Titel entf.
Text der Seitennummerierung ändern Navigationsausrichtung: Links, Mittig, Rechts, Geteilt entf.
Schriftart der Seitennummerierung ändern Navigation: Schriftart entf.
Farbe der Seitennummerierung ändern Navigation: Farbe entf.
Farbe des Pfeils zwischen Seitentiteln in der Navigation ändern Navigations-Separator: Farbe entf.

Tipps zur Seitennummerierung:

  • Die Anordnung der Produkte wird durch ihre Position auf den Shop-Seiten festgelegt. Sie werden von links nach rechts angeordnet.
  • Es ist nicht möglich, die Seitennummerierung auf eine bestimmte Kategorie zu beschränken. Die Seitennummerierung zeigt alle Produkte an.

Bilder

Wenn Kunden sich einen einzelnen Artikel ansehen, sehen sie die Produktbilder.

Website-Stil-Abschnitt

  • Erweitert – Produkte: Gallery
  • Klassisch – Produkte
Beschreibung Erweitert Klassisch
Bildausrichtung ändern Position: Links, Rechts entf.
Galerie-Stil ändern Design: Slideshow, Stapel entf.
Bildbreite ändern Breite entf.
Bildform festlegen Seitenverhältnis Größe der Produkt-Galerie
Wähle aus, ob das Produktbild den Bild-Container ausfüllen soll. Wenn nicht, wird die Produkt-Hintergrundfarbe hinter dem Bild angezeigt. entf. Produkt-Galerie automatisch zuschneiden
Anpassungen der Vorschaubilder wirken sich auf die Navigations-Vorschaubilder aus, die unter dem Bild angezeigt werden, wenn Design: Slideshow ausgewählt ist. Ausrichtung des Vorschaubildes: Links, Mitte, Rechts entf.
Breite der Vorschaubilder ändern Vorschaubild: Breite entf.
Abstände der Vorschaubilder ändern Vorschaubild: Abstand entf.
Den Abstand zwischen Bildern ändern, wenn Design: Gestapelt ausgewählt ist. Abstände entf.

Produktinformationen

Website-Stil-Abschnitt

  • Erweitert – Produkte: Details
  • Klassisch – Produkte
Beschreibung Erweitert Klassisch
Position der Details auf der Seite ändern Ausrichtung: Links, Mittig, Rechts entf.
Zeilenhöhe ändern

Zeilenhöhe

Die Anpassung der Zeilenhöhe im Abschnitt Textkörper: Schrift wirkt sich auch hier auf die Zeilenhöhe aus.

entf.
Buchstabenabstand ändern Abstände entf.
Produkttitel ein- oder ausblenden Titel anzeigen entf.
Schriftart der Produkttitel ändern Titel: Schriftart entf.
Farbe der Produkttitel ändern Titel: Farbe entf.
Preis ein- oder ausblenden Preis anzeigen entf.
Preis-Schriftart ändern Preis: Schriftart entf.
Preisfarbe ändern Preis: Farbe entf.
Farbe für Sale-Artikel ändern Farbe Sale-Preise entf.
Wähle aus, wo die Produktbeschreibung angezeigt wird Position des Auszugs: Über Preis, Unter Preis, Unter Button „Zum Warenkorb hinzufügen“ entf.
Schriftart der Produktbeschreibung ändern Auszug: Schriftart entf.
Farbe der Produktbeschreibung ändern Auszug: Auszug entf.
Linkfarbe der Produktbeschreibung ändern Auszugs-Links: Farbe entf.
Sharing-Buttons ausblenden oder anzeigen Teilen-Buttons anzeigen Teilen von Produkten in sozialen Netzwerken
Verwende die Anpassungen im Abschnitt Sharing-Buttons Sharing-Buttons gestalten Sharing-Buttons gestalten

Menge und Varianten

Website-Stil-Abschnitt

  • Erweitert – Produkte: Optionen
  • Klassisch  – Hauptinhalt
Beschreibung Erweitert Klassisch
Varianten ein- oder ausblenden Varianten anzeigen entf.
Menge ein- oder ausblenden. Die Menge wird nur angezeigt, wenn mehrere Artikel verfügbar sind. Anzahl anzeigen entf.
Mengenanzeige ändern Stil: Nur Text, Quadrat, Abgerundet, Pille entf.
Füge der Mengenanzeige eine Randfarbe hinzu Randfarbe entf.
Füge der Mengenanzeige eine Hintergrundfarbe hinzu Hintergrundfarbe entf.
Schriftart der Mengenanzeige ändern Label: Schriftart entf.
Farbe der Mengenanzeige ändern Label: Farbe entf.
Schriftart für Menge und Varianten ändern Schriftart Folgt Header- oder Überschrift 1-Anpassungen auf der gesamten Website.
Textfarbe für Menge und Varianten festlegen Textfarbe entf.
Schriftart des Varianten-Drop-down-Menüs ändern. Es ist nicht möglich, die Schriftart der Menü-Elemente zu ändern. Schriftart entf.

Das Mengenfeld

Das Mengenfeld wird auf der Produktdetailseite angezeigt, wenn:

  • Der Lagerbestand des Produkts größer als eins ist
  • Es Varianten hat, unabhängig von den Lagerbeständen der einzelnen Varianten

Um den aktuellen Lagerbestand für jede Variante auf der Produktdetailseite anzuzeigen, aktiviere Labels für begrenztes Inventar. Dies verhindert, dass Kunden versuchen, mehr als ein Produkt in ihren Warenkorb zu legen, wenn der Lagerbestand eins ist.

In den Warenkorb-Button

Website-Stil-Abschnitt

  • Erweitert  – Buttons anzeigen
  • Klassisch – Buttons
Beschreibung Erweitert Klassisch
Button ausblenden Deaktiviere Button anzeigen entf.
Button-Stil ändern Stil: Gefüllt, Kontur, Erhöht Stil: Standard, Gefüllt, Kontur, Erhöht
Button-Form ändern Form: Quadrat, Abgerundet, Pille Form: Quadrat, Abgerundet, Pille
Button-Padding hinzufügen oder entfernen Padding: Klein, Mittel, Groß entf.
Button-Farbe ändern Farbe Button: Farbe
Button-Textfarbe ändern Textfarbe Textfarbe
Button-Schriftart ändern Schriftart Schriftart
Tipp: Wenn ein Produkt ausverkauft ist, erscheint der Button Zum Warenkorb hinzufügen verdunkelt.

Kasse-Button

Der Button Kasse, der auf der Warenkorb-Seite angezeigt wird, entspricht den Farbeinstellungen deiner Website. Es ist nicht möglich, seine Form oder Schriftart anzupassen.

Ähnliche Produkte

Ähnliche Produkte werden unten auf der Seite in einem Raster angezeigt. Du kannst diese Anpassungen verwenden, um ihr Aussehen zu ändern.

Website-Stil-Abschnitt

  • Erweitert – Produkte: Ähnliche Produkte
  • Klassisch – Produkte
Beschreibung Erweitert Klassisch
Artikel pro Zeile ändern Elemente pro Zeile Elemente pro Zeile
Artikelabstände hinzufügen oder entfernen Abstand der Elemente Abstand der Elemente
Seitenverhältnis von Bildern festlegen Seitenverhältnis von Bildern Seitenverhältnis von Bildern
Textausrichtung ändern Ausrichtung der Details: Mitte, Links Ausrichtung der Details: Mitte, Links
Titelabstände ändern Titel-Abstand Titel-Abstand

Warenkorb

Das Symbol wird als Einkaufswagen im Website-Header angezeigt. Um mehr zu erfahren, besuche Warenkorb-Symbol anzeigen.

Alle Templates unterstützen einen Warenkorb-Button, der die Anzahl der Artikel im Warenkorb eines Kunden anzeigt und zum Kassenbereich führt. Wenn dein Warenkorb nicht angezeigt wird, schau dir unsere Tipps zur Fehlerbehebung an. Um zu erfahren, wie du das Warenkorb-Symbol deiner Vorlage gestalten kannst, besuche Warenkorb-Symbol anzeigen.

Kategorie-Navigation

Nachdem du deinen Produkten Kategorien hinzugefügt hast, wird oben auf der Landing-Page ein Navigationsmenü erstellt. Kunden können diese Links verwenden, um die Produkte zu filtern, an denen sie interessiert sind. Beachte, dass in beiden Versionen die Kategorie-Navigation

  • nur angezeigt wird, nachdem du mindestens eine Kategorie hinzugefügt hast
  • nicht auf Detailseiten angezeigt wird
  • alle Kategorien anzeigt, auch jene, die mit versteckten Produkten verlinkt sind

Die Kategorie-Navigation kann oben auf deiner Shop-Seite oder in einer Seitenleiste angezeigt werden.

Die Schriftart für die Kategorie-Navigation folgt dem Absatz-Stil.

Je nach Position werden Unterkategorien in einem verschachtelten Menü angezeigt. Um die Position zu ändern, öffne die Abschnittsstile und klicke unter Kategorientyp auf Seitenleiste oder Oben. Um die Reihenfolge der Navigation zu ändern, klicke und ziehe die Kategorien im Kategorie-Manager.

  • Seitenleiste – Unterkategorien werden in einem verschachtelten Menü auf der Shop-Seite und auf gefilterten Kategorie-Seiten angezeigt
  • Oben – Unterkategorien werden auf der gefilterten Hauptkategorie-Seite angezeigt, jedoch nicht auf gefilterten Unterkategorie-Seiten.

Um die Kategorie-Navigation auszublenden, öffne die Kategorie-Einstellungen und deaktiviere die Option Filter-Sichtbarkeit. Wiederhole dies für jede Kategorie. Um mehr zu erfahren, besuche Produkte organisieren.

Die Kategorie-Navigation wird alphabetisch angezeigt. Verwende die folgende Tabelle, um die Stiloptionen für diese Template-Gruppenzu finden:

  • Erweitert – Brine, Farro, Skye, Tremont, York
  • Klassisch – Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley
  • Einzigartig – Galapagos und Supply folgen verschiedenen Stil-Anpassungen. Es ist nicht möglich, die Kategorie-Navigation in diesen Templates auszublenden. Besuche deine Template-Anleitung für Informationen zur Gestaltung der Kategorie-Navigation.

Website-Stil-Abschnitt

  • Erweitert – Produkte: Sortieren + Filtern
  • Klassisch – Produkte
Beschreibung Erweitert Klassisch
Kategorie-Navigation ausblenden Anzeige: Ausblenden Deaktiviere Kategorie-Navigation anzeigen
Kategorie-Navigation aktivieren, deaktivieren und ausrichten Anzeige: oben, linke Seite, rechte Seite, ausblenden entf.
Lege die Breite fest, wenn die Kategorie-Navigation links oder rechts ist. Breite entf.
Den Platz unter der Navigation ändern. Außenabstand entf.
Abstand der einzelnen Elementen in der Zeile ändern Abstand der Elemente entf.
Textausrichtung festlegen Ausrichtung: Links, Mittig, Rechts entf.
Navigations-Schriftart festlegen Schriftart

Kategorie-Navigation: Schriftart

(Nicht verfügbar in Bedford, Five, Ishimoto, Montauk und Native)

Navigationsfarbe festlegen Farbe

Kategorie Navigationsfarbe

(Nicht verfügbar in Bedford, Five, Ishimoto, Montauk und Native)

Bei Mouseover angezeigte Linkfarbe auswählen Aktive Farbe

Kategorie-Navigation: Aktiv-Farbe

(Nicht verfügbar in Bedford, Five, Ishimoto, Montauk und Native)

Labels: im Sale, ausverkauft und begrenzte Verfügbarkeit

Ausverkaufte Artikel zeigen immer ein individuelles Ausverkauft-Label an. In beiden Versionen kannst du den Label-Text sowie seine Schriftart und Farbe ändern. In Version 7.0 kannst du die Form und Position des Labels ändern.

Labels für Sale-Artikel und begrenzte Verfügbarkeit werden ebenfalls angezeigt, wenn sie aktiviert sind. Die Gestaltungsmöglichkeiten hängen von der Version deiner Website ab. Du kannst den Label-Text für die begrenzte Verfügbarkeit im Menü „Begrenzte Verfügbarkeit“ ändern; es ist jedoch nicht möglich, den Label-Text für Sale-Artikel zu ändern.

  • Ausverkaufte Artikel zeigen immer ihr Status-Badge unter dem Produktbild auf der Shop-Seite und der Produktdetailseite an.
  • Labels für Sale-Artikel und begrenzte Verfügbarkeit folgen den verschiedenen Farb- und Schriftanpassungen deiner Website.

Verwende die folgende Tabelle, um die Stiloptionen für diese Template-Gruppen zu finden:

  • Erweitert – Brine, Farro, Skye, Tremont, York
  • Klassisch – Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley
  • Einzigartig - Galapagos und Supply folgen verschiedenen Stil-Anpassungen. Informationen zur Gestaltung von Produkten findest du in deiner Template-Anleitung.

Um auf diese Stil-Anpassungen zuzugreifen, gehe zur Shop-Seite, die du bearbeiten möchtest, bevor du Website-Stile öffnest.

Website-Stil-Abschnitt

  • Erweitert – Produkte: Status-Badges
  • Klassisch – Produkte
Beschreibung Erweitert Klassisch
Badge ausblenden Stil: Keiner entf.
Badge-Stil festlegen Stil: Rechteck, Quadrat, Kreis, Keiner entf.
Farbe für Sale-Badge festlegen Verkauf: Farbe entf.
Farbe für Ausverkauft-Badge festlegen Ausverkauft: Farbe entf.
Badge-Schriftart festlegen Schriftart entf.
Padding hinzufügen oder entfernen Padding entf.
Badge-Position festlegen Position: Oben links, Oben mittig, Oben rechts, Mitte links, Mitte mittig, Mitte rechts, Unten links, Unten mittig, Unten rechts entf.
Badge mit dem Produktbild überlappen Einrückung: Schwebend, Bündig, Vertikal andocken, Horizontal andocken entf.
Badge-Größe ändern Einrückung: Größe entf.
Farbe Sale-Preise Die Farbe des Sale-Preisesim Abschnitt Produkte: Details verwenden entf.
Farbe Status-Badge Kann nur schwarz oder weiß sein, basierend auf der Badge-Hintergrundfarbe entf.
Farbe des Labels für begrenzte Verfügbarkeit Farbe des Labels für begrenzte Verfügbarkeit Farbe des Labels für begrenzte Verfügbarkeit
Schriftart des Labels für begrenzte Verfügbarkeit Schriftart des Labels für begrenzte Verfügbarkeit Schriftart des Labels für begrenzte Verfügbarkeit

Bild-Zoom, Schnellansicht und Mouseover-Effekte

Ein alternatives Produktbild wird immer bei Mouseover auf Shop-Seiten angezeigt, wenn es für ein Produkt mehr als ein Bild gibt. Produktdetails werden immer unterhalb des Produktbildes angezeigt. Du kannst die Schnellansicht in den Seiten- oder Blockeinstellungen aktivieren. Die Hintergrundfarbe der Lightbox-Schnellansicht folgt der Farbe des Shop-Abschnitts.

Der Bild-Zoom ist auf Shop-Seiten nicht verfügbar. Du kannst aber Lightboxen und den Bild-Zoom mit Klick und Mouseover über die Produktdetailseite aktivieren. Aktiviere diese Effekte im Produktartikel-Menü:

  • Lightbox – Öffnet das Bild bei Klick in einem Lightbox-Fenster.
  • Zoom – Vergrößert Bilddetails bei Klick oder Mouseover.

Verwende die folgende Tabelle, um die Stiloptionen für diese Template-Gruppen zu finden:

  • Erweitert – Brine, Farro, Skye, Tremont, York
  • Klassisch – Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley
  • Galapagos unterstützt die Overlay-Optionen für alternative Bild- und Produktinformationen.
  • Supply unterstützt einzigartige Produkt-Info-Overlay-Optionen.

Mouseover-Effekte

Um die Anpassung der Mouseover-Darstellung für Artikel auf erweiterten Shop-Seiten anzuzeigen, gehe zum Abschnitt Produkt: Details und wähle Position: Unter aus.

Website-Stil-Abschnitt

  • Erweitert – Produkte: Layout
  • Klassisch – Produkte
Beschreibung Erweitert Klassisch
Mouseover-Aktion festlegen

Verhalten des Elements bei Mouseover (wird angezeigt, wenn die Position Produkt: Details auf Unter festgelegt ist)

entf.
Das zweite Bild im Produkteditor anzeigen, das bei Mouseover angezeigt wird Verhalten des Elements bei Mouseover: Alternatives Bild anzeigen entf.
Blendet sichtbare Produktdetails bei Mouseover ein

Verhalten des Elements bei Mouseover: Einblenden

entf.
Kein Mouseover-Effekt

Wähle im Abschnitt Produkt: Details die Option Position: Unter und im Abschnitt Produkt: Layout die Option Verhalten des Elements bei Mouseover: Keines aus

Produktlisten-Titel: Unter
Produktdetails bei Mouseover anstelle eines alternativen Bildes oder einer Einblendung anzeigen

Wähle im Abschnitt Produkt: Details die Option Position: Overlay aus

Produktlisten-Titel: Overlay
Produkttitel unterhalb des Produktbildes anzeigen entf. Produktlisten-Titel: Unter
Overlay-Farbe bei Mouseover ändern entf. Produkt-Overlay-Farbe
Produktpreis bei Mouseover anzeigen oder ausblenden entf. Produktpreis anzeigen

Tipps für alternative Bilder:

  • Wenn das zweite Produktbild transparente Bereiche hat, wird das erste Bild in diesen Bereichen bei Mouseover sichtbar.

Bild-Zoom

Website-Stil-Abschnitt

  • Erweitert – Produktartikel
  • Klassisch – N/A
Beschreibung Erweitert Klassisch
Produkt-Schnellansicht aktivieren Mouseover-Aktion: Zoom entf.
Bild-Zoom-Faktor festlegen Bild-Zoomfaktor entf.

Tipps zum Bild-Zoom:

  • Bilder mit transparenten Hintergründen (.png) zeigen das Originalbild hinter der gezoomten Version an.

Schnellansicht

Nach der Aktivierung der Schnellansicht werden neue Abschnitte im Menü Website-Stile angezeigt. Die Stil-Einstellungen gelten für die gesamte Website, um ein einheitliches Erscheinungsbild zu erzeugen.

Besucher verwenden die Produkt-Schnellansicht, um die Artikeldetails in einer Lightbox anzuzeigen, ohne von der Shop-Seite weg zu navigieren. Diese Funktion ist nicht für klassische Shop-Seiten verfügbar, es werden aber Produktbilder in einer Lightbox auf den Produktdetailseiten dieser Templates geöffnet.

Website-Stil-Abschnitt

  • Erweitert – Produkte: Schnellansicht-Button
  • Klassisch – N/A
Beschreibung Erweitert Klassisch
Stil, Farbe, Schriftart, Padding, Position und Größe des Schnellansicht-Buttons anpassen Position entf.
Erscheinungsbild der Lightbox anpassen Produkte: Schnellansicht-Lightbox entf.
Produktbeschreibung anzeigen Auszugsanzeige: abschneiden entf.
Der Shop-Seite hinter der Lightbox einen Farbfilter hinzufügen Overlay-Farbe entf.
Navigations- und Schließen-Buttons, die außerhalb der Lightbox angezeigt werden, ändern Steuerung entf.
Titel-Schriftart für die Schnellansicht ändern Wähle im Abschnitt Produkte: Details die Option Titel-Schriftart aus entf.

Tipps für die Schnellansicht:

  • Wenn es bei deinem Schnellansichts-Text Formatierungsprobleme gibt, versuche, die Produktdetails stattdessen als Klartext hinzuzufügen.
  • Die Schnellansicht ist auf Mobilgeräten nicht verfügbar.
  • Der Text für den „Schnellansicht“-Button kann nicht angepasst werden.
  • Produktbilder werden in der Schnellansicht als abgeschnittenes Quadrat angezeigt.
  • Produktbeschreibungen werden in der Schnellansicht ohne spezielle Formatierung angezeigt, also ohne Kopfzeilen-Gestaltung, Fett- oder Kursivdruck oder Aufzählungslisten.

Schriftarten und Farben

Farben und Schriftarten auf der Shop-Seite und der Produktdetailseite folgen den Schriftart- und Farbanpassungen deiner gesamten Website. Du kannst auch die Farbe bestimmter Shop-Abschnitte im Abschnittsstil-Editor ändern. Produktdetailseiten folgen dem Farbdesign des Shop-Abschnitts.

  1. Klicke auf der Shop-Seite auf Design bearbeiten und öffne dann Website-Stile.
  2. Klicke auf Schriftarten.
  3. Wähle eine Schriftart aus und klicke auf , um die Schriftart auf bestimmte Bereiche deiner Website anzuwenden.

Verwende diese Anpassungen, um Schriftarten auf deinen Shop-Seiten und Produktdetailseiten zu ändern:

Bereich Shop-Seiten-Elemente
Überschriften Seitentitel, Titel des Abschnitts Ähnliche Produkte und Produkttitel
Absätze Produktbeschreibung, Preis und Seitennavigation
Schaltflächen Schaltflächen
Metadaten Verschiedene Stile wie Tags und Preise
Erweitert: Produkte: Liste Listentitel, Listenpreis, Listenstatus
Erweitert: Produktdetailseite Artikeltitel, Artikelpreis, Artikelbezeichnung, Variantenfelder

Verwende die folgende Tabelle, um die Stiloptionen für diese Template-Gruppen zu finden:

  • Erweitert – Brine, Farro, Skye, Tremont, York
  • Klassisch – Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley

Klassische Shop-Seiten

Der Text auf der klassischen Shop-Seite folgt denselben Stil-Anpassungen wie der Text auf dem Rest deiner Website. Um beispielsweise die Schriftart oder Farbe des Artikeltitels zu ändern, verwende die Anpassung Header oder Überschrift 1. Einige Elemente, wie etwa die Kategorie-Navigation, haben ihre eigenen Anpassungen für Schriftarten, die in dieser Anleitung basierend auf dem von dir gestalteten Element aufgeführt sind.

Drop-down-Menüs für Varianten sind eine Ausnahme, da sie auf allen klassischen Shop-Seiten dieselbe Schriftart verwenden. Diese Schriftart kann in Website-Stile nicht geändert werden.

Erweiterte Shop-Seiten

Schriftarten auf erweiterten Shop-Seiten folgen den Stil-Anpassungen auf dem Rest deiner Website, es gibt jedoch zusätzliche Schriftart-Anpassungen für bestimmte Elemente der Shop-Seite. Diese Anpassungen werden in dieser Anleitung basierend auf dem Element aufgeführt, das du gestaltest.

Mobilgerät

Produktartikel und -informationen werden auf Smartphones, Tablets und in schmalen Browsern vertikal gestapelt.

  • Schnellansicht und Bild-Zoom sind auf Mobilgeräten derzeit nicht verfügbar.
  • Titel und Preise werden immer unter den Produktbildern auf den Shop-Seiten angezeigt.
  • Overlay-Farbe, alternative Bilder und Einblend-Effekte werden nicht angezeigt.
  • Wenn die Kategorie-Navigation nicht in eine Zeile passt, wird sie als horizontale Bildlaufliste angezeigt, durch die Besucher scrollen können.

Auf Version 7.1:

  • Bilder auf der Produktdetailseite werden immer in einer Slideshow angezeigt, durch die Kunden wischen können. Vorschaubilder werden nicht unter der Slideshow angezeigt.
  • Die Kategorie-Navigation wird horizontal angezeigt, damit Käufer durchscrollen können.
  • Produkte werden in einer einzigen Spalte angezeigt.
  • Die Brotkrümel-Navigation wird nicht angezeigt.

Auf Version 7.0:

  • Erweiterte Shop-Seiten haben einzigartige Mobilgerät-Farben für Produkttitel, Preise und Sale-Preise.
  • Produkte werden in zwei oder mehreren Spalten angezeigt.

Besuche Version 7.0 Erweiterte Stile für Mobilgeräte, um mehr über die anderen Optionen für Mobilgeräte deines Templates zu erfahren. Version 7.1 hat keine separaten Stile für Mobilgeräte.

War dieser Beitrag hilfreich?
31 von 117 fanden dies hilfreich
Gestalten der Shop-Seiten