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 drag-and-drop 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 things like:
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
See these in action on our demo store 👉 https://yogababble.myshopify.com/
We will go through the different solutions below.
Solution | Ideal for | Supported on |
Embeds the booking calendar on any page, reducing clicks.. | All plans | |
Adds a button on any page that shows the calendar when clicked. | All plans | |
Showing the service details like price, variants, and a button to book. | All plans | |
Add a link that takes your customer directly to the calendar anywhere (useful for Instagram or other social media) | All plans | |
Let customers search multiple services (by location, date, attendees) and showcase each event, routing to book | Pro Plan and above | |
Let customers browse multiple services in a calendar and surface each event, routing to book | All Plans |
ℹ️ Before continuing to the steps below, please check that:
The Easy Appointment Booking app extension is enabled for your theme. View steps.
You have created one or more events. Watch a 2-minute tutorial here.
You can see all of our app extensions by going to:
Shopify Theme Editor > Add Section > Apps > Scroll to the Easy Appointment Booking section.
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 Edit Event > Marketing
Open the Easy Appointment Booking app. Find your event, click on "Edit" and then "Marketing" tab
Open Easy Appointment Booking.
Find your Event. Click on Edit > Marketing.
Ensure you have the right variant selected.
Copy the unique code.
Go to the Shopify Theme Editor (Online Store > Themes > Edit Theme). Find the page you'd like to add this to
Click on "Add Section" > Apps > Inline Calendar
Select the product and paste the unique code. Save. You should see a live preview.
Note: The theme editor preview is not accurate, so you will have to save your changes and preview it on your website.
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.
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
Go to your Theme Editor (Online Store > Themes > Edit Theme). Find the page you'd like to add this to
Click on "Add Section" > Apps > Popup Calendar Button
Select the product and add the event unique ID. You can update the variant ID and label the button as you see fit.
Save.
Note: Sometimes, the theme editor preview is not accurate, so you will have to save your changes and preview it on your website.
Solution #3: Add a featured product
You can show a featured product with the "Select a Time" button visible on it.
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.
Go to the Shopify Theme Editor (Online Store > Themes > Edit Theme). Find the page you'd like to add this to.
Click on "Add Section" > Featured Product Card.
Select the product.
Now, we are going to add the Featured Service Card within the Featured Product Card block that we created.
Click on the "Add section" button within the Featured Product Card block.
Select Apps > Featured Service Card
Drag the Featured Service Card block beside the "Buy Buttons" block.
Save.
Note: Sometimes, the theme editor preview is not accurate, so you will have to save your changes and preview it on your website.
Solution #4: Add a direct link to your event or service
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
Now go to your Theme Editor (Online Store > Themes > Customize).
Click on any button that you have created. In this example, we created a Rich Text section and put a button inside it.
Paste the link you copied in step (2) as the button link.
Press Save on the top-right.
Solution #5: Event Collection View
You can add a collection of popular events and services on any Shopify page. It looks like this.👇
From Easy Appointment Booking, go to Settings → App extensions and widgets.
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?
Add 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
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!
From Easy Appointment Booking, go to Settings → App extensions and widgets.
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.
Choosing the services to show on the Calendar
1. In the app, go to Settings > App extensions and widgets.
2. Scroll to the Book Now Button widget section.
3. Under What do customers see when they click the button?, select Calendar View. The service picker only appears under this option.
4. Click inside Select the events/services to show on the calendar and start typing a service name.
5. Click each service you want on the calendar.
6. Click Save Changes.
If you never make a selection here, the Event Calendar falls back to showing only your first three active services. Come back and update this list whenever you add a new service, because nothing is added automatically.
Add the calendar to a Shopify page
1. In your Shopify admin, go to Online Store > Themes and click Customize on your live theme.
2. Navigate to the page where you want the calendar. A dedicated page such as "Book an appointment" usually works best.
3. In the section list on the left, click Add block > Apps > Event Calendar
5. Drag the block to where you want it on the page.
6. Click Save.
Control Desktop vs. Mobile Views for the Calendar
1. Go to Settings > App extensions and widgets.
2. Scroll to the Event Calendar widget section.
3. Set View on large screens to Calendar or List. This is what desktop and tablet visitors see first.
4. Set View on small screens. List is usually easier to use on phones, since the calendar grid scrolls sideways when space is tight.
5. Click Save.
Frequently Asked Questions
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.
