You can follow this written tutorial to learn how to install Booqable on your Shopify website, to start accepting online bookings for your rental products today.
By completing the following instructions, you will effectively replace all of Shopify's online booking functions (such as the shopping cart, online checkout, and add-to-cart buttons) with Booqable's own.
This means the orders and payments be reserved in your Booqable account, while still operating off the beautiful page designs you can create with a Shopify website.
How it works
This installation will replace your Shopify's product management, shopping cart, online checkout, and connected payment gateways with Booqable's own.
After you have completed this tutorial, the only time you need to log in to or update your Shopify account is when you wish to change the layout and design of your website.
To make this process easier, it’s best to have three tabs open on your browser. One with your Shopify account open, one with your Booqable account open, and one with this article open.
1. Choose your theme
First you will need to choose one of Shopify’s free website themes to be the template for your website. If you have already done this, skip forward to step 2.
1. On the Shopify theme store, click the ‘Explore Themes’ button.
2. On the left-hand side of the page, filter the results to display the free website themes that Shopify provides.
3. Click on the theme you wish to use and click ‘Try Theme’. It should now appear in your Shopify theme library under the ‘Online Store’ section of your account. For this example, I will use the free theme, ‘Dawn’.
2. Make a copy of your theme
A few changes will be made to your theme throughout the process, so before modifying your theme, it will be handy to have a copy of it by duplicating your Shopify account.
1. In your Theme Library, click the three dots next to your current theme, and click the ‘Duplicate’ option.
2. Click the three dots next to the duplicated theme, and select the ‘Rename’ option. You can rename this theme ‘Dawn with Booqable’, for example.
3. Activate your newly renamed theme copy by clicking ‘Publish’. Your new theme should show up now in the Current theme section of that page.
3. Paste the Booqable code
This step will include taking the unique javascript snippet code from your Booqable account, and pasting it into the header of your Shopify website’s theme code.
It may sound scary, but it’s a lot easier than you think!
1. In your Booqable account, go to Settings > Online Reservations > Website integration.
2. Under the ‘Other websites’ section, click the JavaScript snippet button.
3. Copy the Javascript snippet code to your clipboard.
4. Edit your Shopify theme
Now we we will follow the few steps required to paste the Booqable Javascript snippet code into the code of your Shopify theme.
1. Back in your Shopify account, Click the three dots next to your current theme, and select the Edit code option.
2. A page should appear as below. On the left-hand side, click on the file called ‘theme.liquid’.
3. This will open up the code for your Shopify theme. Scroll down to where you can see the tag called </head>. This is usually on line 239 of the code, depending on your theme.
4. Paste your recently copied Booqable code directly above this tag by clicking on the line above (that should be around line 238) and paste your Javascript snippet code. The lines above the </head> tag should now look something like below, with the </head> tag being moved down to around line 244.
3. Click Save, and close this tab.
5. Add your products into Shopify
You will need to have your rental products set up in Shopify to connect them to those created in your Booqable account.
If you have already completed this, skip forward to step 5.
1. In the ‘Products’ section of your Shopify account, add the rental products you wish to display on your website for online reservations.
2. Add your title, images, and product description - but leave out your price, SKU/barcode, and variants. These will be the elements of your product that you need to set up in Booqable, which will be managed entirely from your Booqable account.
3. Unselect the 'Track quantity' button on each product, so your stock is no longer tracked in Shopify. This will make sure only the Booqable product availability will appear on your website.
6. Create your products in Booqable
You can follow Booqable’s video guide, or written guide to learn the best way to set up your products for your business.
You need to make sure you have completed this step before you start the next stage of the installation process below.
7. Add your Booqable product code
Now it’s time to connect your Booqable products to your Shopify products, by pasting our individual product codes in your Shopify product descriptions.
1. Go into your Booqable accounts inventory section. Click into a product, click into the ‘Online store settings’ panel at the top of the page, and scroll down to the ‘Embed options’ section.
2. Make sure the ‘Button’ panel is selected, and copy the HTML code to your clipboard. This is the code to connect this particular product to Shopify.
3. Go back into your Shopify account’s ‘Products’ section, and click on the matching product.
4. In the product description section, click the ‘Show HTML’ </> button on the right-hand side of the formatting toolbar.
5. Paste your recently copied Booqable product code into the Description box, and click Save.
6. In the same product screen, click the ‘Preview’ button to open up your published product page in a new tab, and refresh the page.
You should now see the Booqable buttons under the Shopify buttons for variation selector, price, quantity selector, availability and add to cart - as well as the floating Booqable shopping cart like below.
8. Hide the Shopify buttons
Now that the add-on is successfully installed, you will still need to hide Shopify's Add to cart button, Quantity selector, Variation selector, and Price so that Booqable’s product buttons are the only ones able to be selected by the customer.
1. On your Shopify ‘Online Store’ page, click the ‘Customize’ button next to your published theme.
2. Click on your previously edited product, by clicking the page selector bar on the top of the screen and searching your product name.
3. You should also now see the Booqable floating cart on the bottom right of the screen on all pages.
Once your product page is loaded, your sidebar should look as shown below, with the options to select fields within the product information section such as Price and Buy buttons.
4. You can now click the Price, Variant Picker, Quantity selector, and Buy buttons fields and click the ‘Remove Block’ button that will appear at the bottom right of the screen. Click Save after every block removal.
5. The Shopify fields should now be removed, and your product buttons should only show those from Booqable, as seen below.
6. For the rest of your products, you will need to repeat the process of copying the button code from your Booqable account and pasting it into your matching Shopify product as detailed in Step 6.
7. Now that you have removed the Shopify buttons on each individual product page, you will also want to hide Shopify's product filtering bar (seen below). This is a bar that resides at the top of any page with multiple products listed, with drop-down menus for the Shopify 'price', 'availability', and 'sorting' which we will want to hide.
8. In the theme customizer, click on your product collection page. For me, this is my ‘Rental Shop’ page, but it can be any page you have multiple products listed on like below. Click the 'product grid' section on the left-hand side.
9. In the product grid settings, make sure ‘Enable filtering’ and ‘Enable sorting’ is switched OFF.
10. Now your page should appear free of the Shopify product filtering bar like below, so now your customers will see only Booqable's availability and sorting. In the next step, we will hide the Shopify pricing that still appears on this page.
💡Note: If the theme you have chosen for some reason does not include the ability to hide the Shopify buttons in the customizer tool, you can go directly to the code editor, and adjust the theme files to do so.
You can follow Shopify's written guide for further instructions.
9. Hide prices on product collection pages
Even though you have removed the Shopify buttons on each individual product's page, you will need to complete one more step to hide those appearing as $0.00 on Shopify’s product collection page (as seen below).
1. Back in your Shopify homepage, click the 'Settings' button in the bottom left of the screen and have the 'Store details' tab open. Scroll down to the 'Store currency' section and click 'Change formatting'. We will want to add code into the 'HTML with currency' and 'HTML without currency' fields in this section.
2. Wrap the first two formats in a span element with a class set to hidden. Don't use quotes. The fields should appear as below.
3. On your product collection and all other pages, the products should now be listed without the $0.00 value as seen below.
10. Add the date picker
We’re almost there! Now for the final step, adding in your date selector to your website.
1. Back in your Booqable account, click into Settings > Online reservations > Website integration > and under ‘Other Websites’, click ‘Javascript snippet’.
2. Under ‘Step Two - Add elements to your website’, copy the first code under ‘Date Picker’ to your clipboard.
3. Back in your Shopify theme customizer, click the top page selector bar again and click into ‘Homepage’.
4. On the left-hand side editor tool, click the blue 'Add section' button where you would like to add your date picker. Type ‘custom liquid’ into the search bar, and select.
5. A blank block will now appear on your screen and the left-hand sidebar will appear with a text box titled ‘Custom liquid’. Paste in your previously copied date picker code in this top text box and click save.
6. A date picker should now appear on your homepage for your customers to select the rental dates and times of their order. Feel free to move this date picker block to the position you want it to be on the page. If it doesn’t appear right away, try refreshing the page.
💡Note: The benefit of having the date picker be completed by the customer on the home page, before they browse your products, is that the products will appear to the customer with the correct price and availability first for their chosen dates.
You can edit the settings for this date picker in your Booqable account following our written guide to setting up your availability.
7. You can repeat this step for any pages you wish the date picker to also be placed, such as product pages. Just browse the page you wish to select from the top page selector bar and repeat stages 1-6 of Step 9. This is not required, however, as the customer will always be able to adjust their chosen reservation times on the floating, pop-up shopping cart should they need to.
Additionally, if you change any of the product details or store settings within Booqable, your Shopify store will automatically be updated.
You're all set!
You have now completed the steps required to install Booqable onto your existing Shopify website!