Introduction

Editing your Experience's product template allows you to customize the look and feel what your customers see. You can customize it to match the branding and overall look and feel that you want. 

We you add our app to your store we create an Experiences App product template but we never update it after the fact. This way, the hard work you go through to customize your experience's product template remains intact. But don't worry - we'll provide step-by-step instructions for you if you wish to incorporate any new feature updates into your template. 

If you already know what parts of the template you should never change and where the product.experiences.liquid  file is located, then feel free to skip to "Customization".

Launch Configuration

There are just a few things that you shouldn't edit or remove when customizing your template file. Make sure that you leave these things in place. In order for Experiences App to be able to display the availabilities for your time-based products, you must always have the following code in your product.experiences.liquid  template that we install for you when you add our app to your store:

Liquid Template Variables

{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}
{%- assign metadata = product.metafields.experiences -%}
{%- assign durationHours = metadata.duration | divided_by: 60 -%}
{%- assign durationMinutes = metadata.duration | modulo: 60 -%}

CSS Variables & Imports

Note: Modifying these colors will have no effect on Internet Explorer and other older browsers. See here for more information.

<style>
  :root {
    --experiences-primary-background:   #fff;
    --experiences-secondary-background: #f5f5f5;
    --experiences-primary-action:       #505dbf;
  }
</style>

CSS Imports

Note: Make sure to include these link  tags BELOW the variable declarations

<link href="https://prod.experiencesapp.services/themes/default.css" rel="stylesheet" />
<link href="https://prod.experiencesapp.services/embedded.css" rel="stylesheet" />

Script Execution

Make sure to pass along a matching rootSelector to both the .enableBooking  and .enableCarousel  method config objects (depicted below). These selectors need to match up with a valid HTML element for our booking widget to mount to the DOM properly.

#exp__booking-embed 

#exp__carousel 

Here's our initialization scripts. You'll need to make sure these are included in order for our app to run on your experience's product page. 

<script src="https://prod.experiencesapp.services/embedded.js"></script>
<script defer>
  ExperiencesApp.enableBooking({
    baseUrl: "https://prod.experiencesapp.services",
    variantId: {{ product.variants[0].id }},
    productId: {{ product.id }},
    paymentType: "{{ metadata.paymentType }}",
    orderFormId: "{{ metadata.orderFormId }}",
    shopName: "{{ shop.name }}",
    shopEmail: "{{ shop.email }}",
    shopId: "{{ shop.permanent_domain }}",
    currencyFormat: "{{ shop.money_format }}",
    productName: "{{ product.title }}",
    ticketCost: parseFloat({{ product.variants[0].price }}) / 100,
    rootSelector: "#exp__booking-embed",
  });

  ExperiencesApp.enableCarousel({
    rootSelector: "#exp__carousel",
  });
</script>

Script: Conditional Content Display

There are several instances where we need to hide/show certain elements on the page depending on what data the experience was created with. In order to show the information we have in the best way possible, we include this script to clean things up.

<script>
// Experiences App: Host image injection
{% if metadata.hostImage != blank %}
const hostImgSrc = ({{ metadata.hostImage }}).src
{% else %}
const hostImgSrc = ""
{% endif %}
const hostDesc = `{{ metadata.hostDescription | escape | newline_to_br }}`
const hostDetailsEl = document.getElementById('hostDetails')
if (hostImgSrc.length || hostDesc.length) {
  const hostImgStrEl = `<img alt="Host image" class="product__display-grid__host-image isShowing" src=${hostImgSrc} />`
  const hostDescStrg = `<div class="product__display-grid__host-desc"><p>${hostDesc}</p></div>`
  if (hostDetailsEl) {
    hostDetailsEl.innerHTML = `
      <h3 class="product__display-grid__header bottom-spacer-small">Your Host</h3>
      <div class="product__display-grid__hostbox">
        ${hostImgSrc.length ? hostImgStrEl : ''}
        ${hostDesc.length ? hostDescStrg : ''}
      </div>
    `
  }
}
</script>

Locating The Template

The first step to customizing your experience product template is to locate the Experiences App product template file. Read our guide here: Locate The Experiences App Product Liquid Template

Customization

Now that we've gotten the boring stuff out of the way, let's see what other kinds of things you can do to truly customize your liquid template.

Theme

We've built the Experiences App booking widget to be as low-maintenance as possible. What we mean is that you should be able to use it along with most themes on the app store. The modal that pops up for certain Experience configurations will try to inherit the general style of your installed theme. That being said, sometimes you need a little more configuration. Good news - we've got you covered!

Remember the CSS variables that we showed above? You can customize those to match the exact color scheme that your storefront uses. 

Here's an example that uses the following CSS overrides:

<style>
  :root {
    --experiences-primary-background:   #C9F5CD;
    --experiences-secondary-background: #8AEA92;
    --experiences-primary-action:       #335C67;
  }
</style>


For example, if you just can't get enough green in your life, you can get this result with the above code:

Layout

We've structured the general layout of the liquid template so that you can customize it to fit your needs. You might ask yourself: "How can I swap the layout so that the image is on the left and the booking dropdown is on the right?" 

Default layout:

With the following code, you can do just that! Simply place this style  block below the CSS imports, as mentioned above.

<link href="https://dev.experiencesapp.services/themes/default.css" rel="stylesheet" />
<link href="https://dev.experiencesapp.services/embedded.css" rel="stylesheet" />

/* SWAP UI LAYOUT */
<style>
  @media only screen and (min-width: 800px) {
    .product__display-grid {
      direction: rtl;
    }

    .product__display-grid__col1 {
      direction: ltr;
    }

    .product__display-grid__col2 {
      direction: ltr;
      padding-left: 0;
      padding-right: 8%;
    }
  }
</style>

Swapped layout:

Sticky Side Column

In certain situations, you may find that the content on your experience's product page far exceeds the side column that contains the booking widget. This can cause an unsightly blank space on your webpage. 

To fix this, you must do two things. 

  1. Add the following style  block below the CSS imports that we mentioned above.
<link href="https://dev.experiencesapp.services/themes/default.css" rel="stylesheet" />
<link href="https://dev.experiencesapp.services/embedded.css" rel="stylesheet" />

/* Sticky Column */
<style>
  @media only screen and (min-width: 800px) {
    .product__display-grid-sticky {
      display: flex;
      align-items: flex-start;
    }
   
    .product__display-grid-sticky .product__display-grid__col1 {
      position: -webkit-sticky;
      position: sticky;
      top: 3.125em;    
      width: 100%;
    }
  }
</style>

2. Move the HTML element with the product__display-grid__col1 class into a new "sticky" positioned div .
Here's the general layout of the original HTML structure:

  <div class="product__display-grid">
    <div class="product__display-grid__col1">
      ...
    </div>
    <div class="product__display-grid__col2">
      ...
    </div>
    ...
  </div>

Here's what it would look like with the sticky positioned column:

  <div class="product__display-grid">
    <div class="product__display-grid-sticky">
      <div class="product__display-grid__col1">
        ...
      </div>
    </div>
    <div class="product__display-grid__col2">
      ...
    </div>
    ...
  </div>

Sticky column:


As you've now seen, it's pretty easy to customize your experience's product template. If you run into any problems during your edits, please reach out to us so that we can offer assistance to get you back up and running. 

Feel free to connect with us using the chat bubble in your Experiences App admin or send us an email at hello@experiencesapp.com.

Did this answer your question?