All Collections
Customizing Experiences App to your theme
Editing the Experiences app product template
Editing the Experiences app product template

You can edit the Experiences app product template to meet your customization requirements.

Updated over a week ago

Introduction

Editing your Experience's product template allows you to customize the look and feel that your customers see.

When you add our app to your store we create an Experiences app product template but we never update it after the initial installation. This way, any customizations you make to this template remain 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 the Experiences app to be able to display the booking options 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 

The following are 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 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 {
/*
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>


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

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>

If you have some basic HTML and CSS knowledge, 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.

Did this answer your question?