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.
If you want a Shopify product to appear in the calendar when filtered by tags, you can only have one tag per product.
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 help your customers see the difference between your experiences, you can add tag colors by choosing a base tag color. The system will then apply a shade of the base color you choose to the other bookable experiences to improve readability.
NOTE: Currently, we don't offer a way to specify the exact colors the system generates. While we know you may want to control that for brand purposes, we have not yet worked on a way for you to consistently specify colors for an unknown number of different experiences (some of our customers have dozens to hundreds).
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
First, you'll 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 Channelsclick onOnline Store, thenThemesOn the right side of the screen, click on
Actionsdropdown, thenEdit CodeIn the file tree, under
Templatesfolder icon clickAdd new templateand 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
SaveMake 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
PagesunderOnline StoremenuClick
Add Pagebutton in the top right cornerSet 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
Visibilitytoggle set to the desired settingSelect
Template suffixfrom the dropdown on your right to the newly created templateClick
Save
If you set Visibility to Visible, it should appear on your store page after a refresh