> ## 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). # 🎨 Appointment Bookings — Ontwerp- en stylingopties > ℹ️ **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: | Instelling | Bereik | | ----- | ----- | | Kleuren, lettertypen, knoppen, aangepaste CSS | Global \+ per-service | | Aangepast logo | Per-service only | | Floating Action Button | Per-service only (geconfigureerd op het **General tab**) | | Theme editor app block styling | Shopify theme editor only | --- # **🎨 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 ✨