1. Help Center
  2. Integrations & Apps
  3. Embed Options

How to add Calendly to a Shopify site

Embed Calendly on your Shopify site so visitors can book time with you without leaving your store. Shopify supports inline embeds, popup text, and popup widgets.

This guide shows how to add each embed type and resolve common display issues.

Before you begin

First, generate your Calendly embed code. You can embed:

  • A specific event type, or
  • Your booking page

Supported embed types in Shopify

Shopify supports three Calendly embed options:

  • Inline embed – Displays your calendar directly on a page
  • Popup text – A text link that opens your calendar in a popup
  • Popup widget – A floating button that opens your calendar on any page

Add an inline or popup text embed

To embed Calendly on a specific Shopify page:

  1. In Shopify admin, go to Online Store > Customize
  2. In the left menu, select Add section
  3. Choose Custom Liquid
  4. On the right, paste your Calendly embed code in the text box
  5. Select Save

This works for both inline and popup text embed codes.

Display a popup widget across your entire site

To show a floating Calendly button on every page:

  1. In Shopify admin, go to Online Store > Themes
  2. Find your theme and select the ... button
  3. Select Edit code
  4. In the left menu, choose theme.liquid
  5. Find the <head> tag
  6. Add a line break right after it
  7. Paste your Calendly popup widget code
  8. Select Save

To check if it’s working, select Preview store.

Troubleshoot Shopify display issues

Shopify embed not displaying

If your Calendly embed doesn’t appear on your Shopify site, follow these steps to troubleshoot.

Step 1 – Confirm your embed code and theme settings

  1. In Calendly, copy the Inline Embed code for your Event Type.
  2. In Shopify, go to Online Store > Themes.
  3. Find your active theme and select Actions > Edit Code.
  4. Choose one of the following options:
    • Add a new custom HTML block, or
    • Create a new Snippet file.
  5. If using a snippet, name it something easy to reference later (like calendly).
  6. Paste the Calendly embed code into the snippet or HTML block and select Save.

Step 2 – Reference the embed in your page template

  1. Open the Shopify page template where you want to display your Calendly embed.
  2. Add the following code at the bottom of the file:
    {% include 'calendly' %}

    (Replace 'calendly' with the name you used if it's different.)

  3. Save your changes.
Popup close button isn’t working

Some Shopify themes hide empty HTML elements, which can prevent the popup from closing.

Fix: Add this HTML after your embed code:

<style>
 .calendly-overlay .calendly-popup-close,
 .calendly-overlay .calendly-close-overlay {
  display: block !important;
 }
</style>
Inline embed doesn’t show full height

If your calendar looks cut off:

  1. Increase the height in your embed code: 
    <div class="calendly-inline-widget"
data-url="https://calendly.com/YOUR_EVENT"
style="min-width:320px;height:1000px;">
</div>
  2. If that doesn't fix it, add this CSS to your Shopify theme:
    • Go to Online Store > Edit code > Assets > theme.scss.liquid
    • Add the following at the bottom: 
      iframe {
height: 100vh !important;
}

This forces the iframe to use the full height of the screen.

Was this article helpful?