Calendar Widget

This guide explains the functionality and setup process for the Calendar Widget in BookThatApp (BTA).

Overview

The Calendar Widget is an updated version of the Event Calendar and can be added to your store navigation or any custom page. Features include:

• Modern, user-friendly look
• Ability to display multiple classes within a Course term
• Customizable calendar views without coding
• Can be added to any page, such as the home page or custom pages

Note: Only products with scheduled events (classes, tours, events, activities) will appear on the calendar.

Note: The custom Liquid code snippet method is a legacy feature. It's only available to stores that already had a widget placed this way before the switch to App Blocks — new widgets can only be added using App Blocks.

Step 1: Create the Calendar Widget

1. Navigate to Widgets → Store Wide Widgets → Events Calendar in the BTA admin.
   
   
2. Click Add Widget in the pop-up window.
3. Configure the widget settings as desired:
   • Preview the calendar on the right side
     
     
   • Adjust display options on the left side
      

4. Configure Translation Settings

   The Events Calendar Widget includes a Translations tab where you can customize the text labels displayed to your customers
   Example:
   
   In the Translations tab, the Spaces Remaining field defaults to spaces remaining, which displays on the calendar as "3 spaces remaining". You could change this to spots left so it reads "3 spots left" instead.

   
   The following fields below, are available :
   

   To update any label, navigate to the widget's Translations tab and replace the default text with your preferred wording. This is useful for stores operating in languages other than English or those wanting custom terminology. 
    

Step 2: Add the Calendar Widget to Your Theme (App Block)

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

Note: The custom Liquid code snippet method is a legacy feature. It's only available to stores that already had a widget placed this way before the switch to App Blocks — new widgets can only be added using App Blocks.
 

1. After saving your widget in Step 1, go to its settings page and find the Storefront Placement section. It shows your Widget ID and a link to your Shopify theme editor.
   
   
    

2. In Shopify Admin, go to Online Store → Themes, then click Edit Theme on your active theme.

3. Navigate to the page where you want the calendar to appear (e.g., a custom page or the home page).

4. Click Add block, then look under the Apps category for the BookThatApp widget block
   
   
    

5. Select it, and if prompted, enter the Widget ID from step 1.

6. Click Save in the theme editor.

Embedding the legacy custom liquid

On the widget's settings page, copy the embed code using the Copy button under Code.

Option A: Custom Page

1. Create a custom page in Shopify (e.g., titled "Calendar") or select an existing page.
   
   
2. In the page settings, switch to HTML view.
   
   
3. Paste the Calendar Widget embed code.

Option B: Home Page

1. Add a new section using the Custom Liquid section type.
   
   
2. Paste the Calendar Widget embed code.

Your Calendar Widget is now live and will display scheduled events according to the configuration selected in the widget preview.