Online booking on Shopify: embed your Klendr form
One Custom Liquid section — your booking form right in your Shopify store.
How it works
Your Klendr booking page — services, free time slots, confirmations and reminders — appears inside your own website in a secure frame. Clients book without leaving your site; every appointment lands in your Klendr calendar instantly, and the form always shows your live availability.
Start with your booking page in Klendr
The widget is not a separate form to fill in — it IS your Klendr booking page, shown inside your site. So build that page first: add your services with durations and prices, upload photos, write your welcome text, then open the branding editor and choose the accent and background colours, the font and the card style. Everything is yours to change: colours, fonts, cover and logo, service list and descriptions, working hours, even a second language. Only then copy the embed code.
Step-by-step setup
Copy your embed code
In Klendr open Integrations → “Embed code” and copy your personal code — your booking link is already in it.
Open the theme editor
Shopify admin → Online Store → Themes → Customize. In the top bar pick the page where clients should book (for example a page called “Book”).
Add a Custom Liquid section
Click “Add section”, choose “Custom Liquid” and paste the code into its Liquid field. Custom Liquid keeps the script intact; the page text editor would remove it.
Save and test
Press Save and open the page in your store. Make a test booking — it shows up in your Klendr calendar immediately.
The embed code
<iframe src="https://klendr.me/book/YOUR-SALON?embed=1"
style="width:100%;border:0;height:640px" title="Booking" id="klendr-frame"></iframe>
<script>(function(){var f=document.getElementById('klendr-frame');
function tell(){try{f.contentWindow.postMessage(
{type:'klendr:hostlang',lang:document.documentElement.lang||''},'*');}catch(e){}}
addEventListener('message',function(e){var d=e.data;if(!d)return;
if(d.type==='klendr:height'&&d.height){f.style.height=(d.height+8)+'px';}
if(d.type==='klendr:ready'){tell();}});
f.addEventListener('load',tell);})();</script>Replace YOUR-SALON with your booking-page name. Your personal, ready-to-paste code is in Klendr → Integrations → “Embed on your website”.
What language will the form be in?
By default the widget follows your website: the code passes your page language to it, so an English page shows an English form. If your site declares no language, the widget uses your salon language from Klendr. Want it fixed for good? In Klendr → Integrations → “Embed code” pick a language before copying the code — it is added to the link as &lang=xx.
What it looks like
On a desktop site
On mobile
These screenshots show one colour scheme as an example. Your form takes your own colours, font and services — set them in Klendr and the widget follows instantly.
Frequently asked questions
Why not paste it into the page editor?
Shopify’s rich-text editor removes script tags, so the form could not resize itself. The Custom Liquid section keeps the code as it is.
Does it work on every Shopify plan?
Yes. Custom Liquid is available in Online Store 2.0 themes on all plans; on older themes you can add the code to the template file instead.
Where do the bookings go?
Into your Klendr calendar, with the usual confirmations and reminders to the client.