Back to Documentation

Shopify Installation

Add Kentroi booking widgets to your Shopify store.

Prerequisites

  • A Kentroi account with at least one appointment type configured
  • A Shopify store with theme editing access
  • Your Widget ID from the Kentroi dashboard

Adding to a Shopify Page

1

Get Your Embed Code

Log in to your Kentroi dashboard and go to Embed Widget. Copy the embed snippet for your booking widget.

2

Go to Shopify Pages

In your Shopify admin, navigate to Online Store > Pages.

3

Create or Edit a Page

Create a new page (e.g., "Book an Appointment") or edit an existing page where you want the widget.

4

Switch to HTML Editor

In the page editor, click the "</>" button to switch to HTML editing mode.

5

Paste the Embed Code

Paste your Kentroi embed snippet:

<!-- Kentroi Booking Widget -->
<div data-kentroi-type="booking" data-widget-id="YOUR_WIDGET_ID"></div>
<script src="https://www.kentroi.com/embed.js" async></script>
6

Save and Preview

Click Save and preview your page. The widget renders natively and auto-sizes to fit.

Tip

You can also add the widget to your theme using the theme editor. Go to Online Store > Themes > Customize and add a "Custom HTML" or "Custom Liquid" section.

Adding to Your Theme

1

Open Theme Customizer

Go to Online Store > Themes > Customize.

2

Add a Section

Click "Add section" and choose "Custom HTML" or "Custom Liquid" (depending on your theme).

3

Paste the Code

Paste your Kentroi embed code into the HTML/Liquid content area.

4

Position and Save

Drag the section to your desired position and click Save.

Troubleshooting

Widget not appearing

Make sure you're in HTML editing mode when pasting the code. Some Shopify themes strip script tags in the rich text editor — use the Custom HTML/Liquid section instead.

Page is blank after adding code

If the page content disappears, undo the change and try again. Make sure you're using the HTML editor, not the visual editor.

Need Help?

Having trouble with your Shopify installation?

Contact Support