# Warenkorb-Schublade > **Was Sie lernen werden** > > * So aktivieren und gestalten Sie die herausfahrbare Warenkorb-Schublade > * Erweiterte Anpassungsoptionen einschließlich Hintergründen und FOMO-Timern > * So optimieren Sie das Warenkorb-Erlebnis für bessere Konversionen *** ## 📋 Übersicht Die **Warenkorb-Schublade** ist ein herausfahrbares Panel, das erscheint, wenn ein Kunde ein Produkt in seinen Warenkorb legt. Es bietet einen verbesserten Einkaufsablauf, indem es Nutzern erlaubt, ihren Warenkorb zu überprüfen, ohne die aktuelle Seite zu verlassen, wodurch die Konversionsraten steigen und die Benutzererfahrung verbessert wird. > 💡 **Hinweis**: Dies ersetzt die traditionelle Warenkorbseite. Sie können entweder die Warenkorb-Schublade oder die Warenkorbseite verwenden, jedoch nicht beides gleichzeitig. *** ## 🔧 So aktivieren Sie 1. Gehen Sie zu **Theme-Einstellungen** > **Warenkorb-Schublade** 2. Schalten Sie **Warenkorb-Schublade aktivieren** auf `ein` 3. Konfigurieren Sie die unten stehenden Anpassungsoptionen *** ## 🎨 Grundlegende Stiloptionen ### **Farben & Erscheinungsbild** **Hintergrundfarbe** * Passen Sie den Hintergrund des Hauptschubladen-Panels an * Standard: `#ffffff` (weiß) * Unterstützt jeden Hex-Farbwert **Textfarbe** * Steuert die allgemeine Textfarbe innerhalb der Schublade * Standard: `#000000` (schwarz) * Betroffen sind Produktnamen, Mengen und allgemeiner Inhalt **Schaltflächen-Styling** * **Schaltflächenfarbe**: Hintergrund der primären Aktionsschaltfläche (In den Warenkorb, Zur Kasse) * **Schaltflächen-Textfarbe**: Textfarbe auf Schaltflächen * Standard: Schwarzer Hintergrund mit weißem Text ### **Schubladenabmessungen** **Schubladenbreite** * Einstellbare Breite von 300px bis 320px * Standard: `320px` * Optimiert für die Ansicht auf Mobilgeräten und Desktop *** ## ⏰ FOMO-Timer-Funktion Erzeugen Sie Dringlichkeit und fördern Sie schnellere Kaufentscheidungen mit dem integrierten FOMO (Fear of Missing Out)-Timer. ### **Timer-Konfiguration** **FOMO-Timer anzeigen** * Umschalten, um den Dringlichkeitstimer zu aktivieren/deaktivieren * Standard: Aktiviert **Timer-Styling** * **Hintergrundfarbe des FOMO-Timers**: Hintergrund des Warnbanners (Standard: `#ffeb3b` - gelb) * **Textfarbe des FOMO-Timers**: Textfarbe des Timers (Standard: `#333333` - dunkelgrau) **Timer-Inhalt** * **FOMO-Timer-Text**: Anpassbare Dringlichkeitsnachricht * Standard: "Angebot endet in:" * Beispiele: "Zeitlich begrenztes Angebot!", "Warenkorb läuft bald ab!", "Beeilen Sie sich! Nur noch wenige verfügbar!" **Timer-Dauer** * **FOMO-Timer-Dauer**: Stellen Sie die Countdown-Zeit ein (1–72 Stunden) * Standard: 24 Stunden * Der Timer setzt sich bei jeder neuen Warenkorbsitzung zurück *** ## 💰 Preis- & Währungsoptionen ### **Währungsanzeige** **Preis mit Währung anzeigen** * Umschalten, um Währungssymbole/-codes zusammen mit Preisen anzuzeigen * Standard: Deaktiviert (zeigt Preise ohne Währungskennzeichen) * Nützlich für internationale Shops oder Mehrwährungs-Setups *** ## 🖼️ Erweiterte Hintergrundanpassung ### **Hintergrund der Warenkorb-Elemente** Verwandeln Sie Ihre Warenkorb-Schublade mit benutzerdefinierten Hintergrundbildern: **Hintergrundbild** * Laden Sie ein benutzerdefiniertes Hintergrundbild für den Bereich der Warenkorb-Elemente hoch * Unterstützt Standardbildformate (JPG, PNG, WebP) * Empfohlene Größe: 500x600px oder größer **Optionen für Hintergrundgröße** * **Cover**: Skaliert das Bild, um den gesamten Bereich abzudecken (kann zuschneiden) * **Contain**: Skaliert das Bild, um in den Bereich zu passen (zeigt das gesamte Bild) * **Auto**: Verwendet die natürliche Größe des Bildes **Hintergrundposition** * **Zentriert**: Zentriert das Bild im verfügbaren Bereich * **Oben links**: Positioniert das Bild in der oberen linken Ecke * **Oben rechts**: Positioniert das Bild in der oberen rechten Ecke * **Unten links**: Positioniert das Bild in der unteren linken Ecke * **Unten rechts**: Positioniert das Bild in der unteren rechten Ecke *** ## 🚀 Best Practices ### **Design-Empfehlungen** **Farbharmonie** * Verwenden Sie Farben, die Ihr Gesamtthema ergänzen * Stellen Sie ausreichenden Kontrast für Barrierefreiheit sicher * Testen Sie die Lesbarkeit auf verschiedenen Geräten **Verwendung des FOMO-Timers** * Sparsam einsetzen, um die Wirksamkeit zu erhalten * Wählen Sie dringende, aber nicht aggressive Formulierungen * Testen Sie verschiedene Dauereinstellungen für Ihre Zielgruppe **Hintergrundbilder** * Verwenden Sie dezente, kontrastarme Bilder, die den Text nicht beeinträchtigen * Optimieren Sie die Bilddateigrößen für schnelleres Laden * Berücksichtigen Sie die mobile Ansicht ### **Conversion-Optimierung** **Klare Call-to-Actions** * Machen Sie Checkout-Schaltflächen prominent und zugänglich * Verwenden Sie kontrastreiche Farben für wichtige Schaltflächen * Halten Sie den Kaufprozess einfach und eindeutig **Mobile Erfahrung** * Testen Sie die Funktionsweise der Schublade auf echten Mobilgeräten * Stellen Sie sicher, dass Touch-Ziele angemessen groß sind * Überprüfen Sie, dass der Text auf kleineren Bildschirmen lesbar bleibt **Ladeleistung** * Optimieren Sie Hintergrundbilder für das Web * Testen Sie die Öffnungsgeschwindigkeit der Schublade bei langsameren Verbindungen * Überwachen Sie die Auswirkungen auf die Gesamtseitenleistung *** ## 🔧 Fehlerbehebung ### **Häufige Probleme** **Schublade erscheint nicht** * Vergewissern Sie sich, dass "Warenkorb-Schublade aktivieren" eingeschaltet ist * Prüfen Sie, ob die Warenkorbseite im Konflikt steht * Testen Sie das Hinzufügen von Produkten, um die Schublade auszulösen **FOMO-Timer funktioniert nicht** * Stellen Sie sicher, dass der Timer in den Einstellungen aktiviert ist * Prüfen Sie die Unterstützung von localStorage im Browser * Vergewissern Sie sich, dass die Timer-Dauer korrekt eingestellt ist **Probleme mit dem Hintergrundbild** * Bestätigen Sie, dass das Bild korrekt hochgeladen wurde * Prüfen Sie Bilddateigröße und -format * Testen Sie verschiedene Einstellungen für die Hintergrundgröße **Anzeigeprobleme auf Mobilgeräten** * Testen Sie auf echten Mobilgeräten * Überprüfen Sie die Schubladenbreite auf kleineren Bildschirmen * Vergewissern Sie sich, dass die Touch-Funktionalität ordnungsgemäß funktioniert *** ## 📱 Mobile Überlegungen * Die Schublade passt sich automatisch an mobile Bildschirmgrößen an * Touch-freundliche Bedienelemente und Schaltflächen * Optimierter Abstand für Finger-Navigation * Vereinfachtes Layout für kleinere Bildschirme *** ## ⚡ Performance-Tipps * Halten Sie Hintergrundbilder nach Möglichkeit unter 200 KB * Verwenden Sie das WebP-Format für bessere Kompression * Testen Sie Ladezeiten mit verschiedenen Netzwerkgeschwindigkeiten * Überwachen Sie die Auswirkungen auf die Gesamtleistung der Seite *** --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.openspaces.design/german/readme-1/theme-settings/cart-drawer.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.