Managing the Duration of Time Slots

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

Time Slot Intervals

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

ie. 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 pm (the last appointment that can be booked with your operating hours).

Time Slot Duration

You can manually specify the duration:

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>