ℹ️ 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 boekingskalender werkt meestal meteen na de installatie — maar soms kan een kleine configuratie-, thema- of beschikbaarheidsinstelling voorkomen dat deze in je winkel verschijnt.

Het goede nieuws is dat deze problemen meestal heel snel op te lossen zijn 🚀

Deze gids doorloopt de meest voorkomende redenen waarom de boekingskalender (of de knop Book Now (Nu boeken)) mogelijk niet wordt weergegeven, en hoe je elk probleem stap voor stap oplost.

In de meeste gevallen heeft het probleem te maken met een van de volgende zaken:

• App Embed is uitgeschakeld
• De service is niet opgeslagen, is uitgeschakeld of gearchiveerd
• Je bekijkt de verkeerde productpagina of variant
• Productvarianten zijn gewijzigd nadat de service was aangemaakt
• Je bekijkt een voorbeeld van een conceptthema (niet gepubliceerd)
• Conflicten met een aangepast thema of paginabouwer
• Beschikbaarheidsinstellingen verbergen alle datums
• Tijdsloten zijn volgeboekt of boekingslimieten zijn bereikt
• Browser- of winkelcache

Laten we ze één voor één doornemen 👇

✅ Stap 1: Controleer of App Embed is ingeschakeld

Opdat de boekingskalender wordt weergegeven, moet de app embed zijn ingeschakeld in je Shopify-thema. Dit is de meest voorkomende oorzaak.

De snelste manier om dit te controleren, is in de app zelf:

Open de Hoppy Appointments-app → op het dashboard/homepage vind je de kaart App Status (App-status).

• Active (Actief) → De app embed is ingeschakeld ✅
• Inactive (Inactief) → Klik op Activate (Activeren) — dit brengt je rechtstreeks naar je themabewerker

Om dit handmatig in te schakelen, ga je naar:

Shopify Admin → Online Store (Onlinewinkel) → Themes → Customize → App Embeds

Vervolgens:

• Zoek “Appointment Bookings”
• Zet de schakelaar op ON
• Klik op Save (Opslaan)

Tip:
Als deze al was ingeschakeld, probeer dan: schakel uit → Save → schakel weer in → Save, en vernieuw daarna je winkel.

Na deze stap zou de knop Book Now op de productpagina die aan je service is gekoppeld moeten verschijnen.

✅ Stap 2: Zorg dat de service is opgeslagen en actief

Zelfs als de app embed is ingeschakeld, verschijnt een service alleen in je winkel als deze is opgeslagen en actief.

Open de app → dashboard/homepage en controleer het badge naast je service:

• Inactive (Inactief) → Open het menu More (Meer) → Turn on (Inschakelen)
• Archived (Gearchiveerd) → Open het menu More → Unarchive (Dearchiveren), zorg er daarna voor dat de service is ingeschakeld

Open vervolgens de service en klik op Save (Opslaan) — ook als je niets hebt gewijzigd.

Opslaan synchroniseert de service opnieuw met je winkel, waardoor de meeste gevallen van ‘het werkte eerder wel’ worden opgelost.

Na het opslaan verschijnt een banner bovenaan de pagina:

• “Make sure Appointment Booking App Embed is active” → Klik op Enable App Embed (App-inbedding inschakelen) (zie stap 1)
• “Confirm Appointment Booking is published successfully” → Klik op Open Store (Winkel openen) om het resultaat te controleren

ℹ️ Als de knop Book Now een lege popup opent, staat de service meestal uit of is deze gearchiveerd — ook deze stap lost dat op.

✅ Stap 3: Controleer of je op de juiste productpagina en variant bent

De knop Book Now verschijnt alleen op de productpagina die aan je service is gekoppeld — niet op andere producten.

Open je service → tabblad General (Algemeen) → kaart Booking (Boeking), en controleer welk product is geselecteerd.

Voorbeeld:
Als je service is gekoppeld aan “Gitaarles” maar je bekijkt de productpagina “Drumles”, verschijnt de knop daar niet.

Als het product meerdere varianten heeft, probeer dan ook te wisselen tussen varianten in de winkel.

⚠️ Belangrijk:

