> 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-display-your-services-in-a-calendar-on-any-shopify-page.md).

# How to Display Your Services in a Calendar on Any Shopify Page

The Event Calendar is one of Cowlendar’s most requested features, and now it is finally here! 🎉

\
With this tool, you can display all your services inside a clean, interactive calendar, allowing customers to browse available events by month, week, list, or grid view on any Shopify page.

This feature is perfect for:\
✔ Workshops and classes\
✔ Salon or spa appointments\
✔ Restaurant bookings\
✔ Fitness schedules\
✔ Tours, rentals, coworking spaces, and more

<figure><img src="https://1413666222-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB7xH6fep0zIUsqsS8lgV%2Fuploads%2FvP0aNxmXgUXTYCxKnVhO%2FCALENDAREVENTS.png?alt=media&amp;token=baa44c23-e34f-42f6-a5bc-f3fe32b547d7" alt=""><figcaption></figcaption></figure>

***

### ✨ Key Features of the Event Calendar

#### 📆 Multiple Calendar Views

You can allow customers to switch between:

* Month view
* Week view
* List view (automatically used on mobile)
* Grid view

Customers can explore your services in the format that works best for them.

***

### 🛠 How to Add Your Event Calendar to Any Shopify Page

Follow these steps to create and display your Event Calendar.

#### 1️⃣ Add Services to the Event Calendar

1. In your Shopify admin dashboard, click **Apps**.
2. Open **Cowlendar**.
3. Go to **Settings**.
4. Click **Event Calendar** in the left panel.
5. Click **Add service** and choose which services should appear in the calendar.

<figure><img src="https://1413666222-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB7xH6fep0zIUsqsS8lgV%2Fuploads%2F2WpuSxiDtvhJba50cwkm%2FADDSERVICESCALENDAR.png?alt=media&amp;token=f9bf1fc0-16b8-4a8a-8400-242a86050271" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
You can edit **every service** individually.\
Click the pencil icon ✏️ to:  Hide price, Hide duration, Hide location, etc.
{% endhint %}

***

#### 2️⃣ Add the Event Calendar to Your Shopify Website

6. On the left sidebar of Shopify, click **Online Store**.
7. Select **Themes**.
8. Click **Customize** to open the theme editor.

<figure><img src="https://1413666222-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB7xH6fep0zIUsqsS8lgV%2Fuploads%2FhqJVgQvlXDFYkr1OQ7Js%2FCow%20-%20Online%20Store%20-%20Themes%20(2).png?alt=media&amp;token=6fad81d3-6de5-4ae6-9101-28b006080cd5" alt=""><figcaption></figcaption></figure>

9. Navigate to the page where you want to add your **Event Calendar**.
10. Click **Add section**.
11. Go to **Apps** and choose **Cowlendar event calendar**.

<figure><img src="https://1413666222-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB7xH6fep0zIUsqsS8lgV%2Fuploads%2FVOcbSrDL1egTCqmsXQ25%2Fscreencapture-admin-shopify-store-briansalazartest-themes-169978593303-editor-2025-12-02-18_58_27-edit.png?alt=media&amp;token=d60bc6c0-1e89-4a57-b747-8f03dbc61734" alt=""><figcaption></figcaption></figure>

Your Event Calendar will now be displayed on the selected page 🎉

***

### ⚙️ Calendar Settings and Customization Options

Once inside **Settings → Event Calendar**, you can fully customize the calendar.

#### 🗂 Create and Manage Calendars

* **Pro plan:** you can create 1 calendar
* **Elite plan:** you can create up to 10 calendars

***

#### 📝 Calendar Name

This name is internal only and visible only to you.

To change the public title, go to **Online Store → Click on Cowlendar event Calendar→ Edit it in Section title**.&#x20;

#### 🌍 Timezone

Select the timezone in which your events should be displayed\
(for example: **America/New\_York**).

#### ⏱ Hour Format

Choose how times are displayed:

* AM/PM (for example: **10:30 PM**)
* 24-hour (for example: **22:30**)

<figure><img src="https://1413666222-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB7xH6fep0zIUsqsS8lgV%2Fuploads%2FzOxMtgjcdlV0x8n4q9El%2FCONFIGURATIONACALENDAR.png?alt=media&amp;token=993177d5-d149-4a10-b90b-47657d7ac06a" alt=""><figcaption></figcaption></figure>

***

### 🧩 Calendar Configuration

#### Available Views

You can enable or disable:

* Month
* Week
* List (mobile)
* Grid

#### Default Calendar View

Choose the view customers see first when opening the calendar.

#### Show Weekends

Turn this on or off depending on your type of business.

#### First Day of the Week

Choose between:

* Saturday
* Sunday
* Monday

<figure><img src="https://1413666222-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB7xH6fep0zIUsqsS8lgV%2Fuploads%2Fu1bR2sQoV0KIwIEh7ai4%2FCALENDARCONFIGURATION.png?alt=media&amp;token=71a65863-6bef-497b-8fbd-8052a2f65369" alt=""><figcaption></figcaption></figure>

***

### 🎨 Calendar Slot Design

#### Event Layout

* **Compact:** shows title and time
* **Expanded:** shows title, time, and description

#### Show Event End Time

Display both start and end time for events.

#### Action Target

Choose what happens when customers click an event:

* Open widget (booking popup)
* Redirect to product page (used automatically if a service has multiple variants)

<figure><img src="https://1413666222-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB7xH6fep0zIUsqsS8lgV%2Fuploads%2FlMlkXjAn3g5zSeMcQSPY%2FCALENDARSLOTDESIGN.png?alt=media&amp;token=dc44c812-ba31-4bec-a10d-66cc4ed6d8ca" alt=""><figcaption></figcaption></figure>

***

### 🎨 Calendar Design

Fully customize the calendar’s look with color controls:

* Background color
* Title color
* Text color
* Calendar header color
* Calendar grid color
* Current day background
* Current day text
* Week header background
* Week header text
* Navigation buttons (background, arrows, hover)
* View toggle backgrounds and text
* Previous and next month cells
* Sold out event background and text

This allows you to match your store branding perfectly 🎨.

<figure><img src="https://1413666222-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB7xH6fep0zIUsqsS8lgV%2Fuploads%2Fpzn70AMrxaHFgxOH3YEj%2FCALENDARDESIGN.png?alt=media&amp;token=378456b2-0eb3-42dd-9a3c-55a17c2b5c00" alt=""><figcaption></figcaption></figure>