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

De slot picker moet voelen als een natuurlijk deel van uw winkel en kleur is de snelste manier om dat te laten gebeuren 🎨

Met de App-widgetkleuren instellingen in Hoppy Delivery Dates, kunt u overeenkomen met de knoppen van de picker, hoogtepunten, en tekst naar uw thema apart 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 App-widgetkleuren kaart.

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

Stap 2 Begrijp de vier kleurinstellingen

Er zijn vier kleuren om mee te werken:

• Primaire kleur → de hoofdkleur accent. Gebruikt voor dingen zoals geselecteerde toestanden, knoppen en de bovenste balk van de picker
• Secundaire kleur → de achtergrondkleur die wordt gebruikt achter pickerelementen
• Primaire lettertypekleur → de tekstkleur gebruikt op secundaire/lichtachtergronden
• Secundaire lettertypekleur → de tekstkleur gebruikt op primaire/accent achtergronden

Standaardkleuren

• Primaire kleur → #3D3D3D (Donker grijs)
• Secundaire kleur → #ffffff (wit)
• Primaire lettertypekleur → #3D3D3D
• Secundaire lettertypekleur → #ffffff

Stap 3 Stel uw kleuren in

Elke kleur heeft twee manieren om het in te stellen:

• Typ een hex-code direct in het tekstveld (bijv. #1a73e8)
• Of klik op de kleur swatch naast het veld om de kleurplukker te openen en visueel te kiezen 🌈

Beide blijven in sync te kiezen uit de swatch updates van de hex veld, en het typen van een hex updates van de swatch.

Voorbeeld

• Primaire kleur → #2c6ecb (Je thema is blauw)
• Secundaire kleur → #ffffff
• Primaire lettertypekleur → #212121
• Secundaire lettertypekleur → #ffffff

💡 De gemakkelijkste manier om een perfecte match te krijgen: kopieer de hex code van de knop kleur van uw thema van Online Store → Thema's → Aanpassen → Thema-instellingen → Kleuren.

Stap 4: Herhaal voor mobiel (facultatief)

Overschakelen naar de Mobiel tabblad en zet daar ook kleuren als je een andere look wilt op kleinere schermen. Zo niet, configureer beide tabbladen met dezelfde waarden voor een consistente verschijning.

Stap 5 Opslaan en evalueren

Klik Opslaan bovenaan de pagina.

Gebruik het voorbeeld paneel aan de rechterkant van de pagina Uiterlijk voor een snelle controle, open dan uw winkelwagen pagina om de kleuren live te zien 👀

⚠️ Belangrijke opmerkingen

⚠️ Zorg ervoor dat uw lettertypekleuren goed contrasteren met hun achtergronden Lichttekst op een lichte achtergrond zal moeilijk zijn voor klanten om te lezen.

ℹ️ Desktop en Mobile kleuren zijn onafhankelijk

🎉 Eindresultaat

Eenmaal succesvol geconfigureerd:

✅ De slot picker komt overeen met uw thema kleuren ✅ Knoppen, hoogtepunten en tekst gebruiken allemaal uw gekozen palet ✅ Desktop en Mobile elk kijken precies zoals je wilt ✨

Bijgewerkt op: 10/09/2026