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:
From your Shopify Admin, go to Online Store > Themes > Edit theme
Open the page template you want to add the booking widget
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
Important: Ensure that the Tipo Appointment Booking toggle is enabled in the App Embeds tab
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 or form)
Short code: use the manual shortcode to show one service
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.
2. The "Services" Block (List or Grid or Form Widget)
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.
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:
Add the short code to the app block
Compare table
Here is a detailed comparison of the three methods available for adding the booking widget to your Shopify store.
Feature
🔳 Service Block
📑 Services Block
🔗 Shortcode
Primary Goal
Feature a single specific service
Display a catalog of all services
Manual placement in text areas
Setup Complexity
Very Low (No code)
Very Low (No code)
Medium (Requires copy/paste)
Layout Options
Button or Full Form
Grid or List View
Inherits surrounding style
Auto-Updates
Yes (Via Theme Editor)
Yes (Via Theme Editor)
No (Must update code manually)
Best Location
Landing or Product Pages
Main "Book Now" Page
Blog posts & Custom sections
Last updated