Mit Produktgalerien kannst du deine angebotenen Produkte perfekt präsentieren. Du kannst jeder beliebigen Seite deiner Website eine Galerie hinzufügen und entscheiden, was du präsentieren möchtest – alle Produkte oder nur eine bestimmte Kategorie.
Wähle zwischen einer Gittergalerie (eine Galerie mit mehreren Zeilen) oder einer Slidergalerie, durch die Kunden scrollen können.
Eine Gittergalerie anpassen
Passe deine Gittergalerien an, um das richtige Design für deinen Shop zu erhalten.
Um eine Gittergalerie anzupassen:
- Öffne die Seite mit der Galerie, die du anpassen möchtest, in deinem Editor.
- Klicke auf die Gittergalerie.
- Klicke auf Einstellungen oder auf das Symbol für Einstellungen
. - Wähle aus, welche Einstellungen du anpassen möchtest:
Auswählen, welche Produkte angezeigt werden
Klicke auf den Tab Kategorie, um die Produktkategorie auszuwählen, die du anzeigen möchtest.
Tipp: Standardmäßig zeigt jede Galerie die Kategorie „Alle Produkte“ an.
Die anzuzeigenden Elemente festlegen
Klicke auf den Tab Anzeige und aktiviere oder deaktiviere die Kontrollkästchen, um Galerieelemente wie Filter, Banner oder Produktoptionen ein- oder auszublenden.
Tipp: Wenn du Produktoptionen anzeigst, werden nur 2 angezeigt. Wenn dein Produkt beispielsweise Optionen für Farbe, Größe und Form hat, werden nur die beiden angezeigt, die du als Erstes erstellt hast.
Tipp: Nachdem Kunden auf den „In den Warenkorb“-Button geklickt haben (falls aktiviert), kannst du sie entweder zu einem Fenster mit einer Schnellansicht oder zu einem Einschub weiterleiten, wo sie alle erforderlichen Optionen auswählen können. Mehr erfahren über das
Anpassen des Verhaltens des „In den Warenkorb“-Buttons.
Deine Einstellungen wählen
Klicke auf den Tab Einstellungen und passe die verfügbaren Optionen an.
- Produktoptionen: Wähle aus, welche Produktoptionen angezeigt werden.
Tipp: Das ist relevant, wenn du Produktoptionen aktiviert hast und einige Produkte mehrere Optionen haben, wie zum Beispiel Farbe, Größe und Form. - Scroll-Verhalten:
- Wähle aus, was passiert, wenn Kunden zum unteren Rand der Seite scrollen. Mehr erfahren
- Aktiviere den Schieberegler Sticky-Seitenleiste, damit Filter beim Scrollen sichtbar bleiben. Falls aktiviert, kannst du den Abstand der Seitenleiste zum oberen Rand anpassen.
- Produktbild-Effekte: Lege fest, was passiert, wenn Kunden mit der Maus über ein Produkt fahren.
Klicke auf den Tab Layout und passe die Galerie mit den folgenden Optionen an:
Tipp: Die Optionen variieren je nach aktivierten Elementen.
- Allgemein: Klicke auf den Schieberegler, um die Galerie auf gesamte Browserbreite zu strecken. Falls aktiviert, lege die Größe der Ränder fest (nur für den Wix Editor relevant, nicht für den Studio- oder Harmony Editor).
Hinweis: Falls aktiviert, solltest du unter Rasterverhalten die Option Responsiv auswählen. - Produktraster:
Tipp: Mit der Einstellung „Fest“ für das Rasterverhalten bleiben die Einstellungen unabhängig von der Bildschirmgröße deiner Besucher gleich. Bei „Responsiv“ passt sich die Anzahl der Zeilen und Spalten an die Bildschirmgröße an. Diese Einstellung funktioniert aber nur, wenn die Galerie auf Bildschirmbreite gestreckt wird. - Produktbilder: Wähle aus, wie die Bilder angezeigt werden. Mehr erfahren über das Anzeigen von Bildern.
- „In den Warenkorb“-Button: Wähle aus, wo der Button platziert wird.
Hinweis: Wenn du den Button auf dem Bild platzierst, wird der Schnellansicht-Button nicht angezeigt. - Schnellaktionsleiste: Richte den Schnell-Hinzufügen-Einschub aus und passe den Abstand an.
- Produktinfo: Wähle eine Option für ein Produktkartenlayout und passe sie an.
- Produktoptionen: Klicke auf die Schieberegler, um nur Farboptionen anzuzeigen oder die Farboptionen zu beschränken, und wähle aus, wie die Textauswahl angezeigt wird.
- Menge: Lege die Breite der Mengenauswahl für Produkte fest.
- Banner: Wähle aus, wo das Banner angezeigt wird, und passe den Abstand an.
Klicke auf den Tab Design und passe die Galerie mit den folgenden Optionen an:
Tipp: Die Optionen variieren je nach aktivierten Elementen.
- Allgemein: Wähle den Hintergrund aus, der hinter den Produktkarten angezeigt wird.
- Filter & Sortierung: Wenn du Filter oder Sortierung aktiviert hast, passe den Hintergrund und den Text an.
- Produktkarten: Füge einen Kartenhintergrund und einen Rand hinzu und passe den Eckenradius des Bildes an.
- Produktinfo: Passe den Galerietext an.
- Produktoptionen: Passe an, wie Farbe und Text von Produktoptionen angezeigt werden.
- Menge: Passe das Design der Mengenauswahl für Produkte an.
- Banner: Wähle eine Form, Farbe und Schriftart.
- Name & Trennlinie: Passe die Trennlinie zwischen dem Produktnamen und dem Preis an.
- „Schnellansicht“-Button: Wenn die Schnellansicht aktiviert ist, kannst du den Button gestalten.
Tipp: Um die Schnellansicht selbst anzupassen, öffne den Tab Schnellansicht. - „In den Warenkorb“-Button: Wähle ein Design für jede Ansicht aus – Standard, Mouseover und deaktiviert (z. B. nicht verfügbar).
- Schnell-Hinzufügen-Einschub: Passe das Design des Schnell-Hinzufügen-Einschubs an.
- „Mehr laden“-/„Vorherige“-Buttons oder Seitennummerierung: Passe den „Mehr laden“-Button oder die Seitennummerierung an.
Klicke auf den Tab Text und passe den Text an, der in deiner Gittergalerie angezeigt wird.
Das Verhalten des „In den Warenkorb“-Buttons anpassen
Falls noch nicht aktiviert, klicke auf „In den Warenkorb“-Button anzeigen, um den Button in deiner Galerie anzuzeigen.
Wähle aus, wohin Kunden geleitet werden, nachdem sie auf den Button geklickt haben:
- Erfolgs-Pop-up anzeigen: Eine Pop-up-Benachrichtigung wird angezeigt.
- Sidebar-Warenkorb öffnen: Der Sidebar-Warenkorb wird am Bildschirmrand geöffnet.
- Zur Warenkorbseite leiten: Kunden werden direkt zur Warenkorb-Seite geleitet.
- Auf aktueller Seite bleiben : Kunden bleiben auf derselben Seite. Auf dem Button wird ein Häkchen angezeigt, um darzustellen, dass das Produkt erfolgreich hinzugefügt wurde.
Klicke auf den Tab
Sortierung, um Sortierungen zu aktivieren und anzupassen. Ermögliche Kunden, deine Produkte nach Preis, Name oder nach Kategorie zu sortieren. Erfahre, wie du
Sortieroptionen hinzufügen und einrichten kannst.
„Schnellansicht“ aktivieren und anpassen
Die Schnellansicht ermöglicht es Kunden, Produktdetails in einem Pop-up zu sehen, ohne deine Shop-Seite zu verlassen.
Hinweis:
- Wenn du den „In den Warenkorb“-Button auf dem Bild platziert hast, wird der Schnellansicht-Button nicht angezeigt.
- Um den Schnellansicht-Button in Aktion zu sehen, öffne deine Website in der Vorschau oder schau dir deine Live-Website an.
Um die Schnellansicht zu aktivieren oder zu deaktivieren:
- Klicke auf Anzeige.
- Aktiviere oder deaktiviere das Kontrollkästchen neben dem Schnellansicht-Button.
Nächste Schritte:
Eine Slidergalerie anpassen
Passe deine Sliderproduktgalerie an, um das perfekte Design zu erhalten. Du kannst den Text und das Design der Galerie personalisieren, auswählen, welche Elemente angezeigt werden sollen (z. B. ein „In den Warenkorb“-Button) und vieles mehr.
Eine Slidergalerie anpassen:
- Öffne die Seite mit der Galerie, die du anpassen möchtest, in deinem Editor.
- Klicke auf die Sliderproduktgalerie.
- Klicke auf Einstellungen oder auf das Symbol für Einstellungen .
- Wähle aus, was du tun möchtest:
Auswählen, welche Produkte angezeigt werden
Du kannst diese Galerie auf 3 Arten verwenden:
- Ausgewählte Produkte anzeigen:
Eine bestimmte Kategorie oder die Kategorie „Alle Produkte“ anzeigen.
Wenn du zum Beispiel deine Neuzugänge anzeigen möchtest, erstelle eine Kategorie „Neu eingetroffen“ und füge alle deine neuen Produkte hinzu. Wähle dann diese Kategorie im Dropdown-Menü aus. - Deine meistverkauften Produkte automatisch anzeigen:
Wähle diese Option, um deine meistverkauften Artikel automatisch anzeigen zu lassen. Wenn du noch nicht genug Verkäufe hattest, um zu berechnen, welche Produkte Bestseller sind, dann werden verwandte Produkte oder deine Kategorie „Alle Produkte“ angezeigt. - Ähnliche Produkte anzeigen:
Zeige basierend auf dem, was sich deinen Kunden ansehen, die Produkte an, die sie interessieren könnten. Du kannst die Art der Galerie auswählen, die du anzeigen möchtest.
- Aus ähnlichen Kategorien: Funktioniert am besten, wenn du sie zur Produktseite, zum Warenkorb oder zur Bestätigungsseite hinzufügst.
- Häufig zusammen gekauft: Funktioniert am besten, wenn du sie zur Produktseite hinzufügst.
- Häufig zusammen angesehen: Funktioniert am besten, wenn du sie zur Produktseite hinzufügst.
Welche Elemente möchtest du anzeigen?
Klicke auf den Tab Anzeige und aktiviere oder deaktiviere dann die Kontrollkästchen, um Galerieelemente ein- oder auszublenden.
Tipp: Wenn du Produktoptionen anzeigst, werden nur 2 angezeigt. Wenn dein Produkt beispielsweise Optionen für Farbe, Größe und Form hat, werden nur die beiden angezeigt, die du als Erstes erstellt hast.
Tipp: Nachdem Kunden auf den „In den Warenkorb“-Button geklickt haben (falls aktiviert), kannst du sie entweder zu einem Fenster mit einer Schnellansicht oder zu einem Einschub weiterleiten, wo sie alle erforderlichen Optionen auswählen können. Mehr erfahren über das
Anpassen des Verhaltens des „In den Warenkorb“-Buttons.
Klicke auf den Tab Einstellungen und passe die folgenden Optionen an:
- Produktoptionen: Wähle aus, welche Produktoptionen angezeigt werden.
Tipp: Das ist relevant, wenn du Produktoptionen aktiviert hast und einige Produkte mehrere Optionen haben, wie zum Beispiel Farbe, Größe und Form. - Sliderverhalten: Aktiviere die Endlosschleife, damit Kunden weiter durch Produkte scrollen können.
- Produktbild-Effekte: Lege fest, was passiert, wenn Kunden mit der Maus über ein Produkt fahren.
Klicke auf den Tab Layout und passe die Galerie mit den folgenden Optionen an:
- Allgemein: Klicke auf den Schieberegler, um die Galerie auf gesamte Browserbreite zu strecken. Falls aktiviert, lege die Größe der Ränder fest (nur für den Wix Editor relevant, nicht für den Studio- oder Harmony Editor).
Hinweis: Falls aktiviert, solltest du unter Rasterverhalten die Option Responsiv auswählen. - Galerietitel: Bearbeite die Titel-Ausrichtung.
- Produktraster:
Tipp: Mit der Einstellung „Fest“ für das Rasterverhalten bleiben die Einstellungen unabhängig von der Bildschirmgröße deiner Besucher gleich. Bei „Responsiv“ passt sich die Anzahl der Spalten an die Bildschirmgröße an. Diese Einstellung funktioniert aber nur, wenn die Galerie auf Bildschirmbreite gestreckt wird. - Produktbilder: Wähle aus, wie die Bilder angezeigt werden. Mehr erfahren über das Anzeigen von Bildern.
- „In den Warenkorb“-Button: Wähle aus, wo der Button platziert wird.
Hinweis: Wenn du den Button auf dem Bild platzierst, wird der Schnellansicht-Button nicht angezeigt. - Schnellaktionsleiste: Richte den Schnell-Hinzufügen-Einschub aus und passe den Abstand an.
- Produktinfos: Wähle ein Layout und eine Ausrichtung für die Produktinfos aus.
- Produktoptionen: Klicke auf die Schieberegler, um nur Farboptionen anzuzeigen oder die Farboptionen einzuschränken, und wähle aus, wie die Textauswahl angezeigt wird.
- Menge: Lege die Breite der Mengenauswahl für Produkte fest.
- Banner: Wähle aus, wo das Banner angezeigt wird, und passe den Abstand an.
- Navigationspfeile: Passe die Platzierung der Pfeile an.
- Seitennummerierungspunkte: Wähle eine Ausrichtungsoption und passe den Abstand zur Galerie an.
Klicke auf den Tab Design und passe die Galerie mit den folgenden Optionen an:
Tipp: Die Optionen variieren je nachdem, welche Funktionen du in den Tabs Einstellungen und Schnellansicht aktiviert hast.
- Allgemein: Wähle eine Hintergrundfarbe für die Galerie, eine Titelschriftart und eine Farbe.
- Produktkarten: Wähle eine Hintergrundfarbe für die Produkte aus, füge einen Rand hinzu und passe den Galerietext an.
- Produktinfo: Passe die Schriftart der Produktinformationen an, die du anzeigst.
- Produktoptionen: Passe an, wie Farbe und Text von Produktoptionen angezeigt werden.
- Menge: Passe das Design der Mengenauswahl für Produkte an.
- Banner: Wähle eine Form, Farbe und Schriftart.
- Navigationspfeile: Passe das Design der Navigationspfeile an.
- Seitennummerierungspunkte: Passe die Farbe und Deckkraft der Seitennummerierungspunkte an.
- Name & Trennlinie: Passe die Trennlinie zwischen dem Produktnamen und dem Preis an.
- „Schnellansicht“-Button: Wenn die Schnellansicht aktiviert ist, kannst du den Button gestalten.
Tipp: Um die Schnellansicht selbst anzupassen, öffne den Tab Schnellansicht. - „In den Warenkorb“-Button: Wähle ein Design für jede Ansicht aus – Standard, Mouseover und deaktiviert (z. B. nicht verfügbar).
- Schnell-Hinzufügen-Einschub: Passe das Design des Schnell-Hinzufügen-Einschub an.
Klicke auf den Tab Text und passe den Text an, der in deiner Slidergalerie angezeigt wird.
Das Verhalten des „In den Warenkorb“-Buttons anpassen
Falls noch nicht aktiviert, klicke auf „In den Warenkorb“-Button anzeigen, um den Button in deiner Galerie anzuzeigen.
Wähle aus, wohin Kunden geleitet werden, nachdem sie auf den Button geklickt haben:
- Erfolgs-Pop-up anzeigen: Eine Pop-up-Benachrichtigung wird angezeigt.
- Sidebar-Warenkorb öffnen: Der Sidebar-Warenkorb wird am Bildschirmrand geöffnet.
- Zur Warenkorbseite leiten: Kunden werden direkt zur Warenkorb-Seite geleitet.
- Auf aktueller Seite bleiben : Kunden bleiben auf derselben Seite. Auf dem Button wird ein Häkchen angezeigt, um darzustellen, dass das Produkt erfolgreich hinzugefügt wurde.
„Schnellansicht“ aktivieren und anpassen
Die Schnellansicht ermöglicht es Kunden, Produktdetails in einem Pop-up zu sehen, ohne deine Shop-Seite zu verlassen.
Hinweis:
- Wenn du den „In den Warenkorb“-Button auf dem Bild platziert hast, wird der Schnellansicht-Button nicht angezeigt.
- Um den „Schnellansicht“-Button in Aktion zu sehen, öffne deine Website in der Vorschau oder schau dir deine Live-Website an.
Um die Schnellansicht zu aktivieren oder zu deaktivieren:
- Klicke auf den Tab Anzeige.
- Aktiviere oder deaktiviere das Kontrollkästchen neben dem Schnellansicht-Button.
Nächste Schritte:
- Um den Schnellansicht-Button anzupassen, öffne den Tab Design.
- Um das Schnellansicht-Pop-up anzupassen, öffne den Tab Schnellansicht. Mehr erfahren.
Eine Galerie auf dem Mobilgerät anpassen
Achte darauf, dass deine Galerien auch auf Mobilgeräten gut aussehen. Du kannst das Design an kleinere Bildschirme anpassen und Kunden ermöglichen, schnell Produkte in den Warenkorb zu legen, ohne die Galerie verlassen zu müssen.
- Öffne deinen Editor.
- Klicke oben im Editor auf das Symbol für Zu Mobile wechseln
. - Öffne die Seite mit der Gittergalerie oder Slidergalerie, die du anpassen möchtest.
- Klicke auf die Galerie.
- Klicke auf Einstellungen.
- Passe die Galerie mit den verfügbaren Optionen an.
