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

Wilt u uw boeking widget om uw winkel te vergelijken branding precies? Hoppy Appointments laat je je eigen CSS toevoegen bovenop de ingebouwde ontwerpinstellingen, zodat je lettertypen, kleuren, afstand, knoppen en meer kunt verfijnen.

Deze gids begeleidt u door het toevoegen en toepassen van aangepaste CSS op de boeking widget.

⚠️ Voordat u begint

Voordat u aangepaste CSS gebruikt, zorg ervoor dat u:

• De Hoppy Appointments app geïnstalleerd op uw Shopify opslag
• Ten minste één actieve dienst
• Basiskennis met CSS-selectoren en -verklaringen

💡 Voor de meeste designwijzigingen gebruiken kleuren, lettertypen, logo's en knoopstijlen de ingebouwde Ontwerp instellingen eerst. Aangepaste CSS is het beste wanneer u wijzigingen nodig heeft de ingebouwde opties niet dekken.

Voor een volledig overzicht van de ingebouwde ontwerpopties, zie Afspraak Boekingen Ontwerp & Styling Opties.

🛠️ Stap 1 Open de aangepaste CSS Editor

Aangepaste CSS kan op twee plaatsen worden beheerd.

Global CSS (wordt standaard op alle diensten toegepast)

1. Open de Hoppy Appointments app
2. Klik Instellingen in het menu App
3. Klik Ontwerp
4. Scroll naar beneden naar de Aangepaste CSS kaart onderaan de pagina

Per dienst CSS (overschrijdt wereldwijde CSS voor één dienst)

1. Open de Hoppy Appointments app
2. Ga naar Diensten
3. Klik op de service die u wilt stijlen
4. Klik op de Ontwerp tab
5. Zorg ervoor dat Standaardthema-instellingen niet volgen moet gecontroleerd worden
6. Scroll naar beneden naar de Aangepaste CSS kaart

🛠️ Stap 2 Kies wereldwijd of service-niveau CSS

Bij het bewerken van CSS op een service Ontwerp tab, zie je een schakelaar:

Standaardthema-instellingen niet volgen

• Uit → de dienst maakt gebruik van de wereldwijde CSS van Instellingen → Ontwerp
• Aan → de dienst maakt gebruik van zijn eigen CSS van het service-niveau Ontwerp tab

Hierdoor kunt u een consistente stijl over alle diensten, of geven specifieke diensten een unieke look.

🛠️ Stap 3 Schrijf uw CSS

De CSS-editor begint met een standaard sjabloon met de meest voorkomende widget-selectoren. U kunt de sjabloon vervangen of uitbreiden met uw eigen regels.

Belangrijkste verpakkingsklassen

Selectie

Wat het doel is

.futureblink-appointment

Het gehele boekingswidget

.futureblink-appointment .dialog

Het hoofdboekvenster (desktop)

.futureblink-appointment.mobile .dialog

Het hoofdboekvenster (mobiel)

.futureblink-appointment .userInfoSection

Het servicedetailspaneel

Gemeenschappelijke selecties kunt u stijl

Selectie

Wat het doel is

.futureblink-appointment .confirm-btn

Bevestig / Boekknop

.futureblink-appointment .continue-btn

Doorgaan knop

.futureblink-appointment .back-btn

Achterknop

.futureblink-appointment .time-slot.selected

Geselecteerde tijdslot

.futureblink-appointment .highlighted_date.react-calendar__tile--active

Geselecteerde agendadatum

.futureblink-appointment .schedule-form

Reserveringsformulier voor klanten

.futureblink-appointment .meeting-booked

Succes / bevestiging pagina

Voorbeeld

.futureblink-appointment .confirm-btn {
achtergrondkleur: #2563eb;
kleur: #ffffff;
grensradius: 8px;
}

.futureblink-apointment.mobile .confirm-btn {
achtergrondkleur: #1d4ed8;
}

ℹ️ Jij wel. niet toe te voegen !important Uw verklaringen. Hoppy Appointments automatisch toevoegen !important wanneer de CSS wordt geïnjecteerd in de widget, die helpt uw regels overschrijven de standaard stijlen.

🛠️ Stap 4

Klik na het invoeren van uw CSS op de Toepassen knop onder de editor.

• Toepassen → maakt de aangepaste CSS en injecteert het in de boeking widget
• Reset → schakelt de aangepaste CSS uit en keert de editor terug naar het standaard sjabloon

⚠️ Aangepaste CSS wordt pas van kracht nadat u klikt Toepassen. Het plakken van CSS in het veld alleen verandert het widget uiterlijk niet.

💾 Stap 5 Opslaan en Voorbeeld

1. Klik Opslaan in de bovenste balk
2. Wacht op het bevestigingsbericht
3. Bekijk het boekingswidget op uw storefront of in het admin previewpaneel

Als u per dienst CSS bewerkt, zorg ervoor dat de Standaardthema-instellingen niet volgen toggle is ingeschakeld, anders wordt de wereldwijde CSS nog steeds gebruikt.

💡 Tips & beste praktijken

• Klein starten Verander één element tegelijk zodat je kunt zien wat elke regel beïnvloedt
• Specifieke selecties gebruiken Doel .futureblink-appointment .your-class in plaats van brede selecties die andere delen van uw winkel kunnen beïnvloeden
• Test op mobiel Gebruik de .futureblink-appointment.mobile voorvoegsel om de mobiele indeling apart aan te passen
• Hou een back-up Kopieer uw werk CSS in een notitiebestand voordat u klikt Reset
• Gebruik eerst de ingebouwde ontwerpinstellingen Kleuren, lettertypen en logo's zijn daar gemakkelijker te beheren en vereisen geen CSS kennis

🐞 Problemen oplossen

Mijn CSS wordt niet getoond op de storefront

1. Zorg ervoor dat u klikt Toepassen in de aangepaste CSS-editor
2. Zorg ervoor dat u klikt Opslaan bovenaan de pagina
3. Voor per dienst CSS, zorg ervoor Standaardthema-instellingen niet volgen is ingeschakeld
4. Controleer of uw selecties overeenkomen met de werkelijke widget klassenamen
5. Uw browsercache wissen of testen in een incognito venster

Het widget keerde terug naar de standaard look

Klikken Reset schakelt het CSS uit en herstelt het standaard template. Als u uw aangepaste regels terug wilt, plak ze dan opnieuw en klik Toepassen.

Sommige regels werken niet

De auto !important injectie werkt het beste met eenvoudig property: value; verklaringen. Zeer complexe CSS, zoals @media vragen; @keyframes, of nested selectors kunnen niet betrouwbaar worden getransformeerd. Houd uw regels recht voor de meest consistente resultaten.

📚 Gerelateerde artikelen

• Afspraak Boekingen Ontwerp & Styling Opties
• Hoe vergaderlocaties voor afsprakenboeken instellen
• Hoe kan ik afspraken boeken diensten instellen

Bijgewerkt op: 10/09/2026