Skip to main content
How to Embed a Booking Platform on Your Shopify Site This guide will show you how to integrate a booking platform into your Shopify store using an iframe. This process involves editing your Shopify theme’s code, but don’t worry—we’ll guide you through each step. Prerequisites Before you start, make sure you have the following: Admin access to your Shopify store: You need to be able to edit your store’s themes. URL of your booking platform: This is the link to the booking platform that you will embed in your store. Step 1: Access Your Theme Editor Log in to your Shopify admin panel. Navigate to Online Store > Themes. Find the theme you want to edit, and click Customize. Go to the top menu and click on Edit code.(Insert image here: Screenshot of navigating to the theme code editor) Step 2: Add a New Section for the Iframe In the theme code editor, under the Sections directory, click on Add a new section. Name your section booking-platform.liquid.(Insert image here: Screenshot of adding a new section in Shopify editor) Copy and paste the following code into the new section file you just created: liquid Copy code 
{% comment %}
This section creates an iframe to embed the booking platform.
{% endcomment %}
{% schema %}
{
  "name": "Booking Platform",
  "settings": [
    {
      "type": "text",
      "id": "iframe_url",
      "label": "Iframe URL",
      "default": "https://yourbookingplatform.com"
    },
    {
      "type": "text",
      "id": "iframe_height",
      "label": "Iframe Height",
      "default": "600px"
    },
    {
      "type": "text",
      "id": "iframe_width",
      "label": "Iframe Width",
      "default": "100%"
    }
  ]
}
{% endschema %}
{% html %}
<div class="iframe-container">
  <iframe src="{{ section.settings.iframe_url }}" height="{{ section.settings.iframe_height }}" width="{{ section.settings.iframe_width }}" frameborder="0" allowfullscreen></iframe>
</div>
{% endhtml %}
Click Save.(Insert image here: Screenshot of the newly created section file with code) Step 3: Include the Iframe in Your Storefront Return to the Online Store > Themes page. Click Customize for your theme to open the theme editor. Navigate to the page where you want to add the booking platform. Click Add section and select Booking Platform. You will see fields to input the URL and dimensions of your iframe.(Insert image here: Screenshot of adding the new section to a page in the theme editor) Fill in the details: Iframe URL: Enter the URL of your booking platform. Iframe Height: Adjust this based on how much space you want the booking platform to take on your page. Iframe Width: Typically set to “100%” to span the full width of the page container. Click Save. Final Step: Review and Test After embedding the iframe, view your website to ensure that the booking platform appears correctly. Test the functionality to make sure that bookings can be made seamlessly without leaving your Shopify site.