Storefront-Templates anpassen
Im Bereich Storefront-Templates steuern Sie, wie reservierungsbezogene UI-Elemente in Ihrem Shop für Kunden erscheinen. Dazu zählen Reservierungs-Timer, Ablaufzustände, Warnmeldungen und Lagerhinweise.
Dieser Bereich konzentriert sich ausschließlich auf das visuelle Verhalten und die Customer Experience und beeinflusst nicht die Reservierungslogik oder Bestandsregeln.
Storefront-Templates aufrufen
Navigieren Sie zu Einstellungen → Storefront-Templates → Erscheinungsbild anpassen.
Seiten-Aktionen
- Verwerfen – alle ungespeicherten Änderungen rückgängig machen
- Änderungen speichern – Anpassungen im Storefront übernehmen
Template-Vorlagen
Wählen Sie aus drei vorgefertigten Timer-Designs:
Standard
Violettes Design mit Ampel-Zuständen. Eine violette Akzentfarbe wechselt durch Warn- und Dringlichkeitszustände.
Dies ist das Standard-Erscheinungsbild von Cart Reserve.
Minimal
Dezentes, gedämpftes Design mit dünnen Rändern. Ein klares, zurückhaltendes Aussehen, das sich in die meisten Themes einfügt.
Als POPULAR markiert – die am häufigsten gewählte Option.
Bold
Kontrastreiches, aufmerksamkeitsstarkes Design. Verwendet kräftige Hintergründe und auffällige Farben, damit der Timer immer sichtbar ist.
Wählen Sie eine Vorlage, indem Sie auf die Vorschaukarte klicken. Ein Häkchen kennzeichnet die aktive Vorlage.
Timer-Anpassung
Passen Sie das Erscheinungsbild des Countdown-Timers für jeden Zustand an.
Timer-Zustände
Der Timer wird unterschiedlich dargestellt, je nachdem wie viel Zeit verbleibt:
| Zustand | Beschreibung |
|---|---|
| Gesund | Viel Zeit verbleibt, ruhige Darstellung |
| Warnung | Wenig Zeit verbleibt, lenkt Aufmerksamkeit |
| Dringend | Sehr wenig Zeit übrig, hohe Sichtbarkeit |
| Abgelaufen | Reservierung ist beendet |
Klicken Sie auf den Tab eines Zustands, um dessen Aussehen individuell anzupassen.
Live-Vorschau
Sehen Sie Änderungen in Echtzeit. Die Vorschau zeigt, wie der Timer den Kunden mit dem Text "Items Reserved" und einem Beispiel-Countdown erscheint.
Container-Einstellungen
Passen Sie das Erscheinungsbild des Timer-Containers an:
Eckenradius
Legen Sie die Rundung der Ecken in Pixel fest (z. B. 6 px). Höhere Werte erzeugen stärker abgerundete Ecken.
Rahmen anzeigen
Aktiviert oder deaktiviert den Container-Rahmen. Bei Aktivierung hat der Timer einen sichtbaren Rahmen entsprechend Ihrer Rahmenfarbe.
Farbeinstellungen
Jeder Timer-Zustand hat vier anpassbare Farben:
Hintergrund
Die Hauptfarbe des Containers. Verwenden Sie die Farbauswahl oder geben Sie einen Hex-Wert ein (z. B. #F5F3FF).
Rahmen
Die Rahmenfarbe des Containers, sichtbar wenn "Rahmen anzeigen" aktiviert ist.
Text
Farbe für Label und Untertitel (z. B. "Items Reserved", "Complete checkout to secure your items").
Symbol/Akzent
Farbe für Countdown-Zahlen, Symbol und Fortschrittsbalken.
Empfehlungen je Zustand
Zustand "Gesund"
Verwenden Sie ruhige, neutrale Farben. Der Timer sollte sichtbar, aber nicht alarmierend wirken.
- Empfehlung: Helle Hintergründe mit dezenten Akzenten
Zustand "Warnung"
Setzen Sie wärmere Töne ein, um Aufmerksamkeit zu erregen.
- Empfehlung: Gelbe oder orange Akzente
Zustand "Dringend"
Verwenden Sie kontrastreiche Farben, die Dringlichkeit erzeugen.
- Empfehlung: Roter oder oranger Hintergrund mit weißem Text
Zustand "Abgelaufen"
Kommunizieren Sie klar, dass die Reservierung beendet ist.
- Empfehlung: Graue oder gedämpfte Töne für einen inaktiven Eindruck
Vorschau und Test
Nach dem Speichern:
- Besuchen Sie die Warenkorbseite Ihres Shops mit reservierten Artikeln
- Prüfen Sie, ob der Timer korrekt angezeigt wird
- Warten Sie, bis der Timer durch die Zustände wechselt (oder reduzieren Sie testweise die Reservierungsdauer)
- Bestätigen Sie, dass alle Zustände wie erwartet dargestellt werden
Verwandte Abschnitte
- Timer – Timer-Verhalten und Texte konfigurieren
- Reservierungs-Ablauf – Ablaufmeldungen anpassen
- Lagerhinweis-Banner – Lagerhinweise konfigurieren