> For the complete documentation index, see [llms.txt](https://docs.tipo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.tipo.io/tipo-appointment-booking/settings/theme-integration.md).

# Theme integration

Without this step, the booking widget will not appear, even if your services and availability are set up correctly.

Learn more about app embed [here](https://help.shopify.com/vi/en/manual/online-store/themes/theme-structure/extend/apps). 

Note: You can apply the app to an **unpublished** theme to test the app and avoid having any effect on your live site.

### 🧩 What Theme Integration Does

When enabled, Tipo Appointment Booking:

* Injects booking functionality into your theme
* Allows widgets, popups, and app blocks to work
* Syncs storefront booking with the admin calendar

### 🛠️ Step-by-Step: Enable Theme Integration

 1\. Open the app **Dashboard** > **App status** section > click **Turn** **on** button 

It directs you to the theme editor.

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

2. In theme editor, find the **app block** of **Tipo Appointment Booking** app > toggle it on

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

3. Click **Save** to update the changes in theme editor.&#x20;

***

### ✅ How to Confirm It’s Working

You’ll know theme integration is successful when:

* **App status** on the Tipo dashboard shows **ON**
* Booking widgets or buttons appear on the storefront
* Customers can open the booking form and select time slots

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

**Note:**&#x20;

* Please make sure you check the right theme (the theme the app is integrate into)
* If the app is integrated to an unpublished theme, please preview the theme to check the booking form.

***

### 🛠️ Uninstall the app from a theme

1\. Open the app **Dashboard > App satus** > click **Turn off** button  > it directs to the theme editor

2\. In theme editor, disable the **app block** of **Tipo Booking Booking**

3\. Click **Save** to update the changes in theme editor.&#x20;

***

### ❌ Common Mistakes & Tips

#### &#x20;“I don’t see the booking widget”

Make sure:

* Theme integration is enabled
* You added a widget, button, or embed shortcode
* The service is **Active**, not Draft

#### &#x20;“Bookings work in admin but not on the site”

This usually means:

* App embed is OFF
* Theme changes were not saved

***

#### 💡  Tip

If you switch Shopify themes, you must re-enable the app embed for the new theme.

***

### ▶️ Tutorial video

{% embed url="<https://youtu.be/0an8uUe-JT0>" %}

***

**🙋 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.