Passe die Shop-Seiten und Produktdetail-Seiten deiner Website an.
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.
Weitere Informationen zu Stil-Änderungen für die Barrierefreiheit findest du unter Eine barrierefreie E-Commerce-Website erstellen.
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 Pinselsymbol. Um mehr über das Öffnen von Shop-Abschnittsstilen zu erfahren, besuche Sammlungs-Seiten-Abschnitte.
- 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:
- Öffne die Shop-Seite, die du bearbeiten möchtest.
- Gehe zurück zum Website-Menü und klicke dort auf Design und dann auf Website-Stile.
- Verwende die Anpassungen in den Produktbereichen, um den Stil der Landing-Page zu ändern.
- 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 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.
In den Shop-Abschnittsstilen kannst du die Details unten anpassen. Beachte, dass deine Änderungen für alle Shop-Seiten auf deiner Website gelten.
Format:
- Bildbreite
- Spaltenabstand
- Zeilenabstand
- Anzahl der Spalten (mindestens zwei)
- Seitenverhältnis von Bildern
- Textausrichtung
- Bildtext-Abstände
- Button „Zum Warenkorb hinzufügen“ – Zeigt den Button „Zum Warenkorb hinzufügen“ auf der Shop-Seite an, zusätzlich zu den Produktdetailseiten, wenn das Produkt eine oder keine Variante hat. Wenn das Produkt mehr als eine Variante hat, wird auf der Shop-Seite der Button Optionen Anzeigen angezeigt.
- „Zum Warenkorb hinzugefügt“ – Diese Pop-up-Bestätigung wird angezeigt, nachdem ein Kunde etwas zu seinem Warenkorb hinzugefügt hat. Die Textanzeige richtet sich nach der Hintergrundfarbe des Abschnitts.
- 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:
- Lege die Farben deiner Website fest oder kreiere einen einzigartigen Look für deinen Shop-Bereich, indem du ein anderes Abschnittsdesign auswählst.
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. |
Produktdetails-Seite
Die angezeigten Bilder sind die Produktbilder. So gestaltest du die Produktdetailseite:
- Öffne die Produktdetailseite, die du bearbeiten möchtest.
- 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 Pinselsymbol klicken musst.
Wähle 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:
- Varianten-Anzeige
- Bildbreite
- Seitenverhältnis von Bildern (nur Slideshow- und Karussell-Design).
- 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.
- Textausrichtung
- 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.
- 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. Die Ausrichtung des Inhalts ist nur für die Designs Slideshow und Karussell verfügbar, nicht für die Option Gestapelt.
- Design (Slideshow, Gestapelt, Karussell) – Wenn es sich bei dem Design um eine Slideshow handelt, werden Vorschaubilder der anderen Produktbilder angezeigt.
- Galerie-Platzierung
- Platzierung von Vorschaubildern für Galerien – Positioniert die ausgewählten Bilder von Produkten, wenn das Design Slideshow festgelegt ist.
- Formular-Breite
- Größe und Farbe des Karussell-Pfeils
- Klicke auf Aktion (Zoom oder Lightbox)
- Mouseover-Aktion (Zoom oder keine)
- Bild-Zoomfaktor
Abonnementfrequenz
Wenn du Produktabonnements verkaufst, kannst du die Farben ändern, die im Abschnitt Abonnementhäufigkeit der Produktdetailseite angezeigt werden. Öffne das Farbschema deiner Website und ändere die Farben auf der Produktdetailseite: Abonnements.
Ä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.
„Zum Warenkorb hinzufügen“- und „Kasse“-Buttons
Der Button Zum Warenkorb hinzufügen kann unter den Produkt-Vorschaubildern auf der Shop-Seite und auf einzelnen Produktdetail-Seiten angezeigt werden. 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.
Damit das Erscheinungsbild deiner Produktdetail-Seiten erhalten bleibt, haben Anpassungen für das horizontale Padding keine Auswirkungen auf die Buttons Zum Warenkorb hinzufügen. In Version 7.1 ist es nicht möglich, den Button Zum Warenkorb hinzufügen auszublenden. Wenn ein Produkt ausverkauft ist, wird der Button Zum Warenkorb hinzufügen verdunkelt angezeigt.
Varianten-Anzeige
Im einfachen Layout kannst du Varianten als Buttons oder in einem Drop-down-Menü anzeigen. Varianten-Buttons folgen den Stil-Anpassungen für sekundäre Buttons deiner Website. Alle anderen Layouts zeigen Varianten in Drop-down-Menüs an. Die Farbe des Drop-down-Menüs für Varianten ändert sich je nach Farbschema des Abschnitts. Sie folgt der Schriftfamilie der Variantenfelder. Beachte, dass die Option zur Anmeldung für die Produkt-Warteliste nur dann angezeigt wird, wenn Varianten in Drop-down-Menüs angezeigt werden.
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 Inventat. Dies verhindert, dass Kunden versuchen, mehr als ein Produkt in ihren Warenkorb zu legen, wenn der Lagerbestand eins beträgt. Es ist nicht möglich, die Größe des Mengenfelds zu ändern.
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 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 |
Warenkorb
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 Anzeige des Warenkorb-Symbols.
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. Beachte, dass die Kategorie-Navigation auf Mobilgeräten immer oben angezeigt wird.
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.
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 – 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. |
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.
- Klicke auf der Shop-Seite auf Design bearbeiten und öffne dann Website-Stile.
- Klicke auf Schriftarten.
- 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.
- Der Button „Zum Warenkorb hinzufügen“ wird vor der Beschreibung auf Produkt-Seiten mit den Layouts Voll und Einfach angezeigt.
- Die Kategorie-Navigation wird horizontal angezeigt, damit Käufer durchscrollen können.
- Produkte werden in einer oder zwei Spalten angezeigt. Klicke in der mobilen Ansicht auf Bearbeiten und dann auf Abschnitt bearbeiten. Klicke auf das Symbol + oder -, um die Anzahl der angezeigten Spalten zu ändern.
- Auf Mobilgeräten wird die Brotkrümelnavigation angezeigt, wenn Besucher auf die Kategorie-Tags auf einer Shop-Landing-Page klicken. Die Brotkrümelnavigation wird nicht angezeigt, wenn Besucher direkt auf einer Shop-Seite auf ein Produkt klicken.
- Bilder auf Produktdetail-Seiten werden unabhängig vom Layout mit einem Seitenverhältnis von 1:1 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.