ℹ️ Note: Dieser Artikel wurde automatisch mit AI übersetzt und kann Ungenauigkeiten enthalten. Wenn etwas falsch aussieht, kontaktieren Sie bitte unser Support-Team.

Jedes thema legt seine wagenseite ein wenig anders — so sollte der slot picker genau dort sitzen, wo es sinn macht. Ihr Lager 📍

Mit dem Position Einstellungen in Hoppy Delivery DatesSie können steuern, wo der slot picker auf der wagenseite erscheint, wie er ausgerichtet ist und wie breit er ist - separat für desktop und mobile.

📌 Bevor Sie beginnen

• Hoppy Delivery Dates ist installiert und das App-Embed ist in Ihrem Theme aktiviert
• Sie sind bei Ihrem Shopify Admin
• (fakultativ) Wenn Sie einen benutzerdefinierten CSS-Selektor verwenden möchten, hilft es, die HTML-Struktur Ihres Themes zu kennen - das Inspect-Tool Ihres Browsers ist hier Ihr Freund 🔍

Schritt 1 - Öffnen Sie die Erscheinungsseite

In der App-Navigation gehen Sie zu:

Hoppy Delivery Dates → Aussehen

Finden Sie die Position Karte — es ist die erste Karte auf der Seite.

Schritt 2 - Wählen Sie einen Geräte-Tab

Die Karte hat zwei Tabs:

• Desktop 🖥️
• Mobil 📱

Einstellungen werden separat für jeden gespeichert, so dass Sie die Position für größere und kleinere Bildschirme fein abstimmen können. Konfigurieren Sie einen Tab, wechseln Sie dann zum anderen und wiederholen Sie ihn bei Bedarf.

Schritt 3 — Wählen Wo der Picker erscheint

Unter _"Wo willst du den Datums-Zeit-Picker positionieren?"_Wählen Sie eine der Radiooptionen:

• Standard (vor dem Checkout-Button oder Ende des Warenkorbseitenformulars) → Die App platziert den Picker automatisch in der Nähe Ihres Checkout-Buttons. Dies funktioniert für die meisten Stores sofort, da die App Ihr Theme erkennt und eine passende Platzierung verwendet - keine Konfiguration erforderlich ✅
• Vor einem HTML-Element → Der Picker wird kurz vor dem von Ihnen angegebenen Element platziert
• Zu Beginn eines HTML-Elements → der Picker wird innerhalb des Elements platziert, bevor sein vorhandener Inhalt
• Am Ende eines HTML-Elements → der Picker wird innerhalb des Elements platziert, nach seinem vorhandenen Inhalt
• Nach einem HTML-Element → Der Picker wird direkt nach dem von Ihnen angegebenen Element platziert

Verwenden eines benutzerdefinierten CSS-Selektors

Wahl einer anderen Option als Ausfall Zeigt ein zusätzliches Textfeld an. Geben Sie den CSS-Selektor des Elements ein, auf das Sie abzielen möchten.

• Platzhalterbeispiel: .cart_input
• Klassenbeispiel: .cart-footer
• ID Beispiel: #main-cart-footer

⚠️ Wenn der CSS-Selektor mit keinem Element auf Ihrer Warenkorbseite übereinstimmt, wird der Slot-Picker möglicherweise überhaupt nicht angezeigt. Überprüfen Sie den Selektor mit dem Inspect-Tool Ihres Browsers und sehen Sie sich nach dem Speichern immer die Warenkorbseite an, um zu bestätigen, dass der Picker sichtbar ist.

💡 Wenn der Picker verschwindet, nachdem Sie einen benutzerdefinierten Selektor eingestellt haben, wechseln Sie zurück zu Ausfall und sparen - das ist der schnellste Weg, es wiederherzustellen.

Schritt 4 - Stellen Sie die Ausrichtung ein

Wählen Sie, wie sich der Picker in seinem Container befindet:

• Zentrum
• Links
• rechts

Beispiel

• Ein breites, minimales Thema sieht oft am besten aus mit Zentrum
• Wenn Ihr Warenkorb rechts steht, Links Kann die Dinge im Gleichgewicht halten

Schritt 5 — Setzen Sie die Containerbreite (optional)

Verwendung Breite des Schlitzpflückerbehälters um zu steuern, wie breit der Picker ist:

• Geben Sie eine Zahl in das Breitenfeld ein (z.B. 100)
• Wählen Sie die Einheit aus dem Dropdown daneben: % oder px

Beispiel

• 100 + % → der Picker streckt sich aus, um den verfügbaren Platz zu füllen
• 400 + px → ein kompakter, flächendeckender Picker

ℹ️ Dieses Feld ist optional - lassen Sie es leer, damit der Picker seine natürliche Breite verwenden kann.

Schritt 6 - Speichern und Überprüfen Sie Ihre Storefront

Klicken Sparen Ganz oben auf der Seite.

Öffnen Sie dann die Warenkorbseite Ihres Shops und bestätigen Sie, dass der Picker genau dort sitzt, wo Sie ihn haben möchten. Denken Sie daran, sowohl auf dem Desktop als auch auf dem Handy zu überprüfen, wenn Sie beide Registerkarten konfiguriert haben 👀

⚠️ Wichtige Hinweise

⚠️ Desktop- und Mobile-Positionen sind unabhängig konfiguriert – das Ändern eines Tabs hat keine Auswirkungen auf den anderen.

ℹ️ Die Ausfall Die Option ist themenbewusst: Die App erkennt Ihr Thema und wählt automatisch einen geeigneten Ort aus, so dass es die sicherste Wahl ist, wenn Sie unsicher sind.

⚠️ Ein falscher oder veralteter CSS-Selektor (zum Beispiel nach dem Wechsel von Themes) ist der häufigste Grund, warum der Picker nicht mehr angezeigt wird - überprüfen Sie ihn zuerst, wenn dies geschieht.

🎉 Endergebnis

Einmal erfolgreich konfiguriert:

✅ Der slot picker erscheint genau dort, wo sie ihn auf der wagenseite haben möchten. ✅ Desktop und Mobile erhalten jeweils ihre ideale Platzierung ✅ Ausrichtung und Breite lassen den Picker sich wie ein natürlicher Teil Ihres Themas fühlen ✨

Aktualisiert am: 10/09/2026