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

Hoppy Appointments heeft een compleet ontwerpsysteem, zodat je boekingswidget, succespagina's, pagina voor het opnieuw inplannen en annuleringspagina passen bij de stijl van je winkel.

Je kunt kleuren, lettertypen, knoppen, achtergronden en zelfs aangepaste afbeeldingen beheren. Alles wordt beheerd op twee plaatsen:

• Settings → Design → Standaardwaarden voor de hele winkel die gelden voor elke service
• Service → Design tab → Per-service overschrijvingen als je wilt dat één service er anders uitziet

Deze gids legt elke ontwerpinstelling uit, wanneer deze verschijnt en hoe deze de winkel beïnvloedt.

⚠️ Before You Begin

Ontwerpinstellingen worden beheerd via:

• Hoppy Appointments → Settings → Default Design voor globale standaardwaarden
• Hoppy Appointments → Services → [your service] → Design voor per-service overschrijvingen

Controleer voordat je de widget vormgeeft het volgende:

• De Hoppy Appointments-app is geïnstalleerd
• Je hebt minstens één service aangemaakt
• De Appointment Bookings app embed is ingeschakeld in je Shopify-thema

ℹ️ Zonder dat de app embed is ingeschakeld, zien klanten de boekingswidget helemaal niet — hoe mooi je ontwerpinstellingen ook zijn.

Raadpleeg de troubleshootinggids Calendar Not Showing als je hulp nodig hebt bij het inschakelen van de embed.

🌐 Global vs Per-Service Design

Global Design (Settings → Design)

Dit is je standaardinstelling voor de hele winkel. Elke nieuwe service gebruikt automatisch deze kleuren, lettertypen en stijlen, tenzij je anders aangeeft.

Gebruik dit als je een consistente uitstraling wilt voor al je boekbare services.

Per-Service Design (Service → Design tab)

Elke service heeft een selectievakje met het label:

Do not Follow Default Theme Settings (Niet de standaard thema-instellingen volgen)

• Niet aangevinkt → De service gebruikt het globale ontwerp. Alle kleur-/lettertypevelden zijn verborgen om het eenvoudig te houden.
• Aangevinkt → De volledige ontwerpeditor verschijnt en deze service gebruikt zijn eigen styling in plaats van de globale standaardwaarden.

💡 Gebruik per-service ontwerp als één service er anders uit moet zien — bijvoorbeeld een premium consult met een donkerder thema of een feestdag-gerichte les.

What Is Controlled Where

De meeste ontwerpinstellingen bestaan zowel globaal als per-service, maar een paar zijn alleen per-service:

🎨 The Design Tabs

De ontwerpeditor is opgedeeld in tabbladen. Elk tabblad beheert een ander scherm dat klanten zien.

📅 Booking Page

Dit tabblad beheert de hoofdboekingswidget — de kalender, tijdslots, formulier en navigatieknoppen.

Font

Kies het lettertype dat in de hele widget wordt gebruikt. De app ondersteunt tientallen Google Fonts en veelgebruikte systeemlettertypen.

• System fonts (zoals Arial of Helvetica) worden direct van het apparaat van de klant geladen
• Google Fonts worden automatisch geladen wanneer ze zijn geselecteerd

Als een lettertype niet kan worden geladen, valt de widget terug op een veilige standaardwaarde.

Background Colors

• Outer background color → Het gebied achter de boekingswidget
• Info section background color → Het linkerpaneel dat de service-afbeelding, titel en prijs toont
• Card background color → De hoofdcard die de kalender en het formulier bevat

Met deze drie lagen kun je diepte en scheiding creëren binnen de widget.

Text & Icons

• Text color → De standaardkleur voor de meeste tekst in de widget
• Icons color → De kleur die wordt gebruikt voor kleine iconen zoals pijlen en vinkjes

Selected Date & Time Slot

• Selected background color → De kleur achter een gekozen datum of tijdslot
• Selected text color → De kleur van de tekst op de geselecteerde datum of tijdslot

Dit helpt klanten duidelijk te zien wat ze hebben gekozen.

Buttons

• Confirm button → Achtergrond- en tekstkleur voor de primaire actie
• Back button → Achtergrond- en tekstkleur voor het teruggaan een stap
• Continue button → Achtergrond- en tekstkleur voor flows met meerdere stappen

Elke knop kan onafhankelijk worden vormgegeven, zodat je deze kunt afstemmen op de knophiërarchie van je winkel.

