Before you begin
You will need to generate your Calendly embed code. As a reminder, the embed code can be generated for either a single event type, or your account's booking page.
- Shopify supports the following Calendly embed options:
- Inline
- Popup Text
- Popup Widget
Inline or popup text embed
With Shopify, you have the ability to add the Calendly inline or popup text embed options.
- From your Shopify admin, go to Online Store, then customize
-
From the left-hand template menu, select Add section, then Custom Liquid
-
A menu will appear on the right-hand side. Paste the embed code you generated earlier in the Custom Liquid text box, and select save
Popup widget
You also have the ability to add the Calendly popup widget embed.
-
From your Shopify admin, go to Online Store, then Themes
-
Find the theme you want to edit, select the … button to open the actions menu, and then select Edit code
-
From the left-hand menu, select the theme.liquid
-
Create a line break below the <head> tag, and paste the embed code you generated earlier, and select save
-
To preview the changes, select Preview store in the top right-hand corner
Common Shopify issues
Popup close button not displaying
Some users may not be able to close the Calendly popup (using the popup text or popup widget options). This is due to some Shopify themes adding display:none to empty div elements, which would include the close button and the additional background overlay that can be clicked to close the popup.
To fix this, paste the following HTML directly below your Calendly embed code:
<style>
.calendly-overlay .calendly-popup-close,
.calendly-overlay .calendly-close-overlay {
display: block !important
}
</style> Inline embed doesn’t show as full height
The first thing to try is to edit the default height included within the embed code. See the increased height of 1000px in the below example:
<div class="calendly-inline-widget" data-url="https://calendly.com/YOUR_EVENT" style="min-width:320px;height:1000px;"></div>Some themes may overwrite the height settings in the embed code. In these cases, add the following css at the bottom of Online Store → Theme → Edit code → Assets → theme.scss.liquid
iframe {
height: 100vh !important;
}