There are two ways to ensure that Experiences works correctly when installing a new theme. Both result in the product.experiences.liquid template existing in your currently active theme.
Method 1: Install the booking template again
If you don't need to save any customizations you've made to your template previously, simply follow these instructions.
Log into your Shopify admin
Navigate to the Experiences app dashboard
Click on the settings icon
Scroll down to the bottom of the page
Click on the "Reset all templates" button
But, if you had made customizations to the previous Experiences app theme file, you can go into your previous theme files, find the product.experiences.liquid file, and copy the code contents into the new theme and overwrite the product.experiences.liquid file there.
Method 2: If you've customized the Experiences template
Many merchants have customized their templates to closely align with their store's brand experience. This is great, but you need to copy/paste those changes to your new theme. Even if you haven't, you can use this method to ensure Experiences works before you make your new theme the store's active theme.
1. Click "Online Store" on the left column of your store page
2. Click the "Actions" dropdown on the "Current theme" section
3. Click "Edit code" to be taken to the template list
4. If you don't see the product.experiences.liquid file in the left column, you'll need to add it.
5. Click "Add a new template" under the Templates header and the Liquid file type
6. Choose the "Product" template type and name it product.experiences.liquid
7. Select all the code provided by default in that new template.
8. Copy and paste the code below into the blank template window and click Save. You're done!
NOTE: The below code may change from time to time, so if things don't look quite right, see Option 1 above, which will always have current code.
{%- 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 -%}
{%- assign durationMinHours = metadata.durationMin | divided_by: 60 -%}
{%- assign durationMinMinutes = metadata.durationMin | modulo: 60 -%}
{%- assign durationMaxHours = metadata.durationMax | divided_by: 60 -%}
{%- assign durationMaxMinutes = metadata.durationMax | modulo: 60 -%}
{%- assign costLabel = metadata.costLabel | default: "Cost" -%}
{%- assign costPerUnitLabel = metadata.costPerUnitLabel | default: "per person" -%}
{%- assign durationLabel = metadata.durationLabel | default: "Duration" -%}
<style>
:root {
--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;
}
</style>
<link href="//prod-v2.experiencesapp.services/storefront/embedded.css" rel="stylesheet" />
<div
class="product__section-container"
data-section-id="{{ section.id }}"
data-section-type="product"
data-enable-history-state="true"
itemscope itemtype="http://schema.org/Product"
>
<meta itemprop="name" content="{{ product.title }}{% unless product.has_only_default_variant %} - {{ current_variant.title }}{% endunless %}">
<meta itemprop="url" content="{{ shop.url }}{{ current_variant.url }}">
<meta itemprop="brand" content="{{ product.vendor }}">
<meta itemprop="image" content="{{ featured_image }}">
<meta itemprop="description" content="{{ product.description | strip_html | escape }}">
<div class="product__title-container">
<h1 class="product__title-container__title" tabindex="0" aria-label="{{ product.title }}">
{{ product.title }}
</h1>
<span class="product__title-container__tagline" tabindex="0">
{{ metadata.summary }}
</span>
</div>
<div class="product__display-grid">
<div class="product__display-grid__col1">
{% if metadata.location != blank %}
<div class="product__display-grid__infobox">
<h3 class="product__display-grid__header">Location:</h3>
<span class="product__display-grid__text">
{% if metadata.location == "Zoom" %}
{{ metadata.location }}
{% else %}
<a href="https://www.google.com/maps/place/{{ metadata.location }}"
target="_blank"
aria-label="Location: {{ metadata.location }}"
>
{{ metadata.location }}
</a>
{% endif %}
</span>
</div>
{% endif %}
<div class="product__display-grid__infobox" tabindex="0">
<h3 class="product__display-grid__header">{{ costLabel }}:</h3>
<span class="product__display-grid__text">
{% assign price_min = product.price_min | money %}
{% if product.price == 0 %}
{% assign price_min = "FREE" %}
{% endif %}
{% if product.price_varies %}
{{ price_min }} – {{ product.price_max | money }} {{ costPerUnitLabel }}
{% else %}
{{ price_min }} {{ costPerUnitLabel }}
{% endif %}
</span>
</div>
<div class="product__display-grid__infobox" tabindex="0" >
<h3 class="product__display-grid__header">{{ durationLabel }}:</h3>
<span class="product__display-grid__text">
{% if metadata.durationMin != blank and metadata.durationMax != blank %}
{% if durationMinHours != 0 %}
{{ durationMinHours }}h
{% endif %}
{% if durationMinMinutes != 0 %}
{{ durationMinMinutes }}min
{% endif %}
–
{% if durationMaxHours != 0 %}
{{ durationMaxHours }}h
{% endif %}
{% if durationMaxMinutes != 0 %}
{{ durationMaxMinutes }}min
{% endif %}
{% else %}
{% if durationHours != 0 %}
{{ durationHours }}h
{% endif %}
{% if durationMinutes != 0 %}
{{ durationMinutes }}min
{% endif %}
{% endif %}
</span>
</div>
<div class="product__display-grid__divider"></div>
<div class="product__dropdown-group" id="exp__booking-embed"></div>
{%- capture snippet_content -%}
{%- include 'social-sharing' -%}
{%- endcapture -%}
{%- unless snippet_content contains "Liquid error" -%}
{{ snippet_content }}
{%- endunless -%}
</div>
<div class="product__display-grid__col2">
{% if featured_image != blank %}
<div id="exp__carousel" class="product__carousel-container"></div>
{% endif %}
{% comment %}
NOTE: metadata.description is deprecated; please use product.description instead.
{% endcomment %}
{% if metadata.description != blank or product.description != blank %}
<div class="product__display-grid__detailsbox" tabindex="0">
<h3 class="product__display-grid__header bottom-spacer-small exp__header-label">
About this experience
</h3>
<p class="product__display-grid__text">
{% if metadata.description != blank %}
{{ metadata.description }}
{% elsif product.description != blank %}
{{ product.description }}
{% endif %}
</p>
</div>
{% endif %}
{% if metadata.hostImage != blank or metadata.hostDescription != blank %}
<div id="hostDetails" tabindex="0">
<h3 class="exp__header-label">Your Host</h3>
<div class="exp__host-details-container">
{% if metadata.hostImage != blank %}
<div class="exp__host-image-container exp__host-details__container">
<img
alt="Host image"
class="product__display-grid__host-image isShowing exp__host-image"
src="{{ metadata.hostImage }}"
/>
</div>
{% endif %}
{% if metadata.hostDescription != blank %}
{% if metadata.hostImage == empty %}
<div class="exp__host-desc-container exp__host-details__container exp__as-without-padding">
{% elsif metadata.hostImage != blank %}
<div class="exp__host-desc-container exp__host-details__container">
{% endif %}
<p>{{ metadata.hostDescription | newline_to_br }}</p>
</div>
{% endif %}
</div>
</div>
{% endif %}
</div>
</div>
</div>
<script src="//prod-v2.experiencesapp.services/storefront/embedded.js"></script>
<script defer>
ExperiencesApp.enableBooking({
baseUrl: "https://prod-v2-api.experiencesapp.services",
currencyFormat: '{{ shop.money_format }}',
languageCode: "{{ metadata.languageCode }}",
minLimit: parseInt({{ metadata.minLimit }}),
maxLimit: parseInt({{ metadata.maxLimit }}),
productId: {{ product.id }},
productName: "{{ product.title | escape }}",
paymentType: "{{ metadata.paymentType }}",
rootSelector: "#exp__booking-embed",
shopName: "{{ shop.name | escape }}",
shopEmail: "{{ shop.email }}",
shopId: "{{ shop.permanent_domain }}",
ticketCost: parseInt({{ product.price }}) / 100,
variants: {{ product.variants | json }},
});
let imageUrls = [];
{% for image in product.images %}
imageUrls.push({
featured: "{{image}}" === "{{product.featured_image}}",
url: "https:{{image | img_url: "650x500" }}"
});
{% endfor %}
ExperiencesApp.enableCarousel({
rootSelector: "#exp__carousel",
imageUrls,
});
</script>
{% render 'product_infox' %}