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 auf Abschnitt bearbeiten, um Layout- und Design-Optionen zu ändern. Jede Shop-Seite hat ihre eigenen Abschnitt-Stile.
• Produktdetailseiten – Öffne die Produktdetail-Seite, die du bearbeiten möchtest. Klicke auf Bearbeiten und dann im Abschnitt Produktdetails auf Abschnitt bearbeiten, um Layout- und Design-Optionen zu ändern. Diese Stil-Einstellungen gelten für alle Produktdetail-Seiten auf derselben Shop-Seite.

Klicke in Shop-Seiten sowie in Produktdetail-Seiten auf Bearbeiten und dann auf das Pinsel-Symbol, um Änderungen an Website-Stilen wie Schriftarten und Farben vorzunehmen. Einige Optionen in Website-Stilen sind spezifisch für diese Seiten, während andere deine gesamte Website betreffen.

So gestaltest du Shop-Seiten:

1. Öffne die Shop-Seite, die du bearbeiten möchtest.
2. Gehe zurück zum Website-Menü und klicke dort auf Design und dann auf Website-Stile.
3. Verwende die Anpassungen in den Produkt-Abschnitten, um den Stil der Landing-Page zu ändern.
4. Um spezifische Anpassungen einzelner Produktdetailseiten vorzunehmen, schließe Website-Stile, öffne ein Produkt und öffne Website-Stile dann erneut.

Tipps:

• Klicke 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.

Besucher deiner Shop-Seite finden alle ausgewählten Bilder deiner Produktartikel in einem Raster angeordnet. Die Shop-Seite zeigt bis zu 200 Produkte an. Wenn es mehr als 200 Produkte gibt, können Kunden auf Weiter klicken, um weitere Produkte anzuzeigen.

So gestaltest du den Shop-Seiten-Abschnitt:

1. Öffne die Shop-Seite, die du bearbeiten möchtest.
2. Klicke oben links auf Bearbeiten und dann im Shop-Abschnitt auf Abschnitt bearbeiten. Du kannst die Details unten anpassen. Änderungen gelten nur für diesen Shop-Abschnitt.

Im Tab Elemente kannst du Folgendes anpassen:

• Kategorie-Titel – Den Seitentitel oben im Abschnitt anzeigen.
• Brotkrümel – Den Navigationspfad der Besucher anzeigen, bevor sie ihre aktuelle Seite aufgerufen haben, mit Ausnahme ähnlicher Produkte und gefilterter Kategorie-Seiten.
• Filter – Füge Filter hinzu, damit Kunden deine Produkte nach Tags durchsuchen können.
• Preis – Blende den Preis im Vorschaubild des Produkts ein oder aus.
• Produktbeschreibung – Blende die Produktbeschreibung ein oder aus, wenn du das Listenlayout hast.
• Button „In den Warenkorb“ – Zeigt den Button „In den Warenkorb“ auf der Shop-Seite an, zusätzlich zu den Produktdetailseiten, wenn das Produkt eine oder keine Varianten hat. Wenn das Produkt mehr als eine Variante hat, wird auf der Shop-Seite der Button Optionen anzeigen angezeigt. Diese Option wird angezeigt, wenn du das Raster-Layout verwendest.

Auf dem Design-Tab kannst du Folgendes anpassen:

• Menü-Platzierung – Die Kategorie-Navigation oben im Abschnitt oder als Seitenleiste anzeigen. Es ist nicht möglich, die Kategorie-Navigation auszublenden.
• Ausrichtungstext für Kopfzeilen
• Layout – Zeige Produkt-Vorschaubilder in einem Raster oder einer Liste an. Im Listen-Layout kannst du eine Vorschau deiner Produktbeschreibungen anzeigen.
• Anzahl der Spalten im Raster-Layout (mindestens zwei)
• Spalten- und Zeilenabstände
• Textausrichtung
• Hintergrund – Blende einen Hintergrund ein oder aus, um dein Produkt-Vorschaubild zu umgeben, ähnlich wie bei einem Passepartout. Lege die Hintergrundfarbe fest, runde die Ecken und wähle den Typ, die Farbe und die Stärke des Strichs aus.
• Button-Gestaltung und -Ausrichtung
• Bild-Seitenverhältnis und Textabstände
• Ecken – Der Vorschaubild-Hintergrund und die Produktbilder können eckige oder abgerundete Ecken haben. Klicke auf die Ecke, die du abrunden möchtest, und gib eine Zahl ein. Je höher die Zahl, desto stärker die Abrundung.
• Abschnittsbreite und vertikales Padding. 
• Trennlinie – Zeige eine Trennlinie zwischen deinem Shop-Abschnitt und anderen Abschnitten auf der Seite an. Wähle die Form, den Typ, die Farbe und die Stärke der Trennlinie aus.

