Theme-Selektoren konfigurieren
Im Bereich Theme-Selektoren steuern Sie, wie Cart Reserve Elemente in Ihrem Theme erkennt und mit ihnen interagiert. Das ist besonders nützlich bei einem individuellen Theme, einem stark angepassten Theme oder einer Drittanbieter-Warenkorbimplementierung.
In den meisten Fällen funktionieren die Standardselektoren ohne Anpassung und es sind keine Änderungen erforderlich. Sie sollten diese Einstellungen nur ändern, wenn Reservierungen nicht korrekt aktualisiert werden oder Ihre Theme-Struktur von Standard-Shopify-Themes abweicht.
Theme-Selektoren aufrufen
Navigieren Sie zu Einstellungen → Theme-Selektoren → Selektoren konfigurieren.
Automatische Theme-Erkennung
Cart Reserve enthält integrierte Unterstützung für mehr als 30 Shopify-Themes. Das System erkennt Ihr Theme automatisch und wendet passende Selektoren an.
Die Erkennung erfolgt im Browser Ihrer Kunden und prüft nacheinander mehrere Signale:
- Manuelle Auswahl — die Einstellung Theme adapter im App Embed (siehe unten), sofern Sie ein Theme explizit ausgewählt haben
- Theme-Store-ID — im Shopify Theme Store installierte Themes werden sofort erkannt, auch wenn sie umbenannt wurden
- Theme-Name — ein Name, der ein unterstütztes Theme enthält (z. B. „Meine Dawn-Kopie"), wird diesem Theme zugeordnet
- Seitenstruktur — bei umbenannten oder direkt hochgeladenen Themes erkennt Cart Reserve das Theme anhand seiner charakteristischen Seitenelemente
Sobald ein Theme bestätigt wurde, wird das Ergebnis im Browser des Besuchers gespeichert, sodass jede weitere Seite sofort mit der richtigen Integration lädt. Bei einem Theme-Wechsel startet die Erkennung automatisch neu – kein manuelles Aufräumen erforderlich.
Manuelle Theme-Auswahl
Falls Ihr Theme stark angepasst ist und die automatische Erkennung auf den generischen Fallback zurückgreift, können Sie die Theme-Integration manuell auswählen:
Online Store → Themes → Customize → App embeds → CartReserve → Theme adapter
Wählen Sie Ihr Basis-Theme aus der Liste (Dawn, Horizon, Impact, Palo Alto, Turbo, Eurus, Focal, Wokiee) oder lassen Sie es auf Auto-detect (für die meisten Shops empfohlen).
Tipp: Nutzen Sie die Entwicklertools Ihres Browsers (Rechtsklick → Untersuchen), um bei Bedarf die korrekten CSS-Selektoren für Ihre Theme-Elemente zu ermitteln.
Klicken Sie auf Vollständige Dokumentation anzeigen für detaillierte Hinweise zur Selektor-Konfiguration.
Wie Einstellungsänderungen in Ihren Storefront gelangen
Die Storefront-Konfiguration (Selektoren, Timer-Styling, Farben) wird im Browser jedes Besuchers zwischengespeichert, damit Seiten sofort ohne Wartezeit auf das Netzwerk gerendert werden:
- Selektor-Einstellungen werden sofort aus dem Cache angewendet und bei jedem Seitenaufruf im Hintergrund mit dem Server abgeglichen — gespeicherte Änderungen erreichen Besucher innerhalb eines Seitenaufrufs
- Timer-Styling und Farben werden aus dem Cache angewendet, bevor die Seite fertig geladen ist (kein Farb-„Aufflackern"), und werden auf die gleiche Weise im Hintergrund aktualisiert
Nach dem Speichern von Änderungen im Admin laden Sie Ihren Storefront einmal neu, um sie zu sehen.
Selektor-Bereiche
Theme-Selektoren sind in einklappbare Bereiche organisiert. Jeder Bereich zeigt einen Zähler mit angepassten Selektoren (z. B. "0/2 angepasst").
Storefront-Templates
Schnellzugriff zur Anpassung des Erscheinungsbilds von Timern, Warnungen und Ablaufzuständen.
Klicken Sie auf Templates anpassen, um den Editor für Storefront-Templates zu öffnen.
Warenkorb-Artikeländerungen
Selektoren zum Erkennen und Behandeln von Mengenänderungen im Warenkorb.
Konfigurieren Sie diese, falls Cart Reserve Änderungen an Warenkorbmengen nicht erkennt.
Felder: 2 verfügbare Selektoren
Produktdetail
Selektoren für das Produktseiten-Formular und die Funktion "In den Warenkorb".
Konfigurieren Sie diese, falls Reservierungen nicht erstellt werden, wenn Kunden von Produktseiten in den Warenkorb legen.
Felder: 6 verfügbare Selektoren
Timer-Kontext
Einstellungen für die Timer-Anzeige und die Erkennung des Warenkorb-Drawers.
Konfigurieren Sie diese, falls der Timer nicht an der richtigen Stelle erscheint oder Ihr Theme einen nicht standardmäßigen Warenkorb-Drawer verwendet.
Felder: 3 verfügbare Selektoren
Universelle Selektoren
CSS-Selektoren für Mengen-Steuerungen, die in Warenkorb-Drawer, Warenkorbseite und Produktseite funktionieren.
Nutzen Sie diese für individuelle Themes, die nicht durch spezifische Voreinstellungen abgedeckt sind. Diese Selektoren funktionieren universell über verschiedene Warenkorb-Kontexte hinweg.
Felder: 6 verfügbare Selektoren
Label-Übersetzungen
Beschriftungen für Schaltflächen und Timer werden im Theme-Editor konfiguriert und lassen sich mit der Shopify-App "Translate & Adapt" übersetzen.
Klicken Sie auf Theme-Editor öffnen, um die Label-Konfiguration aufzurufen.
Pfad: Online Store → Themes → Customize → App embeds → CartReserve
Bereiche aufklappen
Klicken Sie in einem Bereich auf Erweitern, um einzelne Selektoren anzuzeigen und zu bearbeiten.
Jedes Selektorfeld akzeptiert Standard-CSS-Selektor-Syntax (z. B. .cart-item, #product-form, [data-cart-drawer]).
Fehlerbehebung
Falls Cart Reserve mit Ihrem Theme nicht korrekt funktioniert:
- Automatische Erkennung prüfen – das System sollte die meisten Themes automatisch abdecken
- Elemente inspizieren – mit den Browser-Entwicklertools die richtigen Selektoren ermitteln
- Schrittweise testen – immer nur einen Selektor ändern und testen
- Speichern und neu laden – Änderungen erfordern ein Neuladen der Seite
Wann Selektoren anpassen
Passen Sie Selektoren nur an, wenn Sie Folgendes feststellen:
- Reservierungen werden bei Änderungen der Warenkorbmenge nicht aktualisiert
- Der Timer erscheint nicht im Warenkorb-Drawer oder auf der Warenkorbseite
- "In den Warenkorb" löst keine Reservierungen aus
- Mengen-Steuerungen werden nicht erkannt
Für Standard-Shopify-Themes sollten die Standardwerte ohne Anpassung funktionieren.