Adding a calendar to your Shopify store is pretty easy

Hura Product Showcase Builder

Adding a Calendar to your Shopify store is a great way to display upcoming events. This tutorial will teach you how to easily embed any Google Calendar associated with your Google account on your website.

Step 1 – Log in to Google

Login to your Google calendar at https://www.google.com/calendar

Step 2 – Make your calendar public

In the left-hand column list of calendars, click on the 3 lines to the one you want to embed. Select the “Settings and sharing” option.

In next page, select “Integrate calendar” option. You will go to Integrate calendar section. This section will provide embed code for you.

Step 3 – Set up your embeddable calendar and copy the code

The Google Embeddable Calendar Helper will allow you to modify the size and display options for the calendar that will appear on your website. Try out other views like “Agenda.”

After you have the calendar looking the way you want it, copy the code block in the upper right area.

Step 4 – Create a new page template on Shopify

  • From your Shopify admin, go to Online Store > Themes.
  • Find the theme you want to edit, and then click Actions > Edit code.
  • In the Templates directory, click Add a new template.
  • Choose a type option for your new template. For an alternate page template, select page and give the template a meaningful name, ex: calendar.
  • Click Create template. Your new template will open in the code editor, and the file will be populated with default code.
  • In your new template file, find the Liquid tag {{ page.content }} and replace it with embed code copy from Step 3.
  • Click Save.

Step 5 – Assign your template in the admin

After you have created an alternate template, it will appear in your admin. You will see a Theme templates section in the sidebar of the appropriate admin page.

Select this template for the page want to appear Google Calendar.

If you would like to adjust the size or display of the calendar. Update the code by repeating Step 3.

Hura Theme Blocks

You may also like...

2 Responses

  1. Thorsten Rhode says:

    All looks straightforward – alas, I don’t see this here in the shopify code:

    “In your new template file, find the Liquid tag {{ page.content }} and replace it” – the liquid tag is not in sight. Any pointers?

    Thanks,
    Thor

  2. Johnnie Law says:

    This didn’t work for me

Leave a Reply

Your email address will not be published. Required fields are marked *