Aggregate Calendar View

This calendar shows a shop's bookable experiences on a single page. There are two modes: Month view and List view. Both will depict upcoming events starting from now and onwards. Clicking on any event will redirect a user to an experience home page with a scheduler open and the corresponding time slot selected. Clicking on a day cell will bring up a complete list of events.

Settings

Some useful settings help you create the calendar view that works best for your store. You can find these settings by logging into your Shopify admin to access the theme editor. From the Shopify admin, go to Online Store > Themes. Find the theme that you want to edit, and then click Customize.

Sort and hide by tag

If you only want some of your experiences to appear on a particular calendar block embed, you can choose to show by tag. You do this by going into the Product section of your Shopify admin, adding a tag (you can't do this in the Experiences app yet), and then adding that tag in the calendar settings on any given page it's embedded.

You can only have one tag per Shopify product if you want it to show up in the calendar when filtering by tags.

You can have one tag or a series of tags that are separated by commas that will be the only experiences to show up.

Add colors to each row of experiences

If you think different colors would make it easier for your customers to see the difference between your experiences, you can add tag colors by choosing a base tag color. It will then apply a shade of the base color you choose to the other bookable experiences to improve readability.

Add the calendar section to any Shopify 2.0 theme page that supports app blocks

To add the calendar block, open the Shopify theme customizer by clicking on Customize in the themes section of your store.

NOTE: It's up to the app developer to incorporate the ability to add app blocks on a theme page. You may need to contact the theme developer if you don't see the app embed option.

Click on Add Section
Click on Apps
Click on Calendar View

For non-Shopify 2.0 themes

Here's a video if you'd rather follow along live!

Installation

Step 1: Add a new template

Firstly, you need to open your Theme's code. Chances are, you've done that before, but if not, here's a quick list of steps to locate your theme code:

Under Sales Channels click on Online Store, then Themes
On the right side of the screen, click on Actions dropdown, then Edit Code
In the file tree, under Templates folder icon click Add new template and choose a Page template type.
Give a name for your template and paste the following content into it, replacing all the default code that showed up automatically:

<div
    data-expapp-aggregate-view
    data-expapp-aggregate-view-show-events-hide-toggle=""
    data-expapp-aggregate-view-display-type=""
    data-expapp-aggregate-view-shop="{{ shop.permanent_domain }}"
    data-expapp-aggregate-view-shop-url="{{ shop.permanent_domain }}"
    data-expapp-aggregate-view-base-url="https://prod-v2-api.experiencesapp.services"
    data-expapp-aggregate-view-default-view=""
    data-expapp-aggregate-view-language-code=""
    data-expapp-aggregate-view-main-header=""
    data-expapp-aggregate-view-filter-tags=""
    data-expapp-aggregate-view-tag-color="transparent"
    data-expapp-aggregate-view-storefront-access-token=""
    data-expapp-aggregate-view-background-color=""
    data-expapp-aggregate-view-primary-color=""
    data-expapp-aggregate-view-secondary-color=""
    data-expapp-aggregate-view-text-color=""
    data-expapp-aggregate-view-button-shape="false"
    data-expapp-full-page-booking-form-disabled-color=""
    data-expapp-aggregate-view-container-padding-top=""
    data-expapp-aggregate-view-container-padding-bottom="false"
    data-expapp-aggregate-view-content-wrap="true"
    data-expapp-aggregate-view-hide-future-dates="false"
  ></div>

<style>
  :root { 
    /* 
      Modifying these colors will have no effect on Internet Explorer    and other older browsers see here for more information https://caniuse.com/#search=css%20variables 
     */ 
      --experiences-primary-background: #fff; 
      --experiences-secondary-background: #f5f5f5; 
      --experiences-primary-action: #505dbf; 
      --experiences-secondary-text: #637381; 
      --experiences-placeholder-color: #a0acb7; 
      --experiences-disabled-background: #ccc; 
      --experiences-disabled-text: #888; 
    /* 
      default colors 
      --experiences-primary-background: #fff; 
      --experiences-secondary-background: #f5f5f5; 
      --experiences-primary-action: #505dbf; 
      --experiences-secondary-action: #5c6ac4; 
      --experiences-placeholder-color: #a0acb7; 
      --experiences-disabled-background: #ccc; 
      --experiences-disabled-text: #888; 
    */ } 
</style> 

<link href="https://prod-v2.experiencesapp.services/storefront/embedded.css" rel="stylesheet" />
<script src="https://widgets.experiencesapp.services/public/prod/widgets.js"></script>

You can change colors and use the variables "true" or "false" for items that get switched on or off.
Click Save
Make a note of the new template name

Step 2: Add a new page

Once you have created a template, you must link it to a new page.

On the menu on your left, find Pages under Online Store menu
Click Add Page button in the top right corner
Set new page's Title. e.g. "Event Calendar" or "Experiences". (it will appear in your shop's navigation however, you have/or will choose to organize your site's menus.)
Make sure Visibility toggle set to the desired setting
Select Template suffix from the dropdown on your right to the newly created template
Click Save

If you set Visibility to Visible, it should appear on your store page after a refresh

Editing the Experiences app product template

Add e-tickets to your experiences

How to embed the booking experience into your theme for customizations

Re-install the Experiences template

How to use the Experiences app block in the theme editor to customize your booking page