Warenkorb-Schublade
Für Plain Jane und Plain Jane Interactive
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
Gehen Sie zu Theme-Einstellungen > Warenkorb-Schublade
Schalten Sie Warenkorb-Schublade aktivieren auf
einKonfigurieren 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:
320pxOptimiert 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
Zuletzt aktualisiert