๐Ÿ”—Integrations

๐Ÿ  How to add Cowlendar on my homepage?

Add a Cowlendar booking widget or button directly to your Shopify homepage.

3 min read
3 views
Updated May 10, 2026
โ„น๏ธInfo
Prerequisite to be able to add Cowlendar to homepage : You need to have created at least one service on Cowlendar and the app needs to be enabled on your theme.
โš ๏ธWarning
A product is required to create a service on Cowlendar meaning you cannot simply just add a calendar to your page without first creating a product which you link to a Cowlendar service

There are 3 ways to add Cowlendar on your homepage.

Once you have one service and Cowlendar is enabled on your theme, you can use one of the 3 solutions.

โ†’ Create Your First Service On Cowlendar โ†’ Enable Cowlendar On Your Theme Mandatory

Here are the 3 ways you can add Cowlendar to your home page

Solution 1 : Featured Product

Steps to use solution 1

In your Shopify admin dashboard look at the left panel.

Click on Online store.

Click on Themes.

In the center panel click on Customize.

Make sure you are in your Home Page.

Click on Add Section.

Add a Featured Product section.

โš ๏ธWarning
If you don't see the Book Now button in the theme editor please check your live website instead

Solution 2 : Custom HTML

Steps to integrate Inline widget code inside of Custom HTML (or Custom liquid, Custom content)

In the Shopify admin dashboard on the left panel click on Apps.

Click on Cowlendar.

Click on My Services.

On the specific service you want to display click on More.

After clicking on more you will click on Custom integration.

Inside of Custom Integration copy the Inline Widget code.

In your Shopify admin dashboard look at the left panel and click on Online store.

Click on Themes.

In the center panel click on Customize.

Make sure you are in your Home Page.

Click on Add Section.

Add a Custom Liquid section (also known as Custom HTML or Custom Content).

Paste the Inline Widget code you copied earlier.

Save before leaving.

โš ๏ธWarning
Inline widgets can only show 1 specific service at a time and if it has multiple variants it will only be 1 specific variant
โ†’ How To Use The Inline Widget Feature

Solution 3 :Direct Link

What is a Direct Link?

A direct link allows you to link any text/button to your calendar. When someone clicks this button the calendar will show up as a popup widget on the screen. You can learn more about how to integrate a direct link link here.

Steps to integrate a Direct link

In the Shopify admin dashboard on the left panel click on Apps.

Click on Cowlendar.

Click on My Services.

On the specific service you want to display click on More.

After clicking on more you will click on Custom integration.

Inside of Custom Integration copy the Direct Link.

In the Shopify admin dashboard on the left panel click on Online Store.

Click on Navigation.

In there you will select the Menu you want to update.

Edit the Menu items (this would be each of the tabs in the Menu itself).

Apply the link to the link section of the Menu item.

Save before leaving.

you can add a direct link to your calendar in any text/button you have setup on your homepage. For this, you simply need to use the direct link of your service in any button.

โ†’ How To Add A Bookable Service In Their Menu
โš ๏ธWarning
This only works if you have one variant.
Cowlendar
Ready to use Cowlendar?
Open the app directly in your Shopify store.