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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://penida.gitbook.io/cowlendar-help/how-to.../how-to-add-cowlendar-on-my-homepage.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.