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.