CMS: Deine Produkte von Wix Stores auf einer dynamischen Listenseite anzeigen

11 Min. Lesezeit
Verwende das CMS (Content Management System), um deine Produkte von Wix Stores kreativ darzustellen, indem du sie in einem vollständig anpassbaren Repeater auf einer dynamischen Listenseite anzeigst. Wähle nur die Seitenelemente aus, die du benötigst (z. B. Text, Buttons, Bilder) und verbinde diese mit den entsprechenden Feldern deiner Produkte (z. B. Name, Preis, verfügbare Menge).

Du kannst Buttons oder Bilder mit deiner Produktseite verknüpfen, damit Kunden vor dem Kauf darauf klicken können, um mehr zu erfahren. Du kannst auch die Buttons „In den Warenkorb“ und „Schnellansicht“ hinzufügen, um ein nahtloses Einkaufserlebnis zu erzeugen.
Bevor du loslegst:

Schritt 1 | Eine dynamische Listenseite für deine Produkte hinzufügen

Öffne die App-Sammlungen von Wix im CMS deines Editors und erstelle eine dynamische Listenseite aus der Shop-Sammlung. Diese Seite enthält einen Repeater, der bereits teilweise mit deinen Shop-Produkten verbunden ist.
Wix Editor
Editor X
Studio Editor
  1. Öffne deinen Editor.
  2. Klicke auf der linken Seite im Editor auf CMS  .
  3. Klicke links auf App-Sammlungen von Wix.
  4. Scrolle nach unten zu Shops, fahre mit der Maus über Produkte und klicke auf das Symbol für Weitere Aktionen .
  5. Klicke auf Dynamische Seite hinzufügen.
  1. Klicke auf Listenseite.
  2. Klicke auf Hinzufügen.

Tipp: Wenn du einen anderen Repeater verwenden möchtest, kannst du den Standard-Repeater löschen und einen neuen hinzufügen. Du verbindest die Repeater-Elemente im nächsten Schritt.
Tipp:
Du kannst deine Produkte in einer Pro Gallery oder Tabelle (nur Wix Editor) anstelle eines Repeaters anzeigen. Entferne dazu den Repeater und füge eine Galerie oder Tabelle hinzu. Folge anschließend den restlichen Schritten in diesem Artikel, um deine Galerie oder deinen Repeater mit dem CMS zu verbinden.

Schritt 2 | Deinen Repeater mit dem CMS verbinden

Verbinde den Repeater mit einem Datensatz, der mit deiner Produktkollektion von Wix Stores verknüpft ist. Verbinde dann jedes Repeater-Element mit den dynamischen Werten deiner Sammlung, die sich je nach angezeigtem Produkt ändern. Verlinke ein Bild oder einen Button in deinem Repeater mit der Produktseite von Wix Stores, damit Kunden vor dem Kauf zusätzliche Informationen zu Produkten ansehen können. Du kannst auch „In den Warenkorb“- und „Schnellansicht“-Links erstellen.
Wix Editor
Editor X
Studio Editor
  1. (Optional) Füge Elemente zu deinem Repeater hinzu (z. B. Buttons, Text, Bilder) oder entferne Elemente, die du nicht benötigst. Du kannst die Größe des Repeaters anpassen, sodass alle Elemente darin angezeigt werden können.
  2. Klicke auf das Repeater-Element und wähle das Symbol für Mit CMS verbinden .
  3. Klicke auf das Aufklappmenü Datensatz verbinden und wähle Produkte aus.
  4. Klicke unter Verbindungen auf das Repeater-Element, das du verbinden möchtest.
    Hinweis: Wenn du den Standard-Repeater verwendest, der Bestandteil der dynamischen Seite ist, sind die Elemente Bild und Text bereits verbunden. Du kannst zusätzliche Textelemente löschen oder die Verbindung trennen und durch statischen Text ersetzen.
  5. Klicke auf die entsprechenden Aufklappmenüs und wähle die dynamischen Sammlungsfelder von Wix Stores, die du verbinden möchtest, oder die Datensatzverknüpfungsoptionen für Buttons und Bilder:
    • Sammlungsfelder von Wix Stores: Wähle die entsprechenden Felder aus, zum Beispiel:
      • Name (Text): Der Produktname, den du in Wix Stores erstellt hast.
      • Formatierter reduzierter Preis (Text): Der in der Währung formatierte Preis (z. B. 20 €).
      • Hauptmedien (Bild): Das Hauptmedienelement (Bild oder Video) für das Produkt.
    • Verlinkungsoptionen für Buttons und Bilder: Klicke auf das Aufklappmenü Beim Klicken verbinden mit oder Link verknüpfen mit und wähle die entsprechende Option aus:
      • Zur Produktseiten-URL navigieren: Öffne die Webadresse der Produktseite auf deiner Website.
      • In den Warenkorb: Fügt das Produkt zum Warenkorb hinzu.
      • Schnellansicht öffnen: Öffnet ein Pop-up mit Details zum Produkt.
  1. Klicke auf Repeater-Verbindungen und wiederhole die Schritte 4-5 oben, um weitere Elemente im Repeater zu verbinden.
  2. Klicke, um deine Repeater-Elemente nach Bedarf anzupassen.
    Tipp: Du kannst jederzeit Elemente zu deinem Repeater hinzufügen oder daraus entfernen. Trenne die Verbindung zu Elementen, wenn du statische Inhalte verwenden möchtest, die sich nicht entsprechend der jeweiligen Kategorie ändern.
  3. Klicke auf Vorschau, um deine dynamische Produktseite zu testen.
  4. Klicke auf Veröffentlichen, wenn du die Änderungen veröffentlichen möchtest.

