# 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="/media/97e9925e8c6c38bafce1.webp" alt="" loading="lazy" decoding="async"><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="/media/df8e143b2909f21c0adc.webp" alt="" loading="lazy" decoding="async"><figcaption></figcaption></figure>

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

<figure><img src="/media/e076993f8fa9f42643a2.webp" alt="" loading="lazy" decoding="async"><figcaption></figcaption></figure>

<figure><img src="/media/495701e63b55d5d1ed5d.webp" alt="" loading="lazy" decoding="async"><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="/media/4ce972ed102af74ff8d6.webp" alt="" loading="lazy" decoding="async"><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="/media/7e5ad08558f746bbd2a6.webp" alt="" loading="lazy" decoding="async"><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="/media/9d9ed16000da73935c9b.webp" alt="" loading="lazy" decoding="async"><figcaption></figcaption></figure>

<figure><img src="/media/658f34178805fec1248d.webp" alt="" loading="lazy" decoding="async"><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><span class="missing-media" role="note">This screenshot is unavailable in the original documentation.</span><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.