> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🚀 Wie man den Slot Picker auf der Warenkorbseite positioniert > ℹ️ **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 ✨