# Show booking widget on your store (legacy)

Our app now supports three layout types for the Booking Widget:\
**Form** – A calendar with available time slots for a single service\
**List** – A vertical list of your services\
**Grid** – A clean multi-column layout of all services

You can easily display any of these layouts on your Shopify store by using an **App Block** or by embedding a **custom shortcode**.

***

### 🧩 Option 1: Embed the Booking Form on a Page

**Best for:**\
Landing pages, service pages, or a dedicated “Book Now” page.

#### Step 1: Copy the Embed Code

1. Go to the app > click **Services**
2. Open a service (e.g. *Yoga Class*)
3. Click the **⋯ menu** in the Summary panel
4. Select **Copy embed code: Form**

**Example code:** 

```
<div class="tpb-booking-form page" data-layout-type="form" data-id="8597055996057"></div>
```

**8597055996057** is them service ID

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

#### 🧾 Step 2: Paste the Shortcode into a Page

1. Go to **Online Stores > Pages**
2. Open (or create) the page where you want bookings
3. Switch to **HTML / source view**
4. Paste the shortcode
5. Save the page

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

✅ **Result:**\
The booking form appears **inline** on the page.

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

<figure><img src="/files/5WlouFp34FWH15MqyySF" alt=""><figcaption></figcaption></figure>

***

### 🔘 Option 2: Add a Button with Booking Popup

**Best for:**\
Homepage buttons, banners, or “Book Now” CTAs.

#### Step 1: Copy the Popup Button Code

* Go to the app > click **Services**
* Open a service (e.g. *Yoga Class*)
* Click the **⋯ menu** in the Summary panel
* Select **Copy embed code: Popup button**

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

Example code:&#x20;

```
<button type="button" class="button btn button--secondary tpb-book-on-grid-button" onclick="Tipo.Booking.openWidget(8597055996057)">Book now</button>
```

**8597055996057** is the service ID

#### 🧾 Step 2: Add the Button to Your Page

1. Go to **Online Store >  Pages** or **Theme Editor**
2. Paste the button shortcode where you want it
3. Save

✅ **Result:**\
Clicking the button opens the booking form in a popup.&#x20;

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

***

### 🧱 Option 3: Add the Booking Widget as an App Block

**Best for:**\
Home pages or theme sections with no code required.

1. Open the app > go to **Online Store** > **Themes** > **Edit theme**
2. Select the page where you want to show the booking widget (e.g., Homepage, Product Page, etc.)
3. In the left panel, click **Add Block** under the section you want to add the widget to > select **Booking Widget** from the list of available app blocks
4. Choose your preferred **Layout**

* With the Booking Widget block selected, go to the **right panel**.
* Under the **Layout** dropdown, select one of the available styles:
  * **Form** – Displays a calendar and time selector directly.
  * **List** – Shows services in a vertical list format.
  * **Grid** – Displays services in a grid layout for a more visual layout.

5\. Save your Changes

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

<figure><img src="/files/6DkEC4dfaclnb5c7bAvV" alt=""><figcaption></figcaption></figure>

&#x20;✅ **Result:**\
The booking widget is fully embedded using Shopify’s app block system.

***

### 🆚 Which Option Should I Choose?

| Goal                     | Recommended Option |
| ------------------------ | ------------------ |
| Full booking page        | 🧩 Embed Form      |
| Simple “Book Now” button | 🔘 Button + Popup  |
| No-code setup            | 🧱 App Block       |

***

<figure><img src="https://tipo.io/wp-content/uploads/2025/05/2025-05-08_14-29-26-1024x829.png" alt=""><figcaption></figcaption></figure>

**🙋 Still need support?**

If you still need help, please feel free to contact us at <hi@tipo.io>. We’ll be happy to assist you further.


---

# 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://docs.tipo.io/tipo-appointment-booking/widget-customization/show-booking-widget-on-your-store-legacy.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.