> ## 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 Abstand um den Slot Picker anpasst

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

Manchmal sitzt der slot picker etwas zu nah an den elementen um ihn herum - oder fühlt sich in seinem eigenen behälter eng. Ein paar Pixel Atemraum können es wie zu Hause auf Ihrer Warenkorbseite aussehen lassen 📐

Mit dem **Abstand** Einstellungen in Hoppy Delivery DatesSie können die Ränder um jeden Teil des Pickers anpassen - separat für Desktop und Mobile.

---

# **📌 Bevor Sie beginnen**

*   Hoppy Delivery Dates ist installiert und das App-Embed ist in Ihrem Theme aktiviert
*   Der slot picker ist auf ihrer wagenseite sichtbar.
*   Sie sind bei Ihrem Shopify Admin

---

# **Schritt 1 - Öffnen Sie die Erscheinungsseite**

In der App-Navigation gehen Sie zu:

**Hoppy Delivery Dates → Aussehen**

Finden Sie die **Abstand** Karte.

Die Karte hat **Desktop** und **Mobil** Tabs — Abstand wird für jedes Gerät separat konfiguriert.

---

# **Schritt 2 - Verstehen Sie die vier Abstandsgruppen**

Die Karte ist in vier Gruppen unterteilt, und jede kontrolliert den Rand um einen anderen Teil des Pickers:

*   **ABSCHNITTSPANNE** → Raum um den gesamten Slot Picker-Abschnitt
*   **HAUPTMASCHINE** → Raum um den Überschriftstext (z.B. "Wann möchten Sie diese Bestellung erhalten?")
*   **DATE & TIME PICKER MARGIN** → Platz um die Datums- und Zeiteingabeboxen
*   **FEHLERMELDUNG** → Platz um Fehlermeldungen (zeigt an, wenn ein Kunde keinen Slot ausgewählt hat oder unter dem Mindestbestellwert liegt)

Jede Gruppe hat die gleichen vier Felder, alle in Pixeln:

*   **oben**
*   **Boden**
*   **Links**
*   **rechts**

ℹ️ Alle Felder sind standardmäßig `10` px.

---

# **Schritt 3 - Anpassung der Margen**

Geben Sie die Anzahl der gewünschten Pixel in jedem Feld ein - Sie müssen nicht "px" eingeben, es wird automatisch hinzugefügt.

### **Beispiel**

*   Der Picker berührt den Checkout-Button → erhöhen **ABSCHNITTSÄTZE → Top** bis `24`
*   Die Überschrift fühlt sich an die Datumsbox geklebt → erhöhen **HAUPTMASCHINE** bis `16`
*   Auf dem Handy strecken sich die Pickerboxen von Kante zu Kante → set **DATE & TIME PICKER MARGIN → Links** und **rechts** bis `0`

💡 Nehmen Sie kleine Änderungen vor (5-10 px auf einmal), speichern und überprüfen Sie Ihre Warenkorbseite - der Abstand ist auf der Live-Seite viel einfacher zu beurteilen als in den Feldern.

---

# **Schritt 4 — Wiederholen für Mobilgeräte (optional)**

Wechsel zum **Mobil** Tab, wenn kleinere Bildschirme unterschiedlichen Abstand benötigen. Mobile Layouts benötigen oft engere Margen als Desktops, daher lohnt sich eine schnelle Überprüfung.

---

# **Schritt 5 — Speichern und Überprüfen**

Klicken **Sparen** Ganz oben auf der Seite.

Öffnen Sie dann die Warenkorbseite Ihres Shops und überprüfen Sie den Abstand sowohl auf dem Desktop als auch auf dem Handy 👀

---

# **⚠️ Wichtige Hinweise**

⚠️ Der Desktop- und Mobile-Abstand ist unabhängig – das Ändern eines Tabs hat keinen Einfluss auf den anderen.

ℹ️ Diese Einstellungen kontrollieren nur Margen (Raum) _außen_ jedes Element. Sie ändern nicht die Größe des Pickers selbst - dafür sehen Sie die **Breite des Schlitzpflückerbehälters** Einstellung abgedeckt in wie man den slot picker auf der wagenseite positioniert.

---

# **🎉 Endergebnis**

Einmal erfolgreich konfiguriert:

✅ Der slot picker hat bequemen platz um ihn herum auf der wagenseite. ✅ Die Überschrift, Datums- und Zeitfelder und Fehlermeldungen fühlen sich nicht mehr eng an ✅ Desktop und Mobile erhalten jeweils einen Abstand, der ihrer Bildschirmgröße entspricht ✨