ℹ️ Before continuing to the steps below, you need to verify that:
Easy Appointment Booking is integrated with your theme. View steps.
You have created one or more events. Watch a 2-minute tutorial here.
Easy Appointment Booking comes with app extensions that add booking functionality to your storefront, admin, customer accounts, and POS. You don't need to edit any theme code — just add the blocks you want in the Shopify Theme Editor.
There's different ways to take bookings on any page, rather than just the product page. This is ideal for
🎯 Booking tours or classes right from the Homepage for fast conversion
👗 Styling appointment on a featured page
🛠️ Show a collection of various events and services in a list or calendar view
Witness these in action here 👉 https://yogababble.myshopify.com/
We will go through the different solutions below.
Solution #1: Inline Calendar
Embeds the booking calendar directly on the page — no button click required. Best for dedicated booking pages where the calendar is the main focus.
Product — the product linked to your event
Event Unique ID — copy from Events > [your event] > Marketing
Open the Easy Appointment Booking app. Find your event, click on "Edit" and then "Marketing" tab
Ensure you have the right variant selected
Copy the unique code
3. Go to your Theme Editor (Online Store > Themes > Edit Theme). Find the page you'd like to add this to
4. Click on "Add Section" > Apps > Inline Calendar
5. Select the product and paste the unique code. Save. You should see a live preview.
Note: Sometimes, the theme editor preview is not accurate, so you will have to save your changes and preview it on your website.
Available on Pro Plus and above
Solution #2: Pop Up Calendar Button
A Book now button that opens the booking calendar in a full-screen overlay. Place it anywhere — your homepage, a landing page, or inside any section.
Product — the product linked to your event
Event Unique ID — copy from Events > [your event] > Marketing
Button label — defaults to "Book now"
Open the Easy Appointment Booking app. Find your event, click on "Edit" and then "Marketing" tab
Ensure you have the right variant selected
Copy the unique code
3. Go to your Theme Editor (Online Store > Themes > Edit Theme). Find the page you'd like to add this to
4. Click on "Add Section" > Apps > Popup Calendar Button
5. Select the product and add the event unique ID. You can update the variant ID and label the button as you see fit. Save. You should see a live preview.
Note: Sometimes, the theme editor preview is not accurate, so you will have to save your changes and preview it on your website.
Available on Pro Plus and above
Solution #3: Add a featured product
You can show a featured product with the "Select a Time" button visible on it. It looks like this: 👇
Open the Easy Appointment Booking app. Find your event, click on "Edit" and then "Marketing" tab
Ensure you have the right variant selected
Copy the unique code
3. Go to your Theme Editor (Online Store > Themes > Edit Theme). Find the page you'd like to add this to
4. Click on "Add Section" > Apps > Featured Service Card
5. Select the product. Save. You should see a live preview.
Note: Sometimes, the theme editor preview is not accurate, so you will have to save your changes and preview it on your website. Additionally, please note the app is designed to look at one 'Select a Time' button per page and in turn you should not have more than 1 featured product per page.
Available on Pro and above
Solution #4: Add a direct link to your event or service
Available on free and above
You can add a direct link to your calendar through any button that you have setup on your homepage. It looks like this 👇 (you can customize the text)!
Open the Easy Appointment Booking app.
Find your event, click on "View in Store". Copy this link
3. Now go to your Theme Editor (Online Store > Themes > Customize).
4. Click on any button that you have created. In this example, we created a Rich Text section and put a button inside it.
5. Paste the link you copied in step (2) as the button link.
6. Press Save on the top-right. You're done!
Solution #5: Event Collection View
You can add a collection of popular events and services on any Shopify page. It looks like this.👇
How to Set Up Event Collection Widgets
Click on the Settings, go to the Marketing tab
Click on the Search for events/services field and select the events that will be part of this collection.
Click Save Changes
Click: How do I show this on my store? and the one-line install script to embed it into any Shopify page.
Check the collections widget to ensure it displays your events perfectly.
Now your customers can browse all your offerings in one place, making it easier than ever to book!
Solution #6: Enable the Book Now widget to appear on every page of your store
Currently available on Pro and above
Looking for something that takes up less space yet promotes your events? Consider the Book Now widget! A small, floating widget that appears on the corner of every page on your store!
Click on Settings, go to Marketing tab.
Set your button text and content header.
The button text is what shows up on the button, which is positioned on the bottom right of every page.
The content header is what appears in the pop up when you click the button.
Set your font and button colour.
Select if you want the button to be displayed or hidden.
Press Save Changes and visit your Shopify site.
See the 'Option 2' of this article for the different layouts available and how to set this up!
Solution #7: Event Calendar
A calendar view of all your services and events. Customers can browse by date, filter by service, and switch between grid and list views. Each day shows color-coded dots for the services available.
Product — optionally filter to a single service; leave blank to show all
List v. Calendar — default display list or calendar view
Currently available on Pro and above
Reach out to our Support team via chat and we would be happy to set this up for you!
🎯 Feature Special Events: Highlight limited-time classes or workshops so customers can plan ahead.
📢 Use on Landing Pages: Embed the calendar in promotions or newsletters to increase bookings.
FAQ
1. How do I add a calendar on multiple product pages (like a "Visit us in store" button?)
You can add a "visit us in store" button that launches the calendar and have it appear below your add to cart!
It would be the same approach as the Pop Up Calendar (Solution 2 above), but you would (1) apply it to a Shopify product template that is applicable to all the products you want this pop up calendar to appear for (2) ensure you add that embed in the spot of your choice on the theme (3) ensure the product, variant ID, unique Event ID are all present.
2. Will customers see real-time availability?
Yes! The calendar widgets pull live data from your booking and event system to ensure availability is always up to date.
3. For the Event Calendar, can I customize the look of the calendar?
Yes! You can adjust colours to match your brand and highlight different event types.
