# 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](https://penida.gitbook.io/cowlendar-help/beginners-guide/enable-cowlendar-on-your-theme-mandatory). {% 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](https://penida.gitbook.io/cowlendar-help/beginners-guide/enable-cowlendar-on-your-theme-mandatory), you can use one of the 3 solutions. {% content-ref url="../beginners-guide/create-your-first-service-on-cowlendar" %} [create-your-first-service-on-cowlendar](https://penida.gitbook.io/cowlendar-help/beginners-guide/create-your-first-service-on-cowlendar) {% endcontent-ref %} {% content-ref url="../beginners-guide/enable-cowlendar-on-your-theme-mandatory" %} [enable-cowlendar-on-your-theme-mandatory](https://penida.gitbook.io/cowlendar-help/beginners-guide/enable-cowlendar-on-your-theme-mandatory) {% 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.**
5. Make sure you are in your **Home Page.** 6. Click on **Add Section.** 7. Add a **Featured Product** section.
{% hint style="warning" %} If you don't see the Book Now button in the theme editor please check your live website instead {% endhint %}
### **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.**
6. Inside of Custom Integration **copy the Inline Widget code.**
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="how-to-use-the-integration-feature/how-to-use-the-inline-widget-feature" %} [how-to-use-the-inline-widget-feature](https://penida.gitbook.io/cowlendar-help/how-to.../how-to-use-the-integration-feature/how-to-use-the-inline-widget-feature) {% endcontent-ref %}
### **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.** 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.**
6. Inside of Custom Integration copy the Direct Link.
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.
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="how-to-use-the-integration-feature/how-to-add-a-bookable-service-in-their-menu" %} [how-to-add-a-bookable-service-in-their-menu](https://penida.gitbook.io/cowlendar-help/how-to.../how-to-use-the-integration-feature/how-to-add-a-bookable-service-in-their-menu) {% endcontent-ref %} {% hint style="warning" %} This only works if you have one variant. {% endhint %}