Produktlistenelement

Informationen zum Produktlistenelement

Die Product List spielt eine entscheidende Rolle bei der Präsentation einer Reihe von Produkten. Sein Zweck besteht darin, den Verkaufswert effektiv zu steigern, indem Upselling und Cross-Selling an Ihre Kunden ermöglicht werden. Im Gegensatz zur vorherigen Version bietet das Produktlistenelement V7 die Möglichkeit, gezielt bestimmte Produkte zur Anzeige auszuwählen, was die Flexibilität des Webseitendesigns erhöht.

Wie fügen Sie Ihrer Seite ein Produktlistenelement hinzu?

Um das Produktlistenelement in GemPages zu verwenden, führen Sie die folgenden Schritte aus:

Schritt 1: Einloggen, um Shopify-Administrator und Zugang GemPages Dashboard > Seiten.

Schritt 2: Suchen Sie die Zielseite, um den Editor zu öffnen.

Schritt 3: Ziehen Sie aus der linken Seitenleiste per Drag & Drop die Product List Element unter dem Produkt Abschnitt in Ihren bevorzugten Abschnitt auf der Seite.

Schritt 4: Klicken Sie auf das Element, um auf seine Konfigurationsoptionen zuzugreifen, darunter Einstellungen und Erweitert Tabs

Konfigurieren der Registerkarte „Einstellungen“

Layout

Für die Präsentation Ihrer Produktliste stehen Ihnen zwei Optionen zur Auswahl:

• Gitter: Die Produktliste wird im Standardstil angezeigt.
• Schieberegler: Die Produktbilder werden in einem Karussell angezeigt.

Produktquelle

Sie können festlegen, wie Produkte angezeigt werden, indem Sie eine der folgenden Optionen auswählen:

• Produkte: Wählen Sie manuell bestimmte Produkte zur Präsentation aus.
• Erfassung: Wenn Sie Produkte aus einer bestimmten Kollektion präsentieren möchten, wählen Sie diese Option. Bitte stellen Sie sicher, dass Sie die Kollektionen zuvor in Ihrem Shopify-Adminbereich eingerichtet haben, da das Element Informationen von dort abruft.

• Verwandt: Zeigen Sie automatisch Produkte an, die mit dem aktuellen verknüpft sind, basierend auf derselben Sammlung, demselben Anbieter oder demselben Tag.

Präsentation

Verwenden Sie den Schieberegler oder geben Sie eine genaue Zahl ein, um auszuwählen, wie viele Produkte in einer einzelnen Zeile angezeigt werden sollen.

Artikelabstand

Verstelle die Abstand zwischen Ihren Artikeln in der Produktliste.

Menü

In diesem Abschnitt können Sie konfigurieren, Menü Einstellungen für die Slider-Produktliste, einschließlich:

• Position: Wählen Sie, ob der Pfeil innerhalb oder außerhalb der Liste angezeigt werden soll.
• Symbol: Wählen Sie Ihr bevorzugtes Symbol aus der verfügbaren Liste aus oder laden Sie eine neue SVG-Datei hoch.
• Symbolgröße: Passen Sie die Symbolgröße an.
• Knopfgröße: Ändern Sie die Schaltflächengröße des Symbols.
• Hintergrund: Legen Sie die Hintergrundfarbe für die Symbolschaltfläche fest.
• Rand: Fügen Sie einen Rahmen um die Schaltfläche hinzu und passen Sie ihre Breite und Farbe an.
• Ecke: Legen Sie den Eckenradius fest, um zu steuern, wie abgerundet die Schaltflächenkanten erscheinen.
• Schatten: Aktivieren und passen Sie den Schlagschatten für die Schaltfläche an.
• Abstand zum Rand: Abstand zwischen Pfeil und Slider-Rand
• Beim Hovern anzeigen: Pfeile nur anzeigen, wenn der Mauszeiger über die Produktliste bewegt wird.

Dots

Schalten Sie die Sichtbarkeit der Punkte unter dem Schieberegler um, um die Dots Einstellungen zum Anzeigen von Seitennummerierungsindikatoren unter Ihrem Schieberegler, einschließlich:

• Position: Wählen Sie die Position der Punkte.
• Aktive Farbe: Legen Sie die Farbe des aktuell aktiven (hervorgehobenen) Punkts fest.
• Inaktive Farbe: Legen Sie die Farbe der inaktiven (nicht ausgewählten) Punkte fest.
• Punktgröße: Passen Sie die Größe jedes Punkts an (in Pixeln).
• Abstand zur Kante: Steuern Sie den Abstand zwischen den Punkten und dem Rand des Containers.

Slide-Effekt

Unter dem Slide-Effekt Im Abschnitt können Sie Folgendes konfigurieren:

• Autoplay: Automatisches Blättern durch Produkte ohne Benutzerinteraktion.
• Schieberichtung: Wählen Sie die Richtung, in die sich der Schieberegler bewegt: links oder rechts.
• Unendlichkeitsschleife: Aktivieren Sie die Endlosschleife, sodass der Schieberegler nach Erreichen des letzten Produkts zum Anfang zurückkehrt.
  
• Ziehen/wischen: Erlauben Sie Benutzern, manuell durch den Schieberegler zu ziehen (Desktop) oder zu wischen (Mobil).
• Gleitgeschwindigkeit: Legen Sie die Dauer des Folienübergangs fest (z. B. 500 ms).
• Animation: Wählen Sie den Animations-Ease-Typ für sanftere Folienübergänge (z. B. „Ease In“, „Ease Out“, „Linear“).