Schritt 3 | (Optional) Die Datensatzeinstellungen verwalten

In den Einstellungen deines Datensatzes kannst du die maximale Anzahl von Produkten auswählen, die auf einmal angezeigt werden können. Du kannst auch Filter hinzufügen, um nur bestimmte Produkte einzuschließen, oder Sortierungen hinzufügen, um die Reihenfolge zu steuern, in der die Produkte angezeigt werden.
Wix Editor
Editor X
Studio Editor
  1. Klicke im Editor auf den Datensatz Produkte und wähle Einstellungen.
  2. Bearbeite das Feld Maximale Anzahl angezeigter Elemente, um die maximale Anzahl von Produkten festzulegen, die gleichzeitig auf der Seite geladen werden können. Das sind auch die maximalen Produkte, die pro Seite in einer verbundenen Paginierungsleiste oder per Klick auf einen „Mehr laden“-Button geladen werden können.
  3. (Optional) Klicke auf + Filter hinzufügen, um im Repeater nur bestimmte Kategorien anzuzeigen.
  4. (Optional) Klicke auf + Sortierung hinzufügen, um die Reihenfolge auszuwählen, in der Produkte im Repeater angezeigt werden
  5. Klicke auf Vorschau, um deine dynamische Produktseite zu testen.
  6. Klicke auf Veröffentlichen, wenn du die Änderungen veröffentlichen möchtest.

Schritt 4 | (Optional) Kunden ermöglichen, Produkte zu filtern

Gib Besuchern die Möglichkeit, nur Produkte anzuzeigen, die den von ihnen angewendeten Filtern entsprechen wie zum Beispiel Preis, Bestand oder Marke. Wähle eines der folgenden _blank">Eingabeelemente, die das Filtern ermöglichen: Radiobuttons, Kontrollkästchen, DropdownAuswahl-Tags oder Schieberegler (nur Bereichsschieberegler).

Schritt 5 | (Optional) „Mehr laden“- oder Navigationsbuttons hinzufügen

Du kannst die Leistung deiner Seite verbessern, indem du die Anzahl der angezeigten Produkte beschränkst und einen „Mehr laden“-Button hinzufügst.

Füge Navigationsbuttons hinzu, damit Käufer die nächsten/vorherigen Artikel anzeigen können oder füge eine Paginierungsleiste hinzu, um gleichzeitig durch eine bestimmte Anzahl von Produkten zu blättern.

War das hilfreich?

|