Im Tab Farben:

• Wähle ein Abschnittsdesign für deinen Shop-Abschnitt aus.
• Klicke auf das Bleistiftsymbol in einem Design, um es anzupassen. Beachte, dass dies alle Abschnitte betrifft, die das Design verwenden.

Shop-Seiten-Filter

Erstelle Produktfilter, damit deine Kunden die Produkte und Dienstleistungen finden, die für sie am interessantesten sind. Filter basieren auf Produkt-Tags, um eine Auswahl von Produkten auf deiner Shop-Seite anzuzeigen. Du kannst Filter zu Shop-Seiten hinzufügen, die 200 oder weniger Produkte enthalten. Der Filter wird oben auf deiner Shop-Seite angezeigt. Es ist nicht möglich, seine Position zu ändern. Der Filter-Button folgt deinen primären Button-Stilen.

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 finden alle ausgewählten Bilder 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.

So gestaltest du die Produktdetail-Seite:

1. Öffne die Produktdetailseite, die du bearbeiten möchtest.
2. Klicke oben links auf Bearbeiten und dann auf Abschnitt bearbeiten. Du kannst die Details unten anpassen. Alle Änderungen gelten für alle Produktdetailseiten auf derselben Shop-Seite.

Wähle im Tab Format aus den folgenden Layout-Optionen:

• Einfach – Das Produktbild und die Beschreibung werden nebeneinander angezeigt, umgeben von Leerraum.
• Umbruch – Die Produktbilder ordnen sich um die Beschreibung herum an. Bilder sind immer links ausgerichtet.
• Halb – Das Produktbild teilt die Seite mit der Beschreibung. Das Bild ist immer links ausgerichtet.
• Voll – Produktbilder werden in einem randlosen Karussell über der Beschreibung angezeigt.

Wenn du das einfache Layout auswählst, kannst du auch die folgenden Optionen anpassen: 

• Breite des Inhalts.
• Bilddesign – Wähle unter den Designs Slideshow, Gestapelt oder Karussell, wenn dein Produkt mehrere Bilder enthält. Wenn es sich bei dem Design um eine  Slideshow handelt, werden Vorschaubilder der anderen Produktbilder angezeigt.
• Varianten-Anzeige.
• Textausrichtung.
• Ausrichtung des Inhalts – Wähle zwischen Oben oder Mitte aus. Die Ausrichtung Oben kann ein Padding zwischen dem oberen Rand des Produktbildes und dem Text anzeigen. Die Ausrichtung des Inhalts ist nur für die Designs Slideshow und Karussell verfügbar, nicht für die Option Gestapelt. 
• Formular-Breite.
• Gestaltung der Produkt-Navigation.
• Position der Beschreibung – Wo die Produktbeschreibung angezeigt wird.
• Button „Zum Warenkorb hinzufügen“ – Die Inline-Option platziert den Button neben dem Mengenfeld.
• Galerie-Seitenverhältnis (nur Slideshow- und Karussell-Designs) – Beim Karussell-Design legt das Seitenverhältnis die Proportionen des Bild-Containers fest, aber dein Bild wird möglicherweise nicht zum Ausfüllen des Bild-Containers zugeschnitten. Wir empfehlen, Bilder mit demselben Seitenverhältnis hinzuzufügen, das du in deinen Einstellungen gewählt hast.
• Galerie-Platzierung.
• Platzierung von Vorschaubildern für Galerien – Positioniert die ausgewählten Bilder von Produkten, wenn das Design Slideshow festgelegt ist.
• Breite der Galerie.
• Bildabstände.
• Karussell-Pfeilgröße (nur Slideshow und Karussell-Design).
• Klick-Aktion – Wähle je nach Design aus Keine, Zoom oder Lightbox.
• Mouseover-Aktion (nur Designs Slideshow und Gestapelt) – Wähle zwischen Keine oder Zoom.
• Bild-Zoomfaktor.

