How to use Shop Events Calendars with PageFly

About Shop Events Calendars

Shop Events Calendar app helps your store showcase events and promos using your theme options.

Before using this element, you have to install the Shop Events Calendar app to your store, configure all options in the app, and then return to PageFly to use the element(s) for the corresponding product(s) you want.

Install Shop Events Calendar

Install PageFly

Access Live Product Options

Step 1: Go to Add third party elements in the left toolbar > Click on the Edit your 3rd party elements button.

Step 2: In Integrations popup page, you can search “Shop Events Calendar” on the search bar.

Step 3: Click on Shop Events Calendar element in the dropdown menu.

Step 4: Choose the variant you want then drag and drop it to the editor page.

The element comes with two variants which are:

• Original Calendar
• List Calendar

Configuration

PageFly Configuration

General Settings

Original Calendar

After adding the Original Calendar to the Editor, on the right sidebar, you’ll see the General tab.

The Original Calendar element displays an original calendar design on your PageFly pages.

Note: ​​​​

For the full widget configuration, please go to the settings area of the Shop Events Calendar application.

The Original Calendar element can be used on all page types and once a page.

You can get further information about Attributes, Visibility, and Animation parameters.

List Calendar

After adding the List Calendar to the Editor, on the right sidebar, you’ll see the General tab.

The List Calendar element displays a list view design on your PageFly pages.

Note: ​​​​

For the full widget configuration, please go to the settings area of the Shop Events Calendar application.

The List Calendar element can be used on all page types and once a page.

You can get further information about Attributes, Visibility, and Animation parameters here.

Styling Settings

You can customize the styling of the Shop Events Calendar elements in the Styling tab.

You can get further information about Styling settings here.

Shop Events Calendar Configuration

After configuring PageFly settings, you will need to continue with the Element settings further as below.

Original Calendar

Step 1: Go to your Shopify Admin > Apps > Choose The Shop Calendar.

Step 2: Click on Create a new event > Customize all the settings > Hit Save.

Step 3: Go to Install section > Manual Install.

Step 4: Scroll down to the Copy this code section > Original Calendar > Copy the code.

Step 5: Back to the Editor > Head to Short code section > Paste the code.

List Calendar

Step 1: Go to your Shopify Admin > Apps > Choose The Shop Calendar.

Step 2: Click on Create a new event > Customize all the settings > Hit Save.

Step 3: Go to Install section > Manual Install.  

Step 4: Scroll down to the Copy this code section > List Calendar > Copy the code.

Step 5: Back to the Editor > Head to Short code section > Paste the code.

Key Takeaways

Shop Events Calendar helps you showcase your events, promotions, announcements, product releases, and more on a mobile-friendly calendar. You can seamlessly display two calendar designs: original or list view from Shop Events Calendar without any coding skills within PageFly.

Frequently Asked Questions

Overview

What are the benefits of using Shop Events Calendar?

There are many benefits to using  Shop Events Calendar, including:

• Increase visibility: Your calendar will be displayed on your store’s homepage, making it easy for customers to find your events and promotions.
• Improve engagement: Customers can easily click on events to learn more about them, which can help to increase engagement and sales.
• Enhanced brand image: A well-designed calendar can help to enhance your brand image and make your store look more professional.

Are calendar widgets of Shop Events Calendar mobile-friendly?

Yes.