Produkte als gestapelte Zeilen — gemacht für Seitenleisten, schmale Spalten, Warenkorbseiten und Blog-Platzierungen, in die kein Karussell passt. Jede Zeile zeigt Foto, Titel und Preis, dazu Badges, optionale Sternebewertungen, einen schnellen In-den-Warenkorb-Button und einen Countdown bei zeitlich begrenzten Angeboten. Ein Button Show More blendet den Rest nach und nach ein.
So funktioniert diese Vorlage
- Zwei Anordnungen. List Layout → Form Position wechselt zwischen side — der klassischen Seitenleisten-Zeile mit einem Thumbnail neben dem Text (Thumbnail Width und Height (Side Layout), standardmäßig 96px) — und stacked — Bild oben, Text darunter, als vollständige Karten. Space Between Items legt den Abstand zwischen den Zeilen fest.
- Show More. Zunächst sind Items Shown Initially (standardmäßig 3) sichtbar, und jeder Klick auf den Button blendet Items Revealed Per Click weitere ein (standardmäßig 3). Sobald alles sichtbar ist, wird der Button zu Show Less und klappt die Liste wieder zusammen. Show More Button Position ist center, left, right oder full width; schalten Sie Show More Button aus, um alle Artikel auf einmal anzuzeigen.
- Top-10-Listen. Numbering (Top-10 Style) → Show Item Numbers setzt auf jeden Artikel ein nummeriertes Badge, für Ranglisten.
- Style-Akzente. Style accent (light, gold, bold, ocean) färbt Nummerierung, Titel, Sterne, Buttons und Artikelhintergründe gemeinsam um; gold ist der dunkle Premium-Look. Jede Farbe lässt sich weiterhin einzeln in ihrem eigenen Stilfeld überschreiben.
- Badges. Popular, Best Seller, New, zeitbasierte und eigene (Feed-)Badges teilen sich einen Stapel — standardmäßig oben links, verschiebbar mit Badge Stack Corner. Die übrigen haben eigene Ecken: Discount oben rechts, Price Drop unten rechts, Low Stock unten links und das Wunschlisten-Herz oben rechts. Ein Back-in-Stock-Badge befindet sich im Abschnitt New Badge.
- Der Countdown. Das Time-based Offer Badge liest das Offer End Date Field (einen Unix-Zeitstempel in Ihrem Katalog), kann live herunterzählen (Show Countdown Timer) und blendet sich aus, sobald das Datum vorbei ist.
- Catalog Fields und zentrale Preiseinstellungen. Catalog Fields (an zweiter Stelle im Menü) ordnet jede Produktspalte, die die Vorlage nutzt, einmal pro Website zu. Der Abschnitt Pricing hat ein einziges Auswahlfeld Price Format (standard, european, rounded, rounded-european) und ein Paar Währungssymbol-Felder für alle Preise der Liste.
- In den Warenkorb. Unter Quick add to cart wählt Button Action entweder Add to cart (uses your cart integration) — die Voreinstellung, die den Code für Schnell in den Warenkorb Ihres Kontos ausführt — oder Open the product page, einen gewöhnlichen Link. Quick Add to Cart — Cart Integration Argument wird diesem Code als zweites Argument übergeben.
- Demo-Produkte. Demo Products (Preview Only) zeigt beim Gestalten sechs Beispielprodukte, bevor ein Katalog verbunden ist. Sie erscheinen nur im Personyze-Editor und in Vorschau-Links; sobald Ihr Katalog mehr als ein Produkt lädt, werden stattdessen Ihre Produkte angezeigt. Besucher sehen sie nie.
Gut zu wissen
- Hover-Stile sind eigene Felder. Wenn Sie die Grundfarbe eines Buttons ändern, übernehmen Sie sie im passenden Feld Hover Style, damit der Hover-Effekt einheitlich bleibt.
- Gespeicherte Vorlagenkarten frieren ihren Code ein. Wenn Sie eine eigene Kopie unter Meine Vorlagen behalten, verwenden die daraus erstellten Aktionen den Code im Zustand beim Speichern — speichern Sie die Karte nach größeren Updates erneut.
Verwandte Themen
- Product Slider & Grid — dieselben Produkte als Karussell oder scrollbares Raster.
- Recommendation Cards — eine Reihe, eine Liste oder ein Streifen aus Karten.
- Button „Schnell in den Warenkorb“ — der Code, den der In-den-Warenkorb-Button ausführt.
- Vorlagen: die Galerie im Überblick — jedes fertige Design.