Im Tab Farben:

• Wähle ein Abschnittsdesign für deinen Shop-Abschnitt aus.
• Klicke auf das Bleistiftsymbol in einem Design, um es anzupassen. Beachte, dass dies alle Abschnitte betrifft, die das Design verwenden.

Varianten-Anzeige

Im einfachen Layout kannst du Varianten als Buttons oder in einem Drop-down-Menü anzeigen. Alle anderen Layouts zeigen Varianten in Drop-down-Menüs an.

Varianten-Buttons folgen den Stil-Anpassungen für sekundäre Buttons deiner Website. Das Varianten-Drop-down-Menü folgt der Schriftfamilie Variantenfelder und seine Farbe hängt vom Farbschema des Abschnitts ab.

Beachte, dass die Option zur Anmeldung für die Produkt-Warteliste nur dann angezeigt wird, wenn Varianten in Drop-down-Menüs angezeigt werden.

„In den Warenkorb“- und „Kasse“-Buttons

Der Button In den Warenkorb kann unter den Produkt-Vorschaubildern auf der Shop-Seite und auf einzelnen Produktdetail-Seiten angezeigt werden.

Um das Erscheinungsbild deiner Produktdetailseiten beizubehalten, wirken sich horizontale Padding-Anpassungen nicht auf die Buttons „In den Warenkorb“ aus. Wenn ein Produkt ausverkauft ist, erscheint der Button In den Warenkorb verdunkelt.

Auf Shop-Seiten folgen die Farben der Buttons deinem Produkttext und den Hintergrundfarben. Der Button Zum Warenkorb hinzufügen auf den Produktdetail-Seiten und der Button Kasse auf der Warenkorb-Seite folgen beide deinen Stil-Anpassungen für primäre Buttons und den Farbeinstellungen deiner Website. Denke daran, dass die Stil-Optionen der Buttons für die meisten Buttons auf deiner Website gelten, um ein einheitliches Erscheinungsbild zu gewährleisten.

Diese Buttons leiten Kunden immer zu deiner Warenkorb- und Kassen-Seite von Squarespace weiter. Es ist nicht möglich, diese Buttons zu verwenden, um auf externe Websites zu verlinken.

Farben des Mini-Warenkorbs verwalten

Auf Websites der Version 7.1 verwendet der Mini-Warenkorb deine Abschnitts-Farbschemata, um sicherzustellen, dass er sichtbar ist. Die Farbe des Mini-Warenkorbs kontrastiert automatisch mit dem Hintergrund deines Abschnitts:

• Helle Hintergründe: Der Mini-Warenkorb wird in einem dunklen Design angezeigt.
• Dunkle Hintergründe: Der Mini-Warenkorb wird in einem hellen Design angezeigt.

Um die Farbe des Mini-Warenkorbs zu ändern, ändere die Hintergrundfarbe des Abschnitts oder bearbeite die Farbpaletten deiner Website .

Den Button „In den Warenkorb“ ausblenden

Es ist nicht möglich, den Button In den Warenkorb in Version 7.1 auszublenden, ohne benutzerdefinierten Code zu verwenden. Über dieses Thema wurde im Squarespace Forum diskutiert, es fällt jedoch nicht in den Zuständigkeitsbereich unseres Supports. Um deine Produkte ohne Kaufoption zu bewerben, kannst du sie auf deiner Website mithilfe einer Layout-Seite mit Bild - und Text-Blöcken anzeigen. 

Das Mengenfeld 