🎉 Success Page

Dit tabblad beheert het scherm dat klanten zien na een gratis of bevestigde boeking.

• Heading size / color
• Description size / color
• Details size / color → Voor samenvattingstekst van de boeking
• Button text size / background color / text color → De CTA-knop op het succesvenster
• Icons color
• Custom image → Vervang de standaard succesillustratie door je eigen afbeelding

💡 Het uploaden van een aangepaste succesafbeelding is een leuke manier om je merk te versterken of de boeking te vieren met een vriendelijke afbeelding.

🔄 Rescheduling Page

Dit tabblad heeft twee binnensecties:

• Reschedule Form → Het scherm waar klanten een nieuwe tijd kiezen
• Success Page → Het bevestigingsscherm nadat het opnieuw inplannen is voltooid

Elke sectie heeft dezelfde soorten bedieningselementen als het hoofdtabblad Success Page:

• Heading size / color
• Message text size / color
• Details size / color
• Button size and colors
• Icons color
• Custom image

❌ Cancel Page

Dit tabblad heeft ook twee binnensecties:

• Cancel Form → Het scherm waar klanten bevestigen dat ze willen annuleren
• Success Page → Het bevestigingsscherm nadat een annulering is voltooid

Het bevat dezelfde stylingbedieningselementen als het tabblad Rescheduling Page.

🖼️ Custom Logo

ℹ️ Deze instelling is alleen beschikbaar op het tabblad per-service Design.

Schakel Custom logo in om de productafbeelding in de boekingswidget te vervangen door je eigen geüploade logo of afbeelding.

• Aanbevolen voor consistente branding
• Afbeeldinguploads zijn beperkt tot 1 MB
• Geaccepteerde formaten zijn GIF, JPEG, PNG en WebP

🧑‍💻 Custom CSS

Voor verkopers die pixelperfecte controle willen, bevatten zowel de globale als per-service ontwerppagina's een Custom CSS-editor.

• Plak je eigen CSS in de editor
• Klik op Apply om deze te activeren in de winkel
• Klik op Reset om het standaard CSS-sjabloon te herstellen en je wijzigingen te deactiveren

De editor wordt geleverd met een standaardsjabloon dat veelvoorkomende selectors toont die je kunt targeten, zoals:

• De outer widget container
• De dialog card
• De info section
• Geselecteerde kalenderdatums en tijdslots
• Confirm-, back- en continue-knoppen
• Mobielspecifieke varianten

⚠️ Belangrijk:

• Aangepaste CSS wordt alleen toegepast wanneer je op Apply klikt
• Als een service het standaardthema volgt, gebruikt deze de globale aangepaste CSS
• Als een service zijn eigen ontwerp gebruikt, gebruikt deze zijn eigen per-service aangepaste CSS
• De app voegt automatisch !important toe aan CSS-declaraties om deze te helpen themastijlen te overschrijven

💡 Aangepaste CSS is geweldig voor geavanceerde aanpassingen, maar de meeste verkopers krijgen precies het gewenste uiterlijk met alleen de kleur- en lettertypekiezers.

🔘 Floating Action Button

ℹ️ De Floating Action Button wordt geconfigureerd op het General tab van een service, niet op het Design tab. Het is hier opgenomen omdat het eigen stylingopties heeft.

Schakel de Floating Action Button in om een vaste Book Now-knop weer te geven die klanten volgt terwijl ze door je winkel scrollen.

Wanneer ingeschakeld, kun je het volgende aanpassen:

• Button text → Standaard is dit “Book Now”
• Position → Rechtsonder, linksonder of middenonder
• Background color
• Text color

Dit is handig als je wilt dat klanten kunnen boeken vanaf elke pagina, niet alleen de productpagina.

Raadpleeg de documentatie Service Setup voor volledige details over het inschakelen en plaatsen van de zwevende knop.

🧩 Theme Editor App Block Styling

Als je het Appointment Calendar-blok toevoegt via de Shopify theme editor, krijg je aanvullende stylingopties die onafhankelijk zijn van de app-admin.

Deze instellingen beheersen de card of knop die de boekingsmodal opent:

• Title color / font size
• Price color / font size
• Option color / font size
• View details button → Weergeven/verbergen, tekst, kleuren, lettergrootte
• Book Now button → Achtergrond, tekstkleur, lettergrootte
• Block background color

