ℹ️ 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 geeft u twee manieren om de boekingskalender weer te geven op uw storefront:

1. Automatische Boekenknop Vervangt de Add to Cart knop op productpagina's verbonden met uw diensten.
2. Handmatig agendablok Plaats een reserveringskaart of inline agenda op elke pagina met behulp van ShopifyDe thema-editor.

Deze gids loopt u door beide methoden, zodat klanten kunnen beginnen met het boeken direct vanuit uw winkel.

⚠️ Voordat u begint

Zorg ervoor dat u voordat u de agenda invoegt:

• De Hoppy Appointments app geïnstalleerd op uw Shopify opslag
• Tenminste één dienst gecreëerd en verbonden met een Shopify product
• Een duidelijk idee of je een popup agenda of een inline agenda op de pagina wilt

Als je nog geen service hebt gemaakt, begin dan met Hoe kan ik afspraken boeken diensten instellen Eerst.

🛠️ Stap 1

De app embed is de belangrijkste schakelaar die maakt dat de boeking widget werkt. Het moet worden ingeschakeld voor zowel automatische als handmatig inbedding.

Optie A: Inschakelen vanuit de app

1. Open de Hoppy Appointments app
2. In de dashboard, Zoek de Appstatus kaart
3. Klik Activeer

Dit opent uw Shopify thema-editor direct naar de app insluit sectie.

Optie B: handmatig inschakelen van Shopify Beheerder

1. Ga naar Shopify Beheerder → Online Store → Thema's
2. Klik Aanpassen op uw live thema
3. Klik op de App-embeds pictogram bovenaan
4. Zoeken Afspraakboekingen
5. Schakelen AAN
6. Klik Opslaan

Eenmaal ingeschakeld, de Appstatus kaart binnen Hoppy Appointments toont Actief.

🛠️ Stap 2 Zorg ervoor dat uw service actief en opgeslagen is

Het boekingswidget verschijnt alleen voor diensten die zijn opgeslagen en ingeschakeld.

1. In de app, ga naar Mijn diensten
2. Controleer de badge naast uw service:
3. • Actief ✅ De service is live
   • Inactief Open de Meer menu en klik Aanzetten
   • Gearchiveerd Open de Meer menu en klik Onarchief, zet hem dan aan
3. Open de service en klik Opslaan

Het opslaan van re-syncs uw service met de storefront. Dit is belangrijk na het veranderen van productvarianten, prijzen, of beschikbaarheid.

🛠️ Stap 3 Controleer het Boek Nu Knop op uw productpagina

Zodra de app embed actief is en de service wordt opgeslagen, zal de productpagina die is aangesloten op uw service automatisch een Boek nu knop in plaats van Aan winkelwagen toevoegen.

1. Open je live storefront
2. Ga naar het product verbonden met uw service
3. Bevestig de Boek nu knop verschijnt
4. Klik erop om de boekingspopup te openen

Als uw product meerdere varianten heeft, schakel er dan tussen. De knop Book Now verschijnt alleen voor varianten die deel uitmaken van de service.

💡 De hoeveelheid selector is uitgeschakeld voor boekbare producten omdat elke reservering is voor een slot per keer.

🛠️ Stap 4

Gebruik deze methode als:

• Uw thema maakt gebruik van een pagina bouwer of aangepaste product formulier
• U wilt de kalender op een pagina die geen product pagina is
• U wilt een gestileerde boekingskaart met service details
• U wilt de volledige agenda direct op de pagina

Blok toevoegen

1. Ga naar Shopify Beheerder → Online Store → Thema's
2. Klik Aanpassen op uw live thema
3. Ga naar de pagina waar u de agenda wilt
4. Klik Blok toevoegen of Sectie toevoegen
5. Zoeken Apps → Afspraakagenda
6. Plakken Service-ID
7. Kies een Invoegen

Vind uw Service ID

• Open de pagina 'service edit' en het Service-ID wordt aan de bovenkant getoond
• Of ga naar Mijn diensten → Meer → Copy Service ID

Kies een inbed-modus

• Modal Een boekingskaart met het servicebeeld, titel, beschrijving, prijs en een Boek nu knop die de agenda opent in een popup
• Rechtstreeks Insluit de volledige boekingskalender direct op de pagina zodat klanten datums en tijden kunnen kiezen zonder een popup te openen

Basisstijl instellen

Het blok kunt u aanpassen:

• Achtergrondkleur
• Titelkleur en lettergrootte
• Prijskleur en lettergrootte
• Option label kleur en lettergrootte
• Boek nu knopkleur, achtergrond en lettergrootte
• Details tonen kleur, achtergrond, lettergrootte en zichtbaarheid

