Go to Experiences
All Collections
Other instructions for Experiences App
Add an Experiences calendar view to your shop to show all your experiences in one place

Add an Experiences calendar view to your shop to show all your experiences in one place

Here's how you can place a calendar/list view anywhere on your site that shows all your experiences in one place.
Chip Keyes avatar
Written by Chip Keyes
Updated over a week ago

Aggregate Calendar View

This calendar shows all possible experiences that a shop offers 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 given 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 full list of events taking place on that day.

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-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">
</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>

  • Update your styling if you made any modifications

  • Click Save

  • Make note of the new template name

Step 2: Add a new page

Now that you have created a template, you need to link it to a new page.

  1. On the menu on your left, find Pages under Online Store menu

  2. Click Add Page button in the top right corner

  3. 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.)

  4. Make sure Visibility toggle set to the desired setting

  5. Select Template suffix from the dropdown on your right to the newly created template

  6. Click Save

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

Did this answer your question?