Größe

In diesem Abschnitt können Sie die Größe des Produktlistencontainers definieren, einschließlich:

Länge: Geben Sie einen festen Breitenwert (in Pixeln) ein, oder aktivieren Sie Gesamtbreite um das Element über die gesamte Seitenbreite zu erstrecken.

Höhe: Wählen zwischen

• Auto: Die Höhe wird je nach Inhalt angepasst.
• Maßgeschneidert: Geben Sie einen bestimmten Höhenwert ein, um eine feste Höhe festzulegen.

Polsterung: Legen Sie den Abstand innerhalb der Elementränder fest, um Platz für den Inhalt zu schaffen.

Hintergrund

In diesem Abschnitt können Sie den Hintergrundstil des Produktlistenelements anpassen:

• Farbe,: Verwenden Sie die Farbauswahl, um eine Hintergrundfarbe anzuwenden. Sie können aus Voreinstellungen wählen, einen HEX-Code eingeben oder aus aktuellen Farben auswählen.
• Bild: Laden Sie ein Bild hoch, das Sie als Hintergrund verwenden möchten. Je nach Design kann dies ein Muster, eine Textur oder ein Werbebild sein.

Shape

In diesem Abschnitt können Sie die Ecken des Produktlistencontainers formen:

Eckenradius: Passen Sie die Rundung jeder Ecke (oben links, oben rechts, unten links und unten rechts) einzeln an.

• 0px = scharfe Ecke
• 50px+ = vollständig abgerundete Ecke

Verwenden Sie die vordefinierten Layout-Schaltflächen, um schnell konsistente Werte auf alle Ecken anzuwenden oder auf die Standardwerte zurückzusetzen.

Konfigurieren der Registerkarte „Erweitert“

Für erweiterte Anpassungen navigieren Sie bitte zu Erweitert und folgen Sie den Anweisungen in Dieser Artikel.

Häufig gestellte Fragen

1. Kann ich auf verschiedenen Seiten unterschiedliche Produkte anzeigen?

Ja. Sie können bestimmte Produkte oder Kollektionen pro Seite manuell auswählen, indem Sie in den Produktlisteneinstellungen die Optionen „Mehrere Produkte“ oder „Eine Kollektion“ verwenden.

2. Wie zeige ich die Produktliste auf Mobilgeräten in zwei Spalten an?

Klicken Sie auf das Gerätesymbol neben dem Schieberegler „Produkte pro Zeile“ > wechseln Sie zur mobilen Ansicht und setzen Sie die Zahl auf 2.

3. Warum werden in meiner Produktliste keine oder leere Produkte angezeigt?

Dies kann passieren, wenn:

• Die verknüpfte Shopify-Sammlung ist leer oder unveröffentlicht.
• Die ausgewählten Produkte sind nicht vorrätig und im Schaufenster ausgeblendet.
• Sie zeigen eine Vorschau einer produktspezifischen Seite mit dem falschen Produkt-Handle an.
• Überprüfen Sie Ihre Shopify-Einstellungen und den Vorschaukontext noch einmal.

4. Kann ich Produkte innerhalb des Produktlistenelements filtern?

Nein. Das Element „Produktliste“ unterstützt weder Live-Filterung noch Smart-Filter. Wenn Sie Smart Product Filter & Search verwenden, wird die Produktliste durch eine eigene Ausgabe ersetzt.

5. Ist es möglich, die Produktkarten innerhalb der Liste zu gestalten?

Ja. Sie können Produkttitel, Preise, Schaltflächen, Abstände und Layout mithilfe der Erweitert Registerkarte und einzelne Blockeinstellungen innerhalb der Produktliste.

6. Kann ich dasselbe Produktlistenelement auf mehreren Seiten verwenden?

Jedes Produktlistenelement ist für seine Seite eindeutig. Sie können eine Seite jedoch duplizieren oder als Vorlage speichern, wenn Sie die Konfiguration auf anderen Seiten wiederverwenden möchten.

7. Kann ich die GemPages-Produktliste mit Smart Product Filter & Search verwenden?

Nein. Die App „Smart Product Filter & Search“ generiert eine eigene Produktliste und Filterstruktur. Daher ist sie nicht mit dem Produktlistenelement in GemPages kompatibel.

8. Warum wird meine Produktliste nicht auf der Startseite angezeigt?

• Achten Sie darauf, dass Ihre Die Startseite von GemPages ist als Standard festgelegt.Andernfalls wird Shopify weiterhin die Startseite des Themes anzeigen.
• Stellen Sie sicher, dass die Startseite veröffentlicht, nicht nur gerettet.
• Wenn Sie mit Kollektion als Produktquelle:
  • Die Kollektion ist auf Shopify veröffentlicht.
  • Die Kollektion umfasst Produkte, die im Online-Shop sichtbar sind.
• Wenn Sie mit Produkte als Produktquelle:
  • In den Produktlisteneinstellungen ist mindestens ein Produkt ausgewählt.

9. Kann ich die Produktreihenfolge im Element „Produktliste“ ändern?

Ja, wenn Sie wählen Produkte (Manuelle Kommissionierung) können Sie die Produktreihenfolge nach Ihren Wünschen anordnen; wenn Sie jedoch verwenden Kollektion Da die Quelle als Sortierung dient, richtet sich die Reihenfolge nach der Standardsortierung der Sammlung.