Voor diepere styling opties, zie Afspraak Boekingen Ontwerp & Styling Opties.

Thema opslaan

Klik Opslaan in de thema-editor, bekijk dan de live pagina.

⚠️ De agendablok vereist nog steeds de Afspraak Boekingen-app insluiten om ingeschakeld te worden. Als dat niet zo is, toont het blok een "App Embed Not Enabled" bericht.

👀 Wat klanten zien

Automatische Boekenknop

1. Klant bezoekt de productpagina
2. Zij zien een Boek nu knop in plaats van Toevoegen aan winkelwagen
3. Ze klikken erop en een popup agenda opent
4. Ze selecteren een datum, tijd, en vul het boekingsformulier
5. Als betaling is ingeschakeld, het product wordt toegevoegd aan winkelwagen en ze controleren
6. Als betaling niet is ingeschakeld, wordt de boeking onmiddellijk bevestigd

Handmatig modaal blok

1. Klant bezoekt de pagina waar u het blok geplaatst
2. Ze zien een kaart met service details, prijs, en variant of duur opties
3. Ze klikken Boek nu om de popup-agenda te openen
4. Ze voltooien de boekingsstroom

Handmatig direct blok

1. Klant bezoekt de pagina waar u het blok geplaatst
2. De volledige agenda laadt inline als ze naar het zicht schuiven
3. Ze selecteren een datum en tijd direct op de pagina
4. Ze vullen het boekingsformulier en checkout

⚠️ Belangrijke opmerkingen

• App embed is vereist voor beide methoden. Zelfs als u het handmatige blok gebruikt, moet de Afspraak Boekingen app worden ingeschakeld.
• Gebruik je live, gepubliceerde thema. De agenda zal niet verschijnen op concept- of niet-gepubliceerde thema's.
• Eén actieve dienst per productvariant. Als een variant verbonden is met meer dan één actieve dienst, kan gedrag onvoorspelbaar zijn.
• Behalve na elke verandering. Productvarianten, prijzen, beschikbaarheid en service instellingen bereiken alleen de storefront nadat u op Opslaan klikt.
• De Book Now knop verbergt het origineel In winkelwagen en dynamische kassaknoppen alleen voor boekbare varianten. Andere producten blijven ongewijzigd.
• Hoeveelheid selecties zijn uitgeschakeld voor boekbare producten omdat boekingen enkel-slot aankopen zijn.

🐞 Problemen oplossen

De knop Boek Nu verschijnt niet

• Bevestig de Appstatus toont Actief
• Zorg ervoor dat de service is opgeslagen en actief
• Controleer of u de juiste productpagina en variant bekijkt
• Zorg ervoor dat je test op het live thema, geen concept
• Harde verfrissen de pagina of test in een Incognito venster

Het handmatige blok toont "App Embed Not Enabled"

Ga terug naar Stap 1 en schakel de Afspraak Boekingen-app in.

Het handmatige blok toont "Appointment service configuratie niet gevonden"

Controleer de Service-ID Je plakte. U kunt het opnieuw kopiëren van Mijn diensten → Meer → Copy Service ID.

De agenda opent maar er zijn geen data beschikbaar

Controleer uw service Beschikbaarheid tab. Zorg ervoor dat werkdagen zijn ingeschakeld, look-ahead en minimale planning kennisgeving zijn redelijk, en geblokkeerde data niet alles bestrijken.

Voor een complete probleemoplossing doorloop, zie Afspraak Boeking Kalender wordt niet weergegeven in mijn winkel [Fixed].

🎉 Eindresultaat

Eenmaal ingesteld:

✅ De app Afspraakboeken is ingeschakeld in uw thema
✅ Uw service is opgeslagen, actief en verbonden met het juiste product
✅ De Boek nu knop verschijnt automatisch op de productpagina
✅ Optioneel wordt op elke pagina die u kiest een agendablok geplaatst
✅ Klanten kunnen direct vanuit uw winkel boeken

📚 Gerelateerde artikelen

• Hoe kan ik afspraken boeken diensten instellen
• Afspraak Boeking Kalender wordt niet weergegeven in mijn winkel [Fixed]
• Afspraak Boekingen Ontwerp & Styling Opties
• Aangepaste CSS instellen voor afspraak boeken App
• Hoe op te zetten Floating Action Button Like Calendly voor Afspraak Boekingen
• Afspraak Boekingen Alle Betalingsopties Uitgelegd
• Afspraak Boekingen Uitgelegd Soorten Boekingen

Bijgewerkt op: 10/09/2026