> ## 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 plaats je de Slot Picker op de winkelwagen pagina

> ℹ️ **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.

Elk thema lays out zijn winkelwagen pagina een beetje anders _uw_ opslag 📍

Met de **Positie** instellingen in Hoppy Delivery Dates, kunt u controleren waar de slot picker verschijnt op de winkelwagen pagina, hoe het is uitgelijnd, en hoe breed het is . .

---

# **📌 Voordat u begint**

*   Hoppy Delivery Dates is geïnstalleerd en de app embed is ingeschakeld in uw thema
*   Je bent ingelogd bij je Shopify admin
*   (facultatief) Als u van plan bent om een aangepaste CSS-selector te gebruiken, helpt het om de HTML structuur van uw thema's te kennen. 🔍

---

# **Stap 1 Open de verschijningspagina**

Ga in de appnavigatie naar:

**Hoppy Delivery Dates → Uiterlijk**

Zoek de **Positie** Het is de eerste kaart op de pagina.

---

# **Stap 2 Kies een apparaattabblad**

De kaart heeft twee tabbladen:

*   **Bureaublad** 🖥️
*   **Mobiel** 📱

Instellingen worden apart opgeslagen voor elk, zodat u de positie voor grotere en kleinere schermen kunt verfijnen. Het ene tabblad configureren, dan naar het andere schakelen en indien nodig herhalen.

---

# **Stap 3 Kies Waar de Picker verschijnt**

Onder _"Waar wilt u de datum tijd picker?"_, kies een van de radio-opties:

*   **Standaard (voor afrekenen knop of einde van de winkelwagen pagina formulier)** → de app plaatst automatisch de picker in de buurt van uw kassaknop. Dit werkt uit de doos voor de meeste winkels, omdat de app detecteert uw thema en maakt gebruik van een bijpassende plaatsing ✅
*   **Voor een HTML-element** → de picker wordt geplaatst vlak voor het element dat u opgeeft
*   **Aan het begin van een HTML-element** → de picker wordt geplaatst in het element, voordat de bestaande inhoud
*   **Aan het einde van een HTML-element** → de picker wordt geplaatst in het element, na de bestaande inhoud
*   **Na een HTML-element** → de picker wordt geplaatst net na het element dat u opgeeft

### **Een aangepaste CSS-selector gebruiken**

Kies een andere optie dan **Standaard** onthult een extra tekstveld. Voer de CSS-selector in van het element dat u wilt gebruiken.

*   Plaatshoudervoorbeeld: `.cart_input`
*   Klassevoorbeeld: `.cart-footer`
*   ID voorbeeld: `#main-cart-footer`

⚠️ Als de CSS-selector niet overeenkomt met een element op uw winkelwagen pagina, de slot picker kan helemaal niet verschijnen. Controleer de selectie opnieuw met behulp van de Inspect tool van uw browser, en bekijk altijd de winkelwagen pagina na het opslaan om te bevestigen dat de picker zichtbaar is.

💡 Als de picker verdwijnt nadat u een aangepaste selector hebt ingesteld, schakel dan terug naar **Standaard** en op te slaan dat is de snelste manier om het te herstellen.

---

# **Stap 4 Stel de uitlijning in**

Kies hoe de picker zich in de container bevindt:

*   **Midden**
*   **Links**
*   **Rechts**

### **Voorbeeld**

*   Een breed, minimaal thema ziet er vaak het beste met **Midden**
*   Als uw karren overzicht aan de rechterkant, **Links** kan dingen evenwichtig houden

---

# **Stap 5 Stel de Containerbreedte in (facultatief)**

Gebruik **Slot picker container breedte** om te controleren hoe breed de picker is:

*   Voer een getal in in het breedteveld (bijv. `100`)
*   Kies de eenheid uit de dropdown ernaast: **%** of **px**

### **Voorbeeld**

*   `100` + `%` → de picker strekt zich uit om de beschikbare ruimte te vullen
*   `400` + `px` → een compacte, vaste-breedte picker

ℹ️ Dit veld is optioneel

---

# **Stap 6 Opslaan en controleren van uw storefront**

Klik **Opslaan** bovenaan de pagina.

Open dan de winkel winkelwagen pagina en bevestig dat de picker zit precies waar je het wilde. Vergeet niet om te controleren op zowel bureaublad als mobiel als u beide tabbladen geconfigureerd 👀

---

# **⚠️ Belangrijke opmerkingen**

⚠️ Desktop- en mobiele posities zijn onafhankelijk geconfigureerd en veranderen van het ene tabblad heeft geen invloed op het andere.

ℹ️ De **Standaard** optie is thema-bewust: de app detecteert uw thema en kiest automatisch een geschikte plek, dus het is de veiligste keuze als je onzeker bent.

⚠️ Een verkeerde of verouderde CSS-selector (bijvoorbeeld, na het schakelen van thema's) is de meest voorkomende reden dat de picker stopt met het tonen van de

---

# **🎉 Eindresultaat**

Eenmaal succesvol geconfigureerd:

✅ De slot picker verschijnt precies waar u wilt het op de winkelwagen pagina ✅ Desktop en Mobile krijgen elk hun ideale plaatsing ✅ Uitlijning en breedte maken de picker voelen als een natuurlijk onderdeel van uw thema ✨