How to Add Koalendar to Shopify

Let customers book appointments without leaving your Shopify store. It takes two quick steps:

Copy your Koalendar embed code (or link)
Paste it into Shopify’s Custom Liquid/HTML area and save

📑 Menu

Step 1 – Copy your Koalendar embed
Step 2 – Add it in Shopify
Troubleshooting
Which style should I use?

📋 Step 1 – Copy your Koalendar embed

In the Koalendar dashboard, click Share next to the booking page you want to use.
Choose Add to website.
Pick an embed style and click Copy Code.

Embed style	What shoppers see
Inline Embed 🖥️	Full calendar appears right on the product/page.
Popup Widget 📍	Floating “Book now” button that opens the calendar in a pop‑up.
Popup Text/Button 🔗	Any link or button triggers a pop‑up calendar.

🎨 Tip: Customise colours, text, and position in Koalendar before copying so it matches your store theme.

➕ Just need a normal link? Copy your Koalendar share URL and link any button or menu item to open the scheduler in a new tab.

📝 Step 2 – Add it in Shopify

A. Inline Embed or Popup Text/Button (page or section)

In the Shopify admin, go to Online Store → Themes and click Customize for your published theme.
Navigate to the page or template where you want the calendar.
Click Add section (or Add block), choose Custom Liquid (or Custom HTML for older themes).
Paste your Koalendar code into the text box.
Save then Preview—the calendar or pop‑up trigger should load instantly.

B. Popup Widget (site‑wide floating button)

Online Store → Themes → Actions (... button) → Edit code.
Open layout/theme.liquid (or theme.liquid in newer themes).
Scroll to the bottom and paste your Koalendar widget script right before ************</body> .
Save. The floating button now appears across your storefront.

📝 Some themes offer a Theme settings → Custom scripts box. You can paste the widget script there instead of editing code.

🛠️ Troubleshooting

Issue	Fix
Calendar/widget not showing	Make sure you pasted the full script and saved the theme. Clear browser cache and reload.
Popup link shows but doesn’t open	Confirm both the trigger snippet and the Koalendar script are on the same page/template.
Widget on every page but you only want it on one	Paste the embed code on that specific page instead of theme.liquid.
Calendar height looks off	Adjust height in Koalendar before copying or wrap the embed in a div with custom CSS.

🤔 Which style should I use?

Goal	Best method
Show calendar inside a product or info page	Inline Embed 🖥️
Store‑wide call‑to‑action	Popup Widget 📍
Add scheduling to an existing CTA	Popup Text/Button 🔗
Simple external link	Hyperlink your Koalendar URL