# 🏠 How to add Cowlendar on my homepage?

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

> **ℹ️ 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](https://help.cowlendar.com/a/enable-cowlendar-on-your-theme-mandatory.md), you can use one of the 3 solutions. 

[→ 1️⃣ Create your first service on Cowlendar](https://help.cowlendar.com/a/create-your-first-service-on-cowlendar.md)

[→ 2️⃣ Enable Cowlendar on your theme MANDATORY](https://help.cowlendar.com/a/enable-cowlendar-on-your-theme-mandatory.md)

## 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.**

![](https://orka-chat.fra1.cdn.digitaloceanspaces.com/prod/help/671a5e245d077ea954b2cd4c/import/1791976322879-Untitled_design_5_.webp)

Make sure you are in your **Home Page.**
Click on **Add Section.**
Add a **Featured Product** section.

![](https://orka-chat.fra1.cdn.digitaloceanspaces.com/prod/help/671a5e245d077ea954b2cd4c/import/1791976401513-Untitled_design_24_.webp)

> **⚠️ Warning**
>
> If you don't see the Book Now button in the theme editor please check your live website instead

![](https://orka-chat.fra1.cdn.digitaloceanspaces.com/prod/help/671a5e245d077ea954b2cd4c/import/1791976402328-Capture_d_ecran_2024-02-12_a_15.29.57.webp)

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.**

![](https://orka-chat.fra1.cdn.digitaloceanspaces.com/prod/help/671a5e245d077ea954b2cd4c/import/1791976403714-_Cow_-_My_Services_-_Duplicate_2_.webp)

Inside of Custom Integration **copy the Inline Widget code.**

![](https://orka-chat.fra1.cdn.digitaloceanspaces.com/prod/help/671a5e245d077ea954b2cd4c/import/1791976392337-Untitled_design_41_.webp)

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?](https://help.cowlendar.com/a/how-to-use-the-inline-widget-feature.md)

![](https://orka-chat.fra1.cdn.digitaloceanspaces.com/prod/help/671a5e245d077ea954b2cd4c/import/1791976402782-Capture_d_ecran_2024-02-15_a_17.25.07.webp)

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.**

![](https://orka-chat.fra1.cdn.digitaloceanspaces.com/prod/help/671a5e245d077ea954b2cd4c/import/1791976403714-_Cow_-_My_Services_-_Duplicate_2_.webp)

Inside of Custom Integration copy the Direct Link.

![](https://orka-chat.fra1.cdn.digitaloceanspaces.com/prod/help/671a5e245d077ea954b2cd4c/import/1791976394259-Untitled_design_28_.webp)

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.

![](https://orka-chat.fra1.cdn.digitaloceanspaces.com/prod/help/671a5e245d077ea954b2cd4c/import/1791976404114-ScreenShot_Tool_-20250119115320.webp)

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?](https://help.cowlendar.com/a/how-to-add-a-bookable-service-in-their-menu.md)

> **⚠️ Warning**
>
> This only works if you have one variant.

![](https://orka-chat.fra1.cdn.digitaloceanspaces.com/prod/help/671a5e245d077ea954b2cd4c/import/1791976403295-Capture_d_ecran_2024-02-15_a_17.28.13.webp)