Using App Blocks For Your BookThatApp Widgets

Shopify's App Blocks let you add BookThatApp widgets directly through the Shopify theme editor — no manual code snippets required. This makes it faster to add, move, or remove a widget, and keeps your theme cleaner if you ever switch themes.

App Blocks are available for the following widget types: Appointment, Search, Event Calendar, and Upcoming Events.

For New Implementation

If you're setting up a widget for the first time, here's how to get it live using an App Block:

1. Create your widget in your BTA admin as usual (Appointment, Search, Event Calendar, or Upcoming Events).
   
   
2. Save the widget. This is required before you can add the App Block, saving generates the Widget ID that Shopify needs to connect the block to the right widget.
3. Once saved, look for the Storefront placement section on the widget's settings page. It will show your Widget ID and a link to your Shopify theme editor.
   
4. Head to your Shopify Admin > Online Store > Themes, then click Customize on your active theme.
5. Navigate to the page where you want the widget to appear (e.g., a product page).
6. Click Add block, then look under the Apps category for the BookThatApp widget block.
   
   
7. Select it, and if prompted, enter the Widget ID from step 3.
8. Click Save in the theme editor.

Your widget should now appear on the storefront, no code editing needed.

For Existing Liquid Code Placements

If you already have a widget installed using the older manual liquid code snippet ("legacy" placement), this is not affected unless you make changes henceforth. You can switch it over to an App Block at any time. Switching won't affect your existing widget setup or bookings — it just changes how the widget is placed in your theme.

1. Go to your widget's settings in the BTA admin.
2. Under Storefront Placement Mode, change the setting from Legacy to App Block.
3. Save the widget. This confirms your Widget ID, which you'll need in the next steps.
4. In your Shopify Admin > Online Store > Themes > Customize, go to the page where your widget currently lives.
5. If you had a manual code snippet in place, you can remove it now (optional, it won't conflict, but keeping only the App Block avoids duplicate widgets on the page).
6. Click Add block > Apps, select the BookThatApp widget block, and enter your Widget ID.
7. Save.

Tip: If you're planning to switch Shopify themes in the future, moving to App Block mode now will save you from having to manually re-add code snippets later, the App Block carries over automatically when you switch themes (as long as the new theme is OS 2.0).

Troubleshooting

• Don't see "Apps" in the block picker? Your theme may not be OS 2.0, the app may not be installed on that theme, or the widget hasn't been saved yet to generate a Widget ID.
• Widget not showing after adding the block? Double-check the Widget ID matches exactly what's shown in your BTA widget settings.
• Switched themes and the widget disappeared? If the previous theme used a legacy code snippet, that snippet doesn't carry over automatically, you'll need to add the App Block fresh in the new theme.

Still stuck? Reach out to support via support@bookthatapp.com with your store URL and the widget you're working with, and we'll take a look.