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:
- In Shopify admin, go to Online Store > Customize
- In the left menu, select Add section
- Choose Custom Liquid
- On the right, paste your Calendly embed code in the text box
- 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:
- In Shopify admin, go to Online Store > Themes
- Find your theme and select the ... button
- Select Edit code
- In the left menu, choose theme.liquid
- Find the <head> tag
- Add a line break right after it
- Paste your Calendly popup widget code
- 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:
- 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> -
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.