I can’t for the life of me work out how to add a google calendar to a page. I’ve followed all the steps in multiple videos and articles and still can’t seem to do it. On the page it just comes up with the link. Any help would be greatly appreciated! Thank you.
Topic summary
The original poster struggles to embed a Google Calendar on their Shopify page—it displays as a link instead of an interactive calendar. They want customers to view booked wedding dates.
Solution identified:
Create a custom page template in the theme customizer, insert an HTML block, and paste the Google Calendar embed code (iframe) there. The page content appears blank in the Shopify admin editor, but the calendar displays correctly on the live site.
Key steps:
- Obtain the embed iframe code from Google Calendar settings (not just the shareable URL)
- Ensure the calendar is set to public in Google Calendar
- Use the theme customizer to add an HTML block with the embed code
- Apply the custom template to the desired page
Additional issue raised:
One user reports the embedded calendar displays cut-off on mobile devices. The suggested fix involves custom CSS to make the iframe responsive.
Alternative solutions mentioned:
- Third-party Shopify apps (The Shop Calendar, Elfsight Event Calendar, EmbedAny) that simplify Google Calendar integration without manual coding
The discussion remains open with multiple workarounds provided but no single definitive solution for all scenarios.
2 Likes
@bellam - what do you want the Google calendar to do?
Mario
1 Like
Hi!
I’d just like for customers to be able to see what dates have been taken for weddings etc.
thanks in advance
1 Like
Have you solved this problem now?
1 Like
- Not yet
1 Like
@bellam – so you’ve got a regular Google Calendar embed code?
I just tried it with a page template – works for me without a hitch:
Is that what you need?
All the best – Mario
3 Likes
How? I added Google Calendar imbed code to a shopify page and it just shows the code on the page. When I look at the pages non html version it seems to have stripped the html. Doesn’t seem you can do this so how did you?
1 Like
Actually was able to solve my own problem so if anyone else is trying to figure this out. I used the template customizer. made a new page template. inserted an html block. Put the code in that block. Used that page template for my page. (content will be blank when you are editing the page from within the shopify admin but no worries the code is still there if you added it from within the customizer) Voila’.
1 Like
I was just going to ask whether you set up a new template (correct way) or just added the code in to the page content.
Glad you figured it out.
Hello @r8r
I embedded my calendar onto a page but when I check it via mobile mode it displays cut off vs complete calendar size. I’m not sure where to look to correct this part on the back end of my site. Is there a way to correct it?
https://forever-five-jewelry.myshopify.com/pages/partnerpink
Thank you,
Heide
First, make sure the page itself is it’s own fresh template, not a default one. Secondly, the only way I know of to make it work is custom css code. See this thread: https://thomas.vanhoutte.be/miniblog/make-google-calendar-iframe-responsive/
@ShopForeverFive I haven’t tried this myself yet, but @adtastic s approach seems promising.
Mario
1 Like
Hey - realize this thread may be a bit old. But I run The Shop Calendar app (https://apps.shopify.com/the-shop-calendar). I’ve built a Google integration directly into the app so all you have to do is upload the public .ics URL that Google gives you.
May be a little easier than having to install the Google calendar using the embed link. Happy to help as well.
Hey!
Totally get the frustration - embedding Google Calendar should be easy but sometimes it just doesn’t cooperate. If the page is only showing the link instead of the calendar, the most common issue is that the code being pasted is just the URL, not the full embed iframe code.
Here’s a quick checklist that might help:
-
In your Google Calendar settings, make sure the calendar is set to public.
-
Go to the “Integrate calendar” section and copy the embed code (it starts with
<iframe...>), not the shareable link. -
Paste that embed code into the HTML/embed block of your website builder (not just a text or link block).
If your builder is stripping out the code or not showing it, it could be due to security restrictions or the need to switch to a “code view” editor.
If you’ve already done all that and it’s still not working, there are also third-party widgets that can help you show Google Calendar in a nicer layout. One option is Elfsight’s Event Calendar – you can sync your Google Calendar and customize how it looks. Then you just paste the widget’s embed code into your page.
Hope one of those helps sort it out!
Cheers,
Elfsight Team
Hi @bellam
Steps to Embed Google Calendar
- Go to Google Calendar (desktop) → calendar.google.com
- On the left, find your calendar → hover over it → click the (three dots) → Settings and sharing
- Scroll to Integrate calendar
- Copy the Embed code (iframe) — it will look something like:
<iframe src="https://calendar.google.com/calendar/embed?src=your_calendar_id&ctz=Your_Timezone"
style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
- Paste this iframe code into your page:
- In Shopify → open the page in the editor → click Show HTML (
<>icon) → paste the code. - In WordPress (block editor) → use a Custom HTML block → paste the code.
- In other builders → look for an HTML/embed widget
Hey @bellam
Looking to add your Google Calendar to your Shopify store without using any code? Whether you want to display your business hours, upcoming events, or allow customers to see your availability, embedding a Google Calendar can make your store more functional and user-friendly.
Thanks to EmbedAny, it makes possible to embed Google Calendar into your Shopify store in your place very easily by just pasting a link. To know the step by step guide: Click Here.
EmbedAny, not only works with Google Calendar, rather it supports 800+ sites including YouTube, Facebook, Instagram and Tiktok. Get the list.
Enjoy a FREE Trial.
Get the amazing App: Embed Any Social Media w/ Link - Embed Interactive Content on Shopify | Shopify App Store
Regards,
EmbedAny Support