How do I add a Google calendar to a page?

Store Design

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.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
10

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