Embed Google Calendar on Shopify Webpage

Shopify Discussion
,
1

I want to embed a Google Calendar using iframe to a product page. The product page looks like below. Currently there’s the “Schedule appointments here” box that is on the product page, but I would like a google calendar embedding to take up that space instead. What are the instructions to do this?

jli505_1-1721063029632.png
jli505_1-1721063029632.png1574×870 81.4 KB

2

Hi @jli505

If your theme supports adding blocks, then you can add Custom liquid or HTML block to this section, add your Google Calendar embeds code and hide the default block section

3

I’m using the Dawn theme, but I don’t know what code to modify or how to add in the new code.

4

You can use the embed code from Google for that, but you get no control over the styling. Here are some instructions - https://www.youtube.com/watch?v=kthB6a0UkiQ

Alternatively, we’ve got an app that helps you do this and gives you control over the styling of the calendar so you can match it to your brand. Here’s the app listing - https://apps.shopify.com/brand-it-calendar

5

Hi @jli505
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

7

You can embed Google Calendar on a Shopify page pretty easily.

First, in Google Calendar:

  • Go to Settings → select the calendar you want

  • Enable “Make available to public” (if appropriate)

  • Scroll to “Integrate calendar”

  • Copy the iframe embed code

Then in Shopify:

  • Go to Online Store → Pages

  • Edit the page where you want the calendar

  • Switch to the HTML view (<> icon)

  • Paste the iframe code and save

That’s the basic method. It works, but customization is limited to what Google allows in the embed settings.

If you want more control over layout, design, filtering events, or making it look more native to your store, you can use an app that supports Google Calendar integration. These apps let you style the calendar, adjust layouts, and sometimes combine multiple event sources.