Das Mengenfeld wird auf der Produktdetailseite angezeigt, wenn:
Der Lagerbestand des Produkts größer als eins ist
Varianten vorhanden sind, unabhängig vom Lagerbestand der einzelnen Variante
Um den aktuellen Lagerbestand für jede Variante auf der Produktdetailseite anzuzeigen, aktiviere Labels für begrenztes Inventar. Dadurch wird verhindert, dass Kunden versuchen, mehr als ein Produkt in ihren Warenkorb zu legen, wenn der Lagerbestand 1 beträgt. Es ist nicht möglich, die Größe des Mengenfelds zu ändern. Du kannst das Mengenfeld für Dienstleistungen in deinen Kassen-Einstellungen ausblenden. Es ist nicht möglich, das Mengenfeld für andere Produkttypen auszublenden, ohne benutzerdefinierten Code zu verwenden. Über dieses Thema wurde im Squarespace Forum diskutiert. 

Ähnliche Produkte 

Der Abschnitt „Ähnliche Produkte“ auf den Produktdetail-Seiten folgt den Anpassungen in den Shop-Abschnittsstilen und deinen Schriftartanpassungen für die gesamte Website. Um von einer Produktdetail-Seite auf die Shop-Abschnittsstile zuzugreifen, kehre zur Shop-Seite zurück und klicke oben links auf Bearbeiten. Wenn du Produktabonnements verkaufst, kannst du die Farben ändern, die im Abschnitt Abonnementhäufigkeit der Produktdetailseite angezeigt werden. Öffne die Farbpalette deiner Website und ändere die Farben unter Produktdetailseite: Abonnements.  

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.
Leerraum 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 der Varianten-Anzeige ä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

Das Symbol wird standardmäßig als Warenkorb im Website-Header angezeigt. Wenn du das Warenkorb-Symbol ausblendest, wird es unten auf der Seite angezeigt, wenn Kunden Artikel in ihren Warenkorb legen. 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, lies unsere Tipps zur Fehlerbehebung. Um zu erfahren, wie du das Warenkorb-Symbol deines Templates gestalten kannst, besuche Warenkorb-Symbol anzeigen.

Die Kategorie-Navigation kann oben auf deiner Shop-Seite oder in einer Seitenleiste angezeigt werden. Auf Mobilgeräten wird die Kategorie-Navigation immer oben angezeigt.

Die Schriftart für die Kategorie-Navigation folgt dem Absatz-Stil. Die Farbe folgt der Anpassung Kategorie-Navigation unter Produkte: Einfaches Raster in Website-Stile.

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. Je nach Position werden Unterkategorien in einem verschachtelten Menü angezeigt.

• 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. Mehr dazu erfährst du unter Produkte organisieren.

Die Kategorie-Navigation wird alphabetisch angezeigt. 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. 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)

• 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-Preises im 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

Ein alternatives Produktbild wird bei Mouseover auf Shop-Seiten angezeigt, wenn es für ein Produkt mehr als ein Bild gibt und keine Variante ausgewählt ist. Produktdetails werden immer unterhalb des Produktbildes angezeigt. Du kannst die Schnellansicht in den Seiten- oder Blockeinstellungen aktivieren. Die Hintergrundfarbe der Schnellansicht-Lightbox 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 auf der 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 – Produkte: Bild-Zoom
• Klassisch – N/A

Beschreibung	Erweitert	Klassisch
Bild-Zoom aktivieren oder deaktivieren	Bild-Zoom aktivieren	entf.
Bild-Zoom-Faktor festlegen	Bild-Zoomfaktor	entf.
Bild-Zoom so einstellen, dass er beim Klicken oder Mouseover aktiviert wird	Zoom aktiviert bei	entf.
Produktbilder so einstellen, dass sie in einer Lightbox geöffnet werden	Lightbox aktivieren. Wenn die Einstellung „Lightbox aktivieren“ nicht angezeigt wird, aktiviere den Bild-Zoom und lege den Zoom so fest, dass er beim Mouseover aktiviert wird. Dadurch sollte die Einstellung Lightbox aktivieren angezeigt werden. Du kannst den Bild-Zoom deaktivieren, nachdem du die Lightbox aktiviert hast. Um sowohl den Bild-Zoom als auch die Lightbox zu aktivieren, muss der Bild-Zoom so eingestellt sein, dass er beim Mouseover aktiviert wird.	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.

 

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 Farbschema 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.