Das komplette Produktkarussell: eine Vorlage, die klassische Slider, mehrzeilige scrollbare Raster und badge-reiche Merchandising-Karten abdeckt. Wählen Sie einen Style accent (light, gold, bold, ocean), und jede Karte, jedes Badge, jeder Button und jeder Preis wird mit einem Klick umgefärbt.
Was enthalten ist
- Mehrzeilige Raster (Einstellung Rows), Pfeile an der Seite oder in der Titelleiste, Paginierungspunkte, Scrollleiste, Autoplay mit Pause beim Überfahren, Ziehen zum Scrollen und Einrast-Steuerung.
- Eck-Badges (Rabatt- / Sale-Prozent, Preissenkung, geringer Bestand) und ein verschiebbarer Badge-Stapel (New, Popular, Best Seller, zeitlich begrenzte Angebote, eigene Daten).
- Sternebewertungen mit Anzahl der Bewertungen, wöchentliche und tägliche Ansichts-/Verkaufsstatistiken in drei Darstellungen (divided, plain, pill), ein Social-Proof-Ticker und ein Countdown-Timer.
- Hover-Effekte: Kartenschatten, Bildzoom, Einblenden eines zweiten Bildes, ein Hover-Overlay mit Buttons, ein von unten hochgleitendes Panel und ein animiertes Add to Cart.
- Produkttext: Titel mit Stil-Presets für die Widget-Überschrift, Marken-/Untertitelzeile, Beschreibung, eigene Datenspalte, Grundpreis, Zahlungszeile, Optionslink, Link-Button, Wunschliste.
- Card Info Order (standard / brand-first / price-first) und ein Link „Alle ansehen“ in der Titelleiste.
So funktioniert diese Vorlage
Diese Vorlagenfamilie beruht auf vier Ideen:
- Style accents. Die erste Einstellung, Style accent (light, gold, bold, ocean), färbt Karten, Badges, Buttons, Preise, Punkte und Scrollleisten mit einem Klick gemeinsam um. Jede Farbe lässt sich danach weiterhin einzeln in ihrem eigenen Stilfeld überschreiben.
- Catalog Fields an einer Stelle. Der Bereich Catalog Fields (der zweite im Menü) ordnet jede Produktspalte zu, die die Vorlage nutzt — Bilder, URL, Titel, Marke, beide Preisspalten, Bewertung, Beschreibung, Bestand, Rabattprozent, Datumsangaben und eigene Felder. Die Zuordnungen gelten global: Eine dort gesetzte Spalte aktualisiert jedes Element, das sie verwendet. Shops mit vollständig eigenen Feeds können das ganze Widget über diesen einen Bereich neu verdrahten.
- Live-Demomodus. Beim Gestalten erscheinen automatisch realistische Demoprodukte (Besucher sehen sie nie). Die erste Demokarte ist ein Live-Schaufenster: Klicken Sie auf ein beliebiges Element darauf, um es zu gestalten, und jeder Schalter — Badges, Add to Cart, Overlays, Statistiken, Beschreibung, Grundpreis — wirkt sich sichtbar darauf aus.
- Zentrale Preisdarstellung. Der Bereich Pricing hat eine Auswahl Price Format (standard / european / rounded / rounded-european) und ein Paar Felder für Währungssymbole, die überall gelten, wo Preise erscheinen, auch im Overlay auf dem Bild. Produkte ohne Preis zeigen nichts an — keine verwaisten Währungssymbole.
Gut zu wissen
- Die Artikel pro Gerät richten sich nach dem Container, nicht nur nach dem Bildschirm. Die sichtbaren Artikelzahlen (Desktop / Tablet / Mobil) werden aus der eigenen Breite des Widgets abgeleitet und funktionieren daher in der Gerätevorschau des Editors, auf echten Smartphones und sogar in schmalen Seitenleisten korrekt.
- Text on Image entfernt Doppelungen automatisch. Solange das Overlay aktiv ist, blenden sich Titel, Markenzeile und Preis unter dem Foto von selbst aus.
- 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 Your templates behalten, verwenden die daraus erstellten Aktionen den Code im Zustand beim Speichern — speichern Sie die Karte nach größeren Updates erneut.