Als je de varianten van het product in Shopify hebt bewerkt, verwijderd of opnieuw hebt aangemaakt nadat je de service hebt ingesteld, kan de koppeling verouderd raken.

De oplossing is eenvoudig:

→ Open de service
→ Klik op Change (Wijzigen)
→ Selecteer de juiste varianten nadat je de productvarianten hebt aangepast
→ Klik op Save (Opslaan)

Dit synchroniseert de nieuwste product- en variantinformatie opnieuw met je winkel.

✅ Stap 4: Controleer je live, gepubliceerde thema

De app embed wordt gecontroleerd — en de kalender wordt weergegeven — op je live, gepubliceerde thema.

Dit betekent:

• Het inschakelen van de app embed terwijl je een concept of niet-gepubliceerd thema bewerkt, zorgt er niet voor dat de kalender in je live winkel verschijnt
• Als je recent bent overgestapt naar een nieuw thema, blijft de app embed op dat nieuwe thema uitgeschakeld totdat je deze opnieuw inschakelt (zie stap 1)

Test altijd in je live winkel:

→ Open je winkel in een normaal browservenster, niet alleen in de voorvertoning van de themabewerker.

✅ Stap 5: Forceer een vernieuwing en probeer Incognito

Soms slaat Shopify of je browser winkelassets tijdelijk in de cache op.

Een harde vernieuwing lost dit meestal meteen op.

Windows

Ctrl + Shift + R

Mac

Cmd + Shift + R

Probeer ook:

• Je winkel openen in een Incognito-/privévenster
• Testen in een andere browser of op je telefoon

Zo bevestig je of het probleem alleen met cachegeheugen te maken heeft.

✅ Stap 6: Gebruik je een aangepast thema of paginabouwer?

De meeste Shopify-thema's werken meteen met Hoppy Appointments — de app vervangt automatisch de knop Add to Cart (Toevoegen aan winkelwagen) door een knop Book Now op boekbare productpagina's.

Aangepaste thema's of thema's gebouwd met een paginabouwer gebruiken echter soms niet-standaard productformulieren die de app niet altijd herkent.

Plaats in dat geval de kalender handmatig:

Open Shopify Theme Editor → Navigeer naar de gewenste pagina → Add Block (Blok toevoegen) → Apps → Appointment Calendar

Vervolgens:

• Plak je Service ID

→ Je vindt deze bovenaan de servicebewerkingspagina, of via My services (Mijn services) → More (Meer) → Copy Service ID (Service-ID kopiëren)

• Kies de Embedding Mode (Inbedmodus):
• • Modal → Toont een boekingskaart die de kalender in een popup opent
  • Direct → Bedt de volledige kalender direct in op de pagina
• Sla het thema op

Het blok geeft ook aan wanneer er iets mis is:

• “App Embed Not Enabled” → Ga terug naar stap 1 — de app embed is vereist, ook bij handmatige plaatsing
• “Appointment service configuration not found” → Controleer de geplakte Service ID nogmaals

💡 Alternatief: schakel de Floating Action Button in bij je service (General (Algemeen)-tabblad → Enable floating button (Zwevende knop inschakelen)) om een zwevende knop Book Now op alle winkelpagina's te tonen. Vergeet daarna niet om de service op te Save (Opslaan).

✅ Stap 7: Kalender opent maar geen datums/tijden? Controleer de beschikbaarheid

Als de popup opent maar klanten geen datums kunnen selecteren, ligt dit meestal aan je beschikbaarheidsinstellingen.

Open je service → tabblad Availability (Beschikbaarheid) en controleer het volgende:

• Working days are toggled ON (Werkdagen zijn ingeschakeld) met geldige begin- en eindtijden
• Date-range availability (Beschikbaarheid datumbereik) → Als je specifieke datums hebt ingesteld die inmiddels in het verleden liggen, verschijnen er nooit datums. Voeg een nieuw, actueel datumbereik toe
• Minimum scheduling notice (Minimale planningsmarge) → Een hoge waarde (bijv. 48 uur) verwijdert vandaag en morgen uit de kalender. De standaardwaarde is 1 uur
• Look ahead (Vooruitkijken) → Bepaalt hoe ver vooruit klanten kunnen boeken. Een korte waarde (bijv. 2–3 dagen) maakt dat de kalender bijna leeg lijkt
• Break times (Pauzes) → Zorg dat deze niet je hele werktijd beslaan
• Blocked dates (Geblokkeerde datums) → Verwijder datums die niet geblokkeerd zouden moeten zijn

