> For the complete documentation index, see [llms.txt](https://penida.gitbook.io/cowlendar-help/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://penida.gitbook.io/cowlendar-help/how-to.../how-to-add-cowlendar-on-my-homepage.md).

# How to add Cowlendar on my homepage?

{% hint style="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](/cowlendar-help/beginners-guide/enable-cowlendar-on-your-theme-mandatory.md).
{% endhint %}

{% hint style="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
{% endhint %}

There are 3 ways to add Cowlendar on your homepage.

Once you have one service and Cowlendar is [enabled on your theme](/cowlendar-help/beginners-guide/enable-cowlendar-on-your-theme-mandatory.md), you can use one of the 3 solutions. 

{% content-ref url="/pages/vRlUgceo2M1ZhIpdmvfC" %}
[Create your first service on Cowlendar](/cowlendar-help/beginners-guide/create-your-first-service-on-cowlendar.md)
{% endcontent-ref %}

{% content-ref url="/pages/t5xLV50QJ5W2wflLxjYo" %}
[Enable Cowlendar on your theme \[MANDATORY\]](/cowlendar-help/beginners-guide/enable-cowlendar-on-your-theme-mandatory.md)
{% endcontent-ref %}

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

### **Solution 1** : Featured Product

#### Steps to use solution 1 

1. In your Shopify admin dashboard look at the left panel. 
2. Click on **Online store.**
3. Click on **Themes.**
4. In the center panel click on **Customize.**

<figure><img src="/files/ME23WO3WxpGzWgUfttKt" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/atJGCoCrwicBN466Hgc1" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
If you don't see the Book Now button in the theme editor please check your live website instead
{% endhint %}

<figure><img src="/files/IvU2pSdoHWmn9Pz6QAM7" alt=""><figcaption></figcaption></figure>

### **Solution 2 : Custom HTML**

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

1. In the Shopify admin dashboard on the left panel click on **Apps.**
2. Click on **Cowlendar.**
3. Click on **My Services.**
4. On the specific service you want to display click on **More.**
5. After clicking on more you will click on **Custom integration.**

<figure><img src="/files/w26F2HOfwO22SgL1JqwA" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/b73c4UXq2sZXBwADtUBL" alt=""><figcaption></figcaption></figure>

6. In your Shopify admin dashboard look at the left panel and click on **Online store.**
7. Click on **Themes.**
8. In the center panel click on **Customize.**
9. Make sure you are in your **Home Page.**
10. Click on **Add Section.**
11. Add a **Custom Liquid section** (also known as Custom HTML or Custom Content).
12. **Paste the Inline Widget code** you copied earlier.
13. **Save** before leaving.

{% hint style="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
{% endhint %}

{% content-ref url="/pages/awpyjYDUYgT4GjEsg8wp" %}
[How to use the Inline Widget feature?](/cowlendar-help/how-to.../how-to-use-the-integration-feature/how-to-use-the-inline-widget-feature.md)
{% endcontent-ref %}

<figure><img src="/files/IeWV3PqqpdDqYxQ67iL6" alt=""><figcaption></figcaption></figure>

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

1. In the Shopify admin dashboard on the left panel click on **Apps.**
2. Click on **Cowlendar.**&#x20;
3. Click on **My Services.**
4. On the specific service you want to display click on **More.**
5. After clicking on more you will click on **Custom integration.**

<figure><img src="/files/w26F2HOfwO22SgL1JqwA" alt=""><figcaption></figcaption></figure>

6. Inside of Custom Integration copy the Direct Link.

<figure><img src="/files/VcSXTs1ANXJIdygr4yfQ" alt=""><figcaption></figcaption></figure>

6. In the Shopify admin dashboard on the left panel click on **Online Store.**
7. Click on **Navigation.**
8. In there you will select the **Menu** you want to update.
9. Edit the Menu items (this would be each of the tabs in the Menu itself).
10. Apply the link to the **link section** of the Menu item.

<figure><img src="/files/bA4F3NNfdzIdjbIsa6BY" alt=""><figcaption></figcaption></figure>

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

{% content-ref url="/pages/OQr43SBD9DCk249gj4sw" %}
[How to add a bookable service in their menu?](/cowlendar-help/how-to.../how-to-use-the-integration-feature/how-to-add-a-bookable-service-in-their-menu.md)
{% endcontent-ref %}

{% hint style="warning" %}
This only works if you have one variant.
{% endhint %}

<figure><img src="/files/HhwygzS2gZ0XyKLKk7Yn" alt=""><figcaption></figcaption></figure>