If you want to set up a process on your Booqable website to encourage your customers to first select rental dates before viewing your products so the availability is shown right away, then here's a tutorial on how to do this.
Creating a template in the Website builder
Navigate to the Online store and click Customize website.
If you haven't already, you'll need to install a theme so you can start customizing it.
In the top left corner, click the Templates button and click Add template from the bottom left of the menu or you can do this on the Home template.
Give your new template a name and click Save.
Adding sections to your template
For this part, here's an example for how this can be done, but please note that the sections used and the settings can all be changed based on the design you would like to create. For example, you can choose to use a Text section instead of the Title section.
Here is what this example will look like and to show you what sections are used:
To make it as clear as possible to your customers what the steps are, add a Title section to outline the steps. Click Add section from the bottom left and choose Title.
You can add titles for as many steps as you need.
In the Title section settings, add the step as a title and leave any sections you don't want shown blank.
Next, add a Date picker section.
Tip: You can change the title text in the date picker section settings which will edit the text next to the checkmark above the date picker.
Add a Call to action section or any other section that includes a button.
Make sure that the button links to your products by changing it in the section settings. You can also customize the title, description, and button label from the settings.
To change the link, click the dropdown for Button 1 link, select Products and click All products.
By adding all of these sections and customizing them, you should have a design that looks similar to the example below:
Adding a new template as a page and menu item
If you decided to create a new template, you will need to assign it to a page.
💡Note: If you've added the sections on the homepage, the following steps are not necessary.
Exit the website builder
Navigate to the Online store > Website builder > Pages:
Click Add page and from the Template dropdown, make sure to select the new template you just created.
Give it a title, edit any other settings, and click Save once you're finished.
Adding a menu to your website header
The final step is to make sure this process is linked on your website and the most common way would be to add the menu in the navigation bar.
Navigate to the Online store > Website builder > Menus and Add menu or edit an existing menu.
From the Link dropdown, click Pages then select the new page you just created.
Return to Online store and Customize website.
Click on the Header section.
Click Select menu and select the menu you would like to have displayed in the navigation bar.
The menu should now appear as a navigation bar across your website!