Voorbeeld:
Als je Look ahead op 2 dagen staat en je Minimum scheduling notice op 48 uur, zien klanten mogelijk helemaal geen boekbare datums.

Pas de instellingen aan, klik op Save (Opslaan) en vernieuw je winkel — de datums zouden nu selecteerbaar moeten zijn.

✅ Stap 8: Controleer de tijdzone-instellingen

Een verkeerde tijdzone kan je tijdsloten verschuiven — of ervoor zorgen dat er niets beschikbaar lijkt op de tijden die je verwacht.

Open je service → tabblad Availability (Beschikbaarheid) → kaart Timezone & hour format (Tijdzone en uurindeling):

• Controleer of je Timezone (Tijdzone) juist is
• Lock timezone (Tijdzone vergrendelen) → Wanneer ingeschakeld, zien alle klanten tijden in jouw tijdzone, ongeacht waar ze zich bevinden
• Show timezone selector (Tijdzonekiezer tonen) → Laat klanten overschakelen naar hun eigen tijdzone

💡 Als klanten in andere landen ‘ontbrekende’ tijden melden, zien zij je schema waarschijnlijk geconverteerd naar hun lokale tijdzone.

✅ Stap 9: Controleer of tijdsloten vol zijn of limieten zijn bereikt

Soms werkt de kalender gewoon correct — de tijdsloten zijn simpelweg bezet.

Controleer het volgende:

• Maximum bookings per time slot (Maximale boekingen per tijdslot) → De standaardwaarde is 1, waardoor een tijdslot verdwijnt zodra iemand deze boekt. Verhoog dit voor groepslessen of sessies
• Maximum bookings per day (Maximale boekingen per dag) → Wanneer deze is bereikt, wordt de hele dag onbeschikbaar
• Existing bookings (Bestaande boekingen) → Open de pagina Bookings (Boekingen) om te zien welke tijdsloten al bezet zijn

Gebruik je de modus Availability per teammate (Beschikbaarheid per teamlid)?

Als er geen teamleden aan de service zijn gekoppeld, worden er helemaal geen tijdsloten gegenereerd:

→ Availability tab (Beschikbaarheidstabblad) → Assign teammates to this service (Teamleden toewijzen aan deze service), of schakel terug naar Availability per service (Beschikbaarheid per service)

💡 Wil je dat volledig geboekte dagen zichtbaar blijven?

Schakel de Waitlist (Wachtlijst) in via het tabblad Payment (Betaling), en zet vervolgens Show waitlist when a slot is fully booked (Wachtlijst tonen wanneer een tijdslot vol is) aan — klanten zien dan een optie Join waitlist (Aansluiten bij wachtlijst) in plaats van een lege kalender.

⚠️ Goed om te weten

• Het voorbeeld op de service-instellingenpagina is indicatief — vertrouw altijd op de kalender op je live productpagina
• Het Appointment Calendar app-blok vereist ook de app embed uit stap 1
• Elk product of elke variant kan op elk moment maar aan één actieve service zijn gekoppeld

Nog steeds niet zichtbaar?

Als je alle bovenstaande stappen hebt geprobeerd en de boekingskalender nog steeds niet zichtbaar is:

1. Sla de service opnieuw op
2. Controleer dat App Status Active (Actief) toont
3. Test op de live productpagina (niet in de themavoorvertoning)
4. Test in een Incognito-venster

Als het probleem aanhoudt, neem dan gerust direct contact met ons op vanuit de Hoppy Appointments-app.

Om ons te helpen sneller te troubleshooten, voeg je het volgende toe:

• Je winkel-URL
• De productpagina-URL waar de kalender zou moeten verschijnen
• Je Service ID (My services (Mijn services) → More (Meer) → Copy Service ID (Service-ID kopiëren))
• Je themanaam
• Een screenshot van de kaart App Status (App-status)

We helpen je graag 🙌

Bijgewerkt op: 10/09/2026