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

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.