Mit Produktgalerien kannst du die von dir angebotenen Produkte 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 nach Belieben zwischen einer der folgenden Gittergalerien oder einer Slider-Galerie:
In diesem Artikel erfährst du mehr über folgende Themen:
Eine Kategorie in einer Gittergalerie anzeigen
Gittergalerien bieten eine großartige Möglichkeit, eine große Anzahl von Produkten zu präsentieren. Die Produkte werden in einem Gitter mit mehreren Spalten und Reihen angezeigt.
Um eine Gittergalerie hinzuzufügen und eine Kategorie auszuwählen:
- Öffne die Seite, zu der du eine Galerie hinzufügen möchtest.
- Öffne das Panel „Elemente hinzufügen“ in deinem Editor:
- Wix Editor: Klicke auf der linken Seite des Editors auf Elemente hinzufügen
. - Editor X: Klicke oben im Editor X auf Elemente hinzufügen
.
- Klicke auf Online-Shop.
- Klicke auf Gitterproduktgalerie.
- Ziehe die Gittergalerie an die entsprechende Stelle auf der Seite deiner Website.
- Klicke im Editor auf die Galerie.
- Klicke auf Kategorie wählen.
- Wähle eine Option:
- Um alle Produkte anzuzeigen: Stelle sicher, dass die Kategorie Alle Produkte ausgewählt ist.
- Um eine Kategorie anzuzeigen: Klicke, um eine Kategorie auszuwählen.
Eine Gittergalerie anpassen
Die Galerie ist der erste Teil deines Shops, den Kunden sehen. Passe sie an, um einen guten Eindruck zu hinterlassen.
Um eine Gittergalerie anzupassen:
- Öffne im Editor die Seite mit der Galerie, die du anpassen möchtest.
- Klicke auf die Produktgalerie.
- Klicke auf das Symbol für Einstellungen
. - Was möchtest du machen?
Klicke auf den Tab Layout und passe die Galerie mit den folgenden Optionen an:
- Volle Bildschirmbreite: Klicke auf den Schalter, um die Galerie über den Browser zu strecken. Falls aktiviert, lege die Größe der Galerieränder fest. Wenn du die Funktion „Volle Bildschirmbreite“ aktiviert hast, empfehlen wir dir, im Abschnitt Galerie-Layout unter Rasterverhalten die Option Responsiv auszuwählen.
- Galerie-Layout: Wähle einen Anzeigestil und dann die Textausrichtung, die Anzahl der Spalten und Zeilen und den Abstand.
- Bildlayout: Wähle aus, wie die hochgeladenen Bilder angezeigt werden. Mehr erfahren
- Banner-Layout: Wähle aus, wo das Banner angezeigt wird.
- Seitennavigation: Wähle einen Seitennavigationsstil und passe die Pfeile und die Ausrichtung an.
Hinweis: Diese Option ist nur verfügbar, wenn du im Tab Einstellungen die Option „Seitennavigation“ auswählst.
Klicke auf den Tab Einstellungen und passe die folgenden Optionen an:
- Bei Mouseover: Lege fest, was passiert, wenn ein Kunde mit der Maus über ein Produkt fährt.
- Was wird angezeigt?: Blende Galerieelemente ein oder aus.
- Mehr Produkte anzeigen: Wähle aus, was passiert, wenn Kunden zum Ende der Seite scrollen. Mehr erfahren
Hinweis: Auf Mobilgeräten wird der „Mehr laden“-Button immer nach 10 Produkten angezeigt. - „In den Warenkorb“-Button: Zeige den Button an, damit Kunden Produkte in den Warenkorb legen können, ohne die Produktseite aufrufen zu müssen. Ist diese Funktion ausgewählt, kannst du den Button anpassen:
- Nur bei Mouseover: Wähle aus, dass der Button nur angezeigt wird, wenn der Kunde mit der Maus darüber fährt.
- Beim Anklicken des Buttons: Wähle aus, wohin Kunden geleitet werden, nachdem sie auf den „In den Warenkorb“-Button geklickt haben.
- Anzahlanzeige: Wähle diese Option, damit Kunden 2 oder mehr Produkte in den Warenkorb legen können.
- Produktoptionen anzeigen: Aktiviere den Schalter, um Produktoptionen wie Farbe oder Größe anzuzeigen.
Klicke auf den Tab Text und passe die folgenden Optionen an:
- „In den Warenkorb“-Buttontext: Verfügbar, wenn der „In den Warenkorb“-Button aktiviert ist.
- „Nicht verfügbar“-Nachricht: Diese Nachricht wird angezeigt, wenn der Produktbestand Null ist.
- Mehr Produkte: Diese Option ist verfügbar, wenn du festgelegt hast, dass der Mehr anzeigen-Button angezeigt wird, wenn Kunden bis zum Ende der Seite scrollen
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 und passe die Filter- und Sortierdesigns an.
- „Mehr laden”-Button/Seitennavigation: Passe die Option an, die du in den Einstellungen ausgewählt hast, „Mehr laden”-Button oder „Seitennavigation“.
- Produktanzeige: Wähle eine Hintergrundfarbe für die Produkte, füge einen Rand hinzu und passe den Galerietext an.
- „In den Warenkorb“-Button: Wähle ein Design für jede Ansicht aus — Standardeinstellung und Mouseover.
- Banner: Wähle die Form, Farbe und Schriftart des Banners aus. Mehr erfahren
- Produktoptionen & Anzahl: Passe beide Arten von Produktoptionen an: Farbe und Aufklappmenü.
- Name & Trennlinie: Passe die Trennlinie zwischen dem Produktnamen und dem Preis an.
- Schnellansicht-Button: Der Schnellansicht-Button wird über dem Bild angezeigt, wenn man mit der Maus darüber fährt. Um diesen anzusehen, zeige eine Vorschau deiner Website an.
Aktiviere Filter, um Kunden bei der Suche nach den gewünschten Produkten zu helfen.
So geht's
Sortieroptionen hinzufügen
Lass deine Kunden deine Produkte nach Preis, Name oder danach sortieren, wie neu sie sind.
So geht's
Die Schnellansicht anpassen
Die Schnellansicht ermöglicht es Kunden, Produktdetails in einem Pop-up zu sehen, ohne deine Shop-Seite zu verlassen.
Um die Schnellansicht zu deaktivieren:
- Klicke auf den Tab Schnellansicht.
- Klicke auf Schnellansicht anzeigen, um sie zu deaktivieren.
Um zu erfahren, wie du die Schnellansicht anpassen kannst, klicke
hier.
Die Gittergalerie für Mobilgeräte anpassen
Achte darauf, dass die Galerie auch auf mobilen Geräten gut aussieht. Du kannst das Design an kleinere Bildschirme anpassen und es Kunden ermöglichen, schnell Produkte in den Warenkorb zu legen, ohne die Galerie verlassen zu müssen.
Um die Gittergalerie für Mobilgeräte anzupassen:
- Öffne die Seite mit der Gittergalerie, die du anpassen möchtest.
- Klicke oben im Editor auf das Symbol für Zu Mobile wechseln
.
- Klicke auf die Gittergalerie.
- Klicke auf Einstellungen.
- Führe einen der folgenden Schritte aus, um deine Galerie für Mobilgeräte anzupassen:
- Warenkorb-Button anzeigen: Aktiviere diese Option, damit Kunden Produkte in den Warenkorb legen können, ohne die Produktseite aufrufen zu müssen. Wenn diese Option aktiviert ist, klicke auf den Schalter Menge anzeigen, damit Kunden mehr als eines der Produkte in den Warenkorb legen können.
- Produktoptionen anzeigen: Aktiviere diese Option, um Produktoptionen wie Größen oder Farben anzuzeigen.
- Das Layout anpassen: Produkte in 1 oder 2 Spalten anzeigen.
- Das Design anpassen: Ziehe die Schalter, um die Textgröße für Mobilgeräte anzupassen.
Eine Kategorie in einer Slidergalerie anzeigen
Eine Slidergalerie ist perfekt, um deine Shop-Produkte zur Geltung zu bringen. Kunden können auf die Navigationspfeile klicken, um weitere Produkte anzuzeigen.
Um eine Slidergalerie hinzuzufügen und eine Kategorie auszuwählen, die angezeigt werden soll:
- Öffne die Seite, zu der du eine Galerie hinzufügen möchtest.
- Öffne das Panel „Elemente hinzufügen“ in deinem Editor:
- Wix Editor: Klicke auf der linken Seite des Editors auf Elemente hinzufügen .
- Editor X: Klicke oben im Editor X auf Elemente hinzufügen .
- Klicke auf Online-Shop.
- Klicke auf die Sliderproduktgalerie.
- Ziehe die Slidergalerie an die gewünschte Stelle.
- Klicke im Editor auf die Galerie.
- Klicke auf Einstellungen.
- Wähle eine Option:
- Um alle Produkte anzuzeigen: Stelle sicher, dass die Kategorie Alle Produkte ausgewählt ist.
- Um eine Kategorie anzuzeigen: Wähle aus dem Aufklappmenü unter Welche Kategorie möchtest du anzeigen? eine Kategorie aus.
Eine Slidergalerie anpassen
Passe eine Slider-Produktgalerie an, um den perfekten Look 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.
Um eine Slider-Galerie anzupassen:
- Klicke auf die Sliderproduktgalerie.
- Klicke auf Einstellungen.
- Was möchtest du machen?
Klicke auf den Tab Layout und passe die Galerie mit den folgenden Optionen an:
- Volle Bildschirmbreite: Klicke auf den Schalter, um auszuwählen, wie die Slidergalerie angezeigt wird.
- Aktiviert: Das Element wird auf die volle Breite des Browsers deiner Besucher gestreckt.
- Ränder: Lege die Breite der seitlichen Ränder der Galerie fest.
- Deaktiviert: Das Element wird nicht auf die Breite des Browser gestreckt.
- Produktanzeige: Wähle aus, wie Produktinformationen angezeigt werden.
- Produktinfo-Ausrichtung: Wähle die Textausrichtung aus: links, rechts oder zentriert.
- Galerietitels - Ausrichtung: Der Titel kann im Tab Einstellungen deaktiviert werden.
- Produktanzahl: Wähle aus, wie die Anzahl der angezeigten Produkte bestimmt wird:
- Festgelegt: Die Anzahl der von dir ausgewählten Produkte wird allen Website-Besuchern angezeigt.
- Wähle die Anzahl der Produkte aus, die angezeigt werden sollen.
- Responsiv: Die Anzahl der angezeigten Produkte passt sich der Bildschirmgröße deines Besuchers an. Diese Einstellung ist nur verfügbar, wenn du oben die Option Volle Bildschirmbreite ausgewählt hast.
- Abstand zwischen Produkten: Passe den Leerraums zwischen den Produkten an.
- Produktdetails - Füllung: Passe den Abstand links und rechts neben den Produktinfos an.
- Bildlayout: Wähle aus, wie die hochgeladenen Bilder angezeigt werden. Mehr erfahren
- Banner-Layout: Wähle aus, wo das Banner angezeigt wird. Mehr erfahren
Klicke auf den Tab Einstellungen und passe die folgenden Optionen an:
- Bei Mouseover: Lege fest, was passiert, wenn ein Kunde mit der Maus über ein Produkt fährt.
- Was wird angezeigt?: Blende Galerieelemente ein oder aus.
- „In den Warenkorb“-Button: Zeige den Button an, damit Kunden Produkte in den Warenkorb legen können, ohne die Produktseite aufrufen zu müssen. Ist diese Funktion ausgewählt, kannst du den Button anpassen:
- Nur bei Mouseover: Aktiviere das Kontrollkästchen, um den Button nur anzuzeigen, wenn der Kunde mit der Maus darüber fährt.
- Beim Anklicken des Buttons: Wähle aus, wohin Kunden geleitet werden, nachdem sie auf den „In den Warenkorb“-Button geklickt haben.
- Anzahlanzeige: Wähle diese Option, damit Kunden 2 oder mehr Produkte in den Warenkorb legen können.
Klicke auf den Tab Text und passe die folgenden Optionen an:
- Galerietiteltext: Verfügbar, wenn der Titel aktiviert ist.
- „In den Warenkorb“-Buttontext: Verfügbar, wenn der „In den Warenkorb“-Button aktiviert ist.
- „Nicht verfügbar“-Nachricht: Diese Nachricht wird angezeigt, wenn der Produktbestand Null ist.
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 Schriftart und -farbe für den Titel und passe die Pfeile der Slider-Galerie an.
- Produktanzeige: Wähle eine Hintergrundfarbe für die Produkte, füge einen Rand hinzu und passe den Galerietext an.
- „In den Warenkorb“-Button: Wähle ein Design für jede Ansicht aus — Standardeinstellung und Mouseover.
- Banner: Wähle die Form, Farbe und Schriftart des Banners aus. Mehr erfahren
- Name & Trennlinie: Passe die Trennlinie zwischen dem Produktnamen und dem Preis an.
- Schnellansicht-Button: Der Schnellansicht-Button wird über dem Bild angezeigt, wenn man mit der Maus darüber fährt. Um diesen anzusehen, zeige eine Vorschau deiner Website an.
Die Schnellansicht anpassen
Die Schnellansicht ermöglicht es Kunden, Produktdetails in einem Pop-up zu sehen, ohne deine Shop-Seite zu verlassen.
Um die Schnellansicht zu deaktivieren:
- Klicke auf den Tab Schnellansicht.
- Klicke auf den Schalter Schnellansicht anzeigen
, um ihn zu deaktivieren.
Wie du die Schnellansicht anpassen kannst, erfährst du
hier.
