Managing Time Slots with Booking Forms

⏰ Customizing Time Slots in Booking Form 3

This guide covers the various customization options available for time slot configuration when using Booking Form 3 for appointment bookings.

📋 Important Note: These customization features are exclusive to Booking Form 3 and are available on Business plans and above. Default app widgets do not support these advanced time slot options.

---

🤔 What Are Time Slot Intervals?

Time slot intervals determine how appointments are displayed and scheduled within your booking system. The app automatically generates available time slots based on two key factors:

🏪 Your Operating Hours + ⏱️ Service Duration = Available Time Slots

📝 Example: → Operating Hours: 9:00 AM - 10:00 PM
→ Service Duration: 1 hour
→ Result: Time slots appear as 9:00 AM, 10:00 AM, 11:00 AM... through 9:00 PM

Note: The last slot (9:00 PM) ensures the full service duration fits within operating hours.

screenshot: Default Time picker.

📊 Extended Duration Example:

Let's say you offer longer services: → Service Duration: 5 hours
→ Operating Hours: 9:00 AM - 7:00 PM
→ Available Time Slots: • 9:00 AM - 2:00 PM • 2:00 PM - 7:00 PM

🔄 Need More Flexibility?

If you want to offer customers additional start time options (like hourly intervals), you'll need to configure Time Slot Intervals for sliding availability.

---

⚡ Sliding Time Slot Intervals Customize intervals to show multiple start time options in your time picker

Standard time slots can feel restrictive for longer services. Sliding intervals give customers flexible booking windows while maintaining your service duration requirements.

📝 Practical Example: → Operating Hours: 10:00 AM - 6:00 PM
→ Service Duration: 4 hours
→ Goal: Allow customers to start their appointment on any hour

Without Sliding Intervals:

• 10:00 AM - 2:00 PM
• 2:00 PM - 6:00 PM

With Sliding Intervals:

• 10:00 AM - 2:00 PM
• 11:00 AM - 3:00 PM
• 12:00 PM - 4:00 PM
• 2:00 PM - 6:00 PM

 

screenshot: Time picker showing Sliding Time Slot Intervals.

When using the Booking Form 3, we can change the intervals by applying the data-bta-slot-interval attribute to the <select> element that produces the "Time picker". This is found in the Snippets/booking-form.liquid file in your theme.

The data-bta-slot-interval attribute will update both the interval and the duration. To maintain the duration assigned in the BTA product's settings, then the following attribute is also needed: data-bta-slot-type="duration". When applied, the <select> element should look like this:

<select id="{{ attribute }}-{{ product.handle }}" name="properties[Time]" class="bta-opening-hours bta-load-enable" disabled="disabled"
data-datepicker="booking-start-{{ product.handle }}"
data-prompt="Select time..." data-bta-display-range="true" 
data-bta-slot-interval="60" data-bta-slot-type="duration">

 

Here are the steps:

1. Open your Shopify Theme Editor, click on your current theme and choose Edit HTML.

2. Find the Snippets section and open booking-form.liquid.

3. Look for the Time element (around line 20).

Before:

 <div>
{% capture attribute %}booking-time{% endcapture %}
<label for="{{ attribute }}-{{ product.handle }}">Time:</label>
<select id="{{ attribute }}-{{ product.handle }}" name="properties[Time]" class="bta-opening-hours bta-load-enable" disabled="disabled"
data-datepicker="booking-start-{{ product.handle }}"
data-prompt="Select time..." data-bta-display-range="true" >
<option class="loading">Loading...</option>
</select>
<span class="bta-no-slots-available" style="display: none;">No times available</span>
</div>

 

4. Add a class of data-bta-slot-interval="X" where "X" represents the number of minutes you want between time slots.  

After: 

<div>
{% capture attribute %}booking-time{% endcapture %}
<label for="{{ attribute }}-{{ product.handle }}">Time:</label>
<select id="{{ attribute }}-{{ product.handle }}" name="properties[Time]" class="bta-opening-hours bta-load-enable" disabled="disabled"
data-datepicker="booking-start-{{ product.handle }}"
data-prompt="Select time..." data-bta-display-range="true"
data-bta-slot-interval="60">
<option class="loading">Loading...</option>
</select>
<span class="bta-no-slots-available" style="display: none;">No times available</span>
</div>
</div>

 

Important Details

• To hide the end time, change data-bta-display-range="true" to data-bta-display-range="false"
• To limit time slots within operating hours add data-bta-strict-duration="true"
• To set time slots based on the duration of the variant, add data-bta-slot-type="duration"