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’.
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.
1 Like