> ## 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).

# 🚀 Hoe aan te passen ruimte rond de Slot Picker

> ℹ️ **Note:** Dit artikel is automatisch vertaald met behulp van AI en kan onjuistheden bevatten. Als er iets mis is, neem dan contact op met ons ondersteuningsteam.

Soms zit de sleuf picker een beetje te dicht bij de elementen eromheen of voelt kramp in zijn eigen container. Een paar pixels van ademruimte kan het kijken direct thuis op uw winkelwagen pagina 📐

Met de **Spatiëring** instellingen in Hoppy Delivery Dates, kunt u de marges rond elk deel van de picker apart aanpassen voor Desktop en Mobile.

---

# **📌 Voordat u begint**

*   Hoppy Delivery Dates is geïnstalleerd en de app embed is ingeschakeld in uw thema
*   De slot picker is zichtbaar op uw winkelwagen pagina
*   Je bent ingelogd bij je Shopify admin

---

# **Stap 1 Open de verschijningspagina**

Ga in de appnavigatie naar:

**Hoppy Delivery Dates → Uiterlijk**

Zoek de **Spatiëring** kaart.

De kaart heeft **Bureaublad** en **Mobiel** De tabbladen worden apart voor elk apparaat geconfigureerd.

---

# **Stap 2 Begrijp de vier ruimtegroepen**

De kaart is verdeeld in vier groepen, en elk bestuurt de marge rond een ander deel van de picker:

*   **AFDELINGSMARGE** → ruimte rond de hele slot picker sectie
*   **RUBRIEKMARGE** → ruimte rond de koptekst (bijv. "Wanneer wilt u deze orde krijgen?")
*   **MARGE VOOR DATUM EN TERMIJN** → ruimte rond de datum- en tijdinvoervakjes
*   **FOUTBERICHT MARGE** → ruimte rond foutmeldingen (getoond wanneer een klant geen slot heeft geselecteerd of onder de minimale orderwaarde ligt)

Elke groep heeft dezelfde vier velden, allemaal in pixels:

*   **Boven**
*   **Onder**
*   **Links**
*   **Rechts**

ℹ️ Alle velden standaard `10` px.

---

# **Stap 3**

Voer het aantal pixels in dat u wilt in elk veld

### **Voorbeeld**

*   De picker raakt de kassaknop → verhogen **SECTIE MARGE → Boven** tot `24`
*   De kop voelt gelijmd aan de datum doos → verhogen **RUBRIEK MARGE → Onder** tot `16`
*   Op mobiel, de picker dozen stretch edge to side → set **Datum & tijd picker margin → Links** en **Rechts** tot `0`

💡 Maak kleine wijzigingen (5

---

# **Stap 4: Herhaal voor mobiel (facultatief)**

Overschakelen naar de **Mobiel** tab indien kleinere schermen een andere afstand nodig hebben. Mobiele lay-outs hebben vaak strakkere marges nodig dan desktop, dus het is een snelle controle waard.

---

# **Stap 5 Opslaan en evalueren**

Klik **Opslaan** bovenaan de pagina.

Open dan de winkel Cart pagina en controleer de afstand op zowel desktop als mobiel 👀

---

# **⚠️ Belangrijke opmerkingen**

⚠️ Desktop en Mobiele afstand zijn onafhankelijk

ℹ️ Deze instellingen hebben alleen controlemarges (ruimte _buiten_ elk element). Ze veranderen niet de grootte van de picker zelf voor dat, zie de **Slot picker container breedte** instelling bedekt in Hoe de Slot Picker positie op de winkelwagen pagina.

---

# **🎉 Eindresultaat**

Eenmaal succesvol geconfigureerd:

✅ De slot picker heeft comfortabele ruimte rond het op de winkelwagen pagina ✅ De kop, datum en tijd vakken, en foutmeldingen voelen niet langer krap ✅ Desktop en mobiel krijgen elk afstand die past bij hun schermgrootte ✨