ℹ️ 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 ✨

Bijgewerkt op: 10/09/2026