Variable / Sliding Time Slots

This article will walk you through the various options available to customize the 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).

Sliding Time Slot Intervals

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.

ie. Your hours are 10:00 am to 6:00 pm and the duration is 4 hours but you want your customers to be able to choose a starting time on the hour.

To add this feature, please follow these 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>

Additional Options

• 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"