Skip to main content

How to Integrate Bookla Standalone Component into Shopify

By integrating the Bookla standalone component into your Shopify store, you can offer your customers smooth and easy online booking right on your site.
This not only improves their experience but also makes scheduling appointments hassle-free.
It’s easy to set up, doesn’t require any coding skills, and you can manage everything easily from your Shopify admin panel.

How to add Bookla Standalone Component into Shopify​

1. Go to the Online Store section, then click on Themes.​

2. Click on the three dots (•••), then select Edit code.​

3. In the Sections folder, click Add a new section.​

Select Liquid as the type, enter a file name, example, "Bookla-widget" and click Done.

4. Delete the default code and replace it with the Bookla standalone component code.​

You can find the component code here and edit it: Bookla standalone component

Also, to define the Shopify section's name, settings, and presets, add the following schema block:

{% schema %}
{
  "name": "Bookla Widget",
  "settings": [],
  "presets": [
    {
      "name": "Bookla Widget"
    }
  ]
}
{% endschema %}

Changing code

5. Click Save, then Exit.​

6. Click on Customize.​

7. Click Add section, choose Bookla Widget, and click Save.​

Test the Component​

1. To test the component, go back to the dashboard by clicking Exit.​

2. Click View your store.​

3. Select a date, resource, and time, then click Continue.​

4. Enter first name, last name, and email, then click Book now.​

Once booked, a confirmation message will be displayed.

By following these simple steps, you’ve successfully integrated the Bookla booking experience into your Shopify store.