# Show booking widget on your store

With our updated integration, you no longer need to touch any theme code. You can now add booking forms directly to your pages using Shopify App Blocks, which makes customization fast and simple.

### 🛠️ General Setup: Adding App Blocks to Your Theme

Before selecting a specific layout, follow these steps to access the booking blocks within Shopify:

1. From your Shopify Admin, go to **Online Store > Themes > Edit theme**

<figure><img src="https://2420234940-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1ux6d1pfkKFKCAAHuj8H%2Fuploads%2FkYCvjzp5gahM8YsclCM3%2F2026-04-10_17-03-38.png?alt=media&#x26;token=3cf46a38-a2c9-4368-b0f7-04a6ce8c6c9c" alt=""><figcaption></figcaption></figure>

2. Open the page template you want to add the booking widget
3. On the left-hand sidebar, click **Add Section** (or **Add Block)** > **Apps** tab in the search menu > search for Tipo Booking to see the available blocks

<figure><img src="https://2420234940-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1ux6d1pfkKFKCAAHuj8H%2Fuploads%2FFKWodlcMzLAhlN8glXhf%2F2026-04-10_17-08-55.png?alt=media&#x26;token=ed66024c-5655-415f-b561-61a70168b103" alt=""><figcaption></figcaption></figure>

> Important: Ensure that the Tipo Appointment Booking toggle is enabled in the App Embeds tab

4. Add one of the app block you need

* **Service**: displays one specific service (button or form)
* **Services**: display all services in catalog layout (list or grid)
* **Short code**: use the manual shortcode to show one service

5. Save the changes

***

### 🔗 App Blocks from Tipo

#### 1. The "Service" Block (Single Selection)

This block is designed to feature one specific service. You can choose to display the full booking form immediately or just a "Book Now" button.

* How it looks: A clean, focused area featuring a single calendar or button.
* Best for: Dedicated landing pages for a specific promotion or individual product pages.
* Example: If you have a page specifically for "VIP Hair Styling," use this block to show only that service's availability.

<figure><img src="https://2420234940-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1ux6d1pfkKFKCAAHuj8H%2Fuploads%2FpMXc1HzCXU1XvrqnrixM%2F2026-04-10_17-18-26.png?alt=media&#x26;token=cb359465-f090-440d-8215-77d2d9d1e990" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2420234940-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1ux6d1pfkKFKCAAHuj8H%2Fuploads%2FMePShJgzA7hAYweKtCdB%2F2026-04-10_17-17-59.png?alt=media&#x26;token=4ee5d5ac-4365-4f53-a845-ea33f2e1b146" alt=""><figcaption></figcaption></figure>

#### 2. The "Services" Block (List or Grid)

This block automatically pulls all active services from your app and organizes them into a directory for your customers.

* How it looks: A professional catalog layout. You can toggle between a Grid (large images) or a List (compact text).
* Best for: A main "Book an Appointment" page where customers need to see everything you offer.
* Example: A Wellness Center using the Grid layout to show different options like Massage, Acupuncture, and Sauna sessions side-by-side.

<figure><img src="https://2420234940-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1ux6d1pfkKFKCAAHuj8H%2Fuploads%2FrxmWIj2m3WQWMAr9IzsC%2F2026-04-10_17-19-50.png?alt=media&#x26;token=f2590b37-2706-4157-a615-3bd767e78159" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2420234940-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1ux6d1pfkKFKCAAHuj8H%2Fuploads%2FfOM39QENjFL2yPeymtaK%2F2026-04-10_17-19-22.png?alt=media&#x26;token=00184810-fea3-4e62-8e81-9add5d381b79" alt=""><figcaption></figcaption></figure>

#### 3. The "Shortcode" Block (Manual Placement)

If you need to place a widget inside a specific text area (like a blog post or a custom liquid section), you can use the manual shortcode method.

* How it looks: The widget appears exactly where you paste the code snippet, blending into your custom content.
* Best for: Advanced layouts, blog posts, or older Shopify themes that do not fully support sections.
* Example: Writing a blog post about "The Benefits of Yoga" and pasting the shortcode at the bottom so readers can book a class immediately.

Copy the code in the service detail in Tipo app:

<figure><img src="https://2420234940-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1ux6d1pfkKFKCAAHuj8H%2Fuploads%2FbwNRlJqOKKHRddaExvxK%2F2026-04-10_17-20-34.png?alt=media&#x26;token=ad0823b1-6366-42d9-8a19-480de097ce68" alt=""><figcaption></figcaption></figure>

Add the short code to the app block

<figure><img src="https://2420234940-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1ux6d1pfkKFKCAAHuj8H%2Fuploads%2FQozPBbKwbnBGzdI6T8pa%2F2026-04-10_17-21-28.png?alt=media&#x26;token=4fd68acc-a085-4167-a80e-052cc579f297" alt=""><figcaption></figcaption></figure>

#### Compare table

Here is a detailed comparison of the three methods available for adding the booking widget to your Shopify store.

<table data-header-hidden><thead><tr><th width="125.95001220703125"></th><th></th><th></th><th></th></tr></thead><tbody><tr><td><strong>Feature</strong></td><td><strong>🔳 Service Block</strong></td><td><strong>📑 Services Block</strong></td><td><strong>🔗 Shortcode</strong></td></tr><tr><td>Primary Goal</td><td>Feature a single specific service</td><td>Display a catalog of all services</td><td>Manual placement in text areas</td></tr><tr><td>Setup Complexity</td><td>Very Low (No code)</td><td>Very Low (No code)</td><td>Medium (Requires copy/paste)</td></tr><tr><td>Layout Options</td><td>Button or Full Form</td><td>Grid or List View</td><td>Inherits surrounding style</td></tr><tr><td>Auto-Updates</td><td>Yes (Via Theme Editor)</td><td>Yes (Via Theme Editor)</td><td>No (Must update code manually)</td></tr><tr><td>Best Location</td><td>Landing or Product Pages</td><td>Main "Book Now" Page</td><td>Blog posts &#x26; Custom sections</td></tr></tbody></table>