⚠️ Belangrijk:

Deze instellingen stylen alleen het blok op de pagina. De modal die opent, gebruikt nog steeds de ontwerpinstellingen van Settings → Design of het tabblad Design van de service.

Sommige blokinstellingen verschijnen alleen wanneer het blok is ingesteld op de modus Modal.

🖥️ How Styling Appears on the Storefront

De boekingswidget wordt geladen in een iframe in je winkel. De iframe haalt de door jou geconfigureerde ontwerpinstellingen op en past deze toe op:

• De outer widget-achtergrond
• De info panel- en card-achtergronden
• Alle tekst en iconen
• Geselecteerde kalenderdatums en tijdslots
• De Confirm-, Back- en Continue-knoppen
• De Success-, Rescheduling- en Cancel-pagina's
• Plaatsing van aangepast logo
• Overschrijvingen van aangepaste CSS

Lettertypen worden dynamisch geladen. Google Fonts worden opgehaald van de servers van Google, terwijl systeemlettertypen worden geladen van het apparaat van de klant.

Als een lettertype niet kan worden geladen of een kleur ontbreekt, valt de widget terug op veilige standaardwaarden, zodat de boekingservaring bruikbaar blijft.

⚠️ Important Notes & Limitations

• Globaal ontwerp is de standaard. Nieuwe services volgen automatisch het globale thema, tenzij je Do not Follow Default Theme Settings aanvinkt.
• Aangepaste CSS moet worden toegepast. CSS in de editor typen doet niets totdat je op Apply klikt.
• Per-service CSS wordt alleen toegepast wanneer de service zijn eigen ontwerp gebruikt. Als een service het globale thema volgt, negeert deze zijn eigen aangepaste CSS-veld.
• Aangepast logo is alleen per-service. Er is geen globale instelling voor aangepast logo.
• Afbeeldinguploads zijn beperkt tot 1 MB. Grotere afbeeldingen moeten worden gecomprimeerd voordat ze worden geüpload.
• Theme editor blokinstellingen zijn apart. Het stylen van het Appointment Calendar-blok in Shopify wijzigt niet het interieur van de modal.
• De achtergrond van de modal-wrapper wordt door het thema beheerst. Het gebied achter de popup-modal wordt gestyled door de thema-extensie-CSS, niet door de ontwerpinstellingen in de app-admin.
• App embed moet zijn ingeschakeld. Ontwerpinstellingen verschijnen alleen in de winkel als de Appointment Bookings app embed is ingeschakeld in je thema.

💡 Common Use Cases

Match the widget to your store branding

• Ga naar Settings → Design
• Stel de Outer background color, Card background color en Text color in zodat deze overeenkomen met je winkel
• Kies een lettertype dat bij je thema past
• Style de Confirm button zodat deze overeenkomt met je primaire CTA

Resultaat: Elke service ziet eruit als een natuurlijk onderdeel van je winkel.

One service with a different look

• Open de service → tabblad Design
• Vink Do not Follow Default Theme Settings aan
• Wijzig de kleuren en upload een Custom logo

Resultaat: Alleen die service gebruikt de aangepaste styling. Alle andere services behouden het globale ontwerp.

Custom success page image

• Open Settings → Design → Success Page
• Upload een aangepaste afbeelding onder Custom image

Resultaat: Klanten zien je branded illustratie na het boeken in plaats van de standaardillustratie.

Advanced layout tweak

• Open Settings → Design
• Vouw de Custom CSS-editor uit
• Voeg je CSS toe en klik op Apply

Resultaat: Je kunt specifieke widget-elementen targeten die niet worden gedekt door de kleurkiezers.

🎉 Final Result

Zodra je ontwerpinstellingen zijn geconfigureerd:

✅ De boekingswidget komt overeen met de kleuren en lettertypen van je winkel
✅ De Success-, Rescheduling- en Cancel-pagina's zien er consistent met je merk uit
✅ Per-service overschrijvingen laten individuele services opvallen wanneer nodig
✅ Aangepaste logo's en afbeeldingen voegen een persoonlijk tintje toe
✅ Aangepaste CSS geeft je volledige controle over geavanceerde styling
✅ Klanten krijgen een gepolijste, professionele boekingservaring 🎨

Met de juiste ontwerpinrichting voelt het maken van een afspraak aan als een naadloos onderdeel van je Shopify-winkel ✨

Bijgewerkt op: 10/09/2026