Skip to main content

How to take bookings on any Shopify page

Different ways to embed a calendar, launch bookings from a button, and take bookings on any page on your Shopify website.

Ray M avatar
Written by Ray M
Updated this week

ℹ️ Before continuing to the steps below, you need to verify that:

  1. Easy Appointment Booking is integrated with your theme. View steps.

  2. You have created one or more events. Watch a 2-minute tutorial here.


Easy Appointment Booking gives you different ways to take bookings on any page, rather than just the product page. This is ideal for
​
🀝 Consultations or estimates on a Contact Us page

🎯 Booking tours or classes right from the Homepage for fast conversion

πŸ‘— Styling appointment on a featured designer page

πŸ› οΈ Support or installation for a physical product

  1. Embedded calendar on any page

  2. Show calendar popup from a button

  3. Add a featured product

  4. Add a redirect link to your event or service

Witness these in action here πŸ‘‰ https://yogababble.myshopify.com/

If you have many services to offer and highlight, you can

5. Show a collection of various events and services

6. Use the Book Now widget to appear on every page of your Shopify store

We will go through the different solutions below.

Solution #1: Embed the calendar to a Shopify page

Available on Pro Plus

This solution embeds the calendar directly on your Shopify page. Customers can select a time and book a timeslot. Here's an example of what it looks like. πŸ‘‡

  1. Open the Easy Appointment Booking app.

  2. Find your event, click on "Edit" and then "Marketing" tab

  3. Click on Set up on "Embed calendar on a page".

  4. Copy the given code and follow the steps.

5. Go to your Theme Editor (Online Store > Themes > Customize).

6. Click on "Add Section" and then choose "Custom Liquid".
7. Paste the content you had copied earlier in the box. You should see a live preview.

8. Click Save on the top-right. You're done!

Note: Sometimes, the theme editor preview is not accurate, so you will have to save your changes and preview it on your website.

Solution #2: Show a calendar pop-up from a button

Available on Pro Plus

This solution launches the calendar from any button on your Shopify page. Here's an example of what it looks like. πŸ‘‡

  1. Open the Easy Appointment Booking app.

  2. Find your event, click on "Edit" and then the "Marketing" tab

  3. Click on Setup on "Pop-up from button".

  4. Copy the given code and follow the steps provided.

5. Now go to your Theme Editor (Online Store > Themes > Customize).

6. Click on any button that you have created, or create a button in the theme editor and add it to the desired section.

7. Paste the URL that you copied in here. Don't worry if it says no results! Press Save. View it on your website.

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

Available on Pro and above

You can show a featured product with the "Select a Time" button visible on it. It looks like this: πŸ‘‡

  1. Open the Easy Appointment Booking app.

  2. Find your event, click on "Edit" and then "Marketing" tab

  3. Click on Setup on "Create a featured service card".

  4. Copy the code provided and follow the steps.

5. Open your Theme Editor (Online Store > Themes > Customize).
6. Select "Featured Product"
7. Select a product that you have created an event or service for on Easy Appointment Booking.
8. Add a "Custom Liquid" section inside the Featured Product section (see screenshot below).
​

9. Copy and paste the contents from the Featured Product (Custom Liquid) section above into this section

10. Click Save on the top-right. You're done.

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.

Solution #4: Add a redirect 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)!

  1. Open the Easy Appointment Booking app.

  2. 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: Add a collection of events or services to your Shopify page

Currently available on Pro and above

You can add a collection of popular events and services on any Shopify page. It looks like this.πŸ‘‡

Follow this detailed tutorial to understand how to setup the Event Collection widget.

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!

  1. Click on Settings, go to Marketing tab.

  2. Set your button text and content header.

    1. The button text is what shows up on the button, which is positioned on the bottom right of every page.

    2. The content header is what appears in the pop up when you click the button.

  3. Set your font and button colour.

  4. Select if you want the button to be displayed or hidden.

  5. 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: Monthly Multi-Event Calendar - A Better Way To Showcase Your Events

Available on Pro and above

Allow customers to discover and book your events at a glance. Instead of browsing week by week, customers can now view an entire month of classes, making it easier to plan ahead and commit to bookings.

Why You’ll Love It

βœ… At-a-Glance Discovery: Customers can quickly see all available classes for the month instead of scrolling through weekly schedules.

βœ… Embedded & Seamless: Add the calendar to any page on your Shopify store with the Book Now button or embedded on a page. Boost event visibility and increase bookings

βœ… Real-Time Booking Updates: No need for third-party calendar toolsβ€”this feature syncs directly with your event and booking data.

βœ… Customizable Colours: Easily differentiate between classes, workshops, or events with colour-coded services.

βœ… Customizable Events: Choose which events to showcase in the calendar by going to the Settings page in our app, then navigating to the Marketing tab. Next scroll all the way down and select "a monthly calendar of popular events/services". Finally select the events you want to include.

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. Can I customize the look of the calendar?

Yes! You can adjust colours to match your brand and highlight different event types.

2. Will customers see real-time availability?

Yes! The calendar pulls live data from your booking and event system to ensure availability is always up to date.

3. How does this change my bookings that I see?

The Booking Calendar in the app will reflect these same colours as well. The List and Agenda View will remain as is so as to not interrupt your workflow :)

Did this answer your question?