Skip to main content
Seatingly.
Booking Widget

Add the booking widget to Shopify

Install the Seatingly widget in a Shopify theme using a custom Liquid block, a page’s HTML editor, or the theme layout for a store-wide floating button.

Seatingly Support TeamLast updated

If your business sells online and takes bookings — a café with a coffee shop, a salon with a retail range, a clinic with a product line — the Seatingly widget sits comfortably inside a Shopify storefront. There are three ways to install it, depending on whether you want it on one page or across the whole store.

html
<div data-seatingly-widget="YOUR_WIDGET_ID"></div>
<script async src="https://seatingly.com/widget/v1.js"></script>
Copy this from Business Profile → Booking Widget and confirm the status shows Published.

Option 1 — A custom Liquid block in the theme editor

This is the cleanest method on a modern Shopify theme, because it keeps the widget as a real section you can move around in the editor.

  1. From your Shopify admin, go to Online Store → Themes and click Customize on your live theme.
  2. Use the page selector at the top to open the page where the widget should appear.
  3. In the left sidebar, choose Add section, then add a Custom Liquid block.
  4. Paste both lines of the Seatingly snippet into the Liquid code field.
  5. Drag the section to the right place in the page order, then click Save.
  6. Open your storefront in a normal browser tab and check the widget loads.

Tip

The Custom Liquid block accepts plain HTML — you do not need any Liquid syntax. Paste the snippet exactly as it is.

Option 2 — A page’s HTML editor

Use this when the booking flow belongs inside the body copy of a specific page, for example an "Appointments" page you have already written.

  1. In the Shopify admin, go to Online Store → Pages and open the page.
  2. In the content editor toolbar, click the <> “Show HTML” button to switch to the HTML view.
  3. Paste the embed code where you want the widget within the page markup.
  4. Save the page and view it on your live storefront.

Rich text editors can strip scripts

Some Shopify themes and third-party page builders sanitise page content and remove <script> tags when the page is saved. If the widget disappears after saving, use the Custom Liquid or theme layout method instead, or fall back to the direct booking link.

Option 3 — Store-wide in the theme layout

For the Floating booking button widget type, load the script once for the whole store.

  1. Go to Online Store → Themes, open the … menu on your live theme, and choose Duplicate. Always work on a backup.
  2. On the duplicate, choose Edit code.
  3. Open layout/theme.liquid.
  4. Paste the embed code just before the closing </body> tag.
  5. Save, preview the duplicate theme, and publish it once you are happy.

If the widget does not appear

SymptomMost likely cause
Nothing renders on any pageThe widget configuration was saved as a draft and never published.
The snippet vanishes after saving a pageThe page editor stripped the script tag — use Custom Liquid instead.
The widget shows on desktop but not mobileA theme section is hidden on small screens; check the section’s visibility settings.
Old colours or labels still showA CDN or theme cache is serving a stale page. Hard refresh, then re-check.
text
https://seatingly.com/w/YOUR_WIDGET_ID
Direct booking link — use it on a navigation item or button when a script cannot be installed.

To style the widget so it matches your Shopify theme, see Customize your booking widget. To attribute bookings to your storefront rather than lumping them in with everything else, create a tracking link with a tracked embed code.

Was this article helpful?

Your answer helps us decide what to rewrite next.

Related articles

Booking Widget

Install the Seatingly booking widget

Generate your embed code in the Partner Portal, paste it into your website, and start taking bookings directly on your own pages.

Read articleBooking Widget

Add the booking widget to WordPress

Paste the Seatingly embed code into a WordPress page with a Custom HTML block, or into your theme for a site-wide floating button.

Read articleBooking Widget

Customize your booking widget

Match the widget to your brand — theme, colours, border radius, button label, language, header and background images, and the Notify Me option.

Read article

Still need a hand?

If a guide did not cover it, a real person on the Seatingly team will. Tell us your business name and what you are trying to do, and we will reply within 12 hours.

Contact supportSupport@seatingly.com
Add the booking widget to Shopify — Seatingly Support