Managing Time Slots with Booking Forms

This article will walk you through the various options available to customize the time slots when using Booking Form 3 and taking appointments.

N.B. This does not apply to the default widgets in the app. Support is offered for the Booking Form on Business and higher plans.

 

What are Time Slot Intervals?

By default, the app creates time slots based on your Operating Hours and the Duration you set in the product.

i.e. If your hours are 7:00 am to 11:00 pm and the duration is one hour then the time picker slots would show as 9:00, 10:00, 11:00, etc until 10 p.m. (the last appointment that can be booked with your operating hours).

screenshot: Default Time picker.

If your Duration was set to 5-hours, and your Operating Hours ran from 9:00 a.m. to 7:00 p.m. then you will have 2 time options: 

• 9:00 a.m. to 2:00 p.m.
• and 2:00 p.m. to 7:00 p.m.

In the event that you wanted to provide multiple 5-hour time options (Sliding Time Slot Intervals), then you would need to adjust the Time Slot Intervals. 

 

Sliding Time Slot Intervals (adjust your intervals to show multiple "time options" in your Time picker)

If you want to allow customers to choose a flexible starting time slot then you need to customize the booking form to show a sliding time interval.

i.e. Your hours are 10:00 a.m. to 6:00 p.m. and the duration is 4 hours but you want your customers to be able to choose a starting time on the hour.

 

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"