Webflow is a 'no code' website builder, and an increasingly popular choice amongst many Booqable's subscribers. Webflow may be your best choice to save time, and reduce the complication that are all too common in setting up your first website.
The best part is, you can connect your Booqable account to take rental orders through your Webflow website in a simple, few-step process!
How it works
The first step of installing Booqable on a Webflow website is completed by adding the installation code to the header of each webpage you create. This will add the online shopping cart to each page, and connect your general Booqable account settings to your Webflow website.
1. Add the installation code
1. When you open up Webflow.com, click the + New site button to start building your online store.
2. You can choose a free template that you like to automatically generate a pre-built theme for your webpages, to avoid styling each page individually.
3. Once you have selected a theme, your website designer page will appear, with all the options to start adjusting and styling your webpages.
4. Click the + Add button in the top left of the sidebar menu, and scroll down to the Embed option.
5. Drag the embed block from the sidebar menu to the top of the page, like below.
6. In your Booqable account, go to Online store > Website integration > and click Javascript snippet under Other Websites. Click Copy to clipboard under the Javascript snippet code.
7. Double click the Embed block that you have positioned on the top of your Webflow page, and this pop-up should appear. Paste the code, and hit save.
The message in the Embed block should appear as below.
7. Repeat this process for each webpage included in your Webflow store.
You can find and adjust each page on your website by clicking the Page: Home button the the top left menu bar.
💡Note: To add extra pages in your Webflow website, click the Page: Home button and the Create New Page icon, as seen below. You can then fill out your New Page Settings, and remember to repeat the above process to install Booqable onto it.
2. Paste the components
The second step of installing Booqable on a Webflow website; is by copy and pasting the different embeddable component codes from your Booqable account to position them on your webpages as you wish. This will allow you to drag and drop components such as the date picker, product collections or catalogue, individual products, and a filtered search bar.
1. You can start by adding in the date picker element, where you customers will enter in the dates and times of their reservation to bring up product availability on your website.
On your website designer page, click the Pages: Home button again on the top left menu bar, and you can find the page you wish to add the date picker to.
2. Click the Add Element button from the left hand sidebar menu and scroll down to the Embed option.
3. Like we did in step one; drag the Embed element onto the page, only this time - you can choose the position on the page you wish the date picker to appear.
I have chosen underneath the image banner, to direct my customers to place their dates as a first step on my online store.
4. In the embed code popup box that will appear, add the date picker code. To find this code, go to Settings > Online Store > Website integration > Other Websites, and scroll down to the Date picker code to copy to your clipboard.
5. Place the code into the pop-up box that appears when the Embed block is dragged onto your chosen page position.
6. Repeat this process for all other elements; such as product catalogues, individual products, a filtered search bar, and many more.
You can find all other codes for placing elements on your website in our Embeddable online store components help centre article.
💡Note: To preview the changes on your store, click the Publish button on the top menu bar on the right hand side. There you will have a link next to the domain to preview your changes.
Best practices
1. Placing the date picker on the website homepage
If you are wondering which webpage your customers should fill out the dates picker on, we suggest to position it on your websites homepage. This allows the customer to fill in the dates and times of their reservation before seeing any prices, or availability of your products. This reduces the wrong expectations of availability, for example, if a product is shown before the correct dates by the customer is entered.
You can add in the date picker code through an Embed block, as instructed below, then use your Webflow designer to add in a button named 'Rent now' underneath (click Add Element to find this), which you can place a hyperlink to the product page.
The customer can enter in their dates, click the button to view the available products and their accurate prices per the customers reservation dates.
FAQ
1. Which Webflow subscription do I need for installing Booqable on my website?
In order to embed the Booqable codes so you can connect your account to Webflow, you will need the 'custom code' feature to be enabled on your Webflow subscription.
You can see if this is currently available on your Webflow plan by checking the pricing page on Webflow's website.
2. Do I need to choose a certain website template for this installation to work?
Thankfully, no! You can complete this installation on any of Webflow's free or paid website templates.
3. Can I get help from someone to set this up for me?
Absolutely! Booqable currently offers a range of set-up option that allow you have one-on-one live sessions with a Booqable experts, who can complete this installation for you while you are live on the call.
💡Note: This is for Booqable subscribers only.
You're all set!
You have successfully completed Booqable's guide on connecting your Booqable account to your Webflow online store, to make running your rental business even easier.