This is considered an advanced tutorial and will require some knowledge of the Liquid templating language. You should be comfortable editing your theme files directly.
One question we get asked a lot about or full page booking form is whether it's possible to edit the colors, fonts and other styles to keep the form on brand and in line with the rest of your theme.
While we make it a mission at Experiences App to ensure your booking flow stays on brand, we've also made some deliberate decisions about how the full page booking form is loaded on to your shop by default. By default the booking form does NOT load inside of your theme template structure. We made this choice to prevent the native theme styles from overwriting the styles of our booking form. This provides the best "out of the box" setup because it means that in the event that a theme has a conflicting style it doesn't break the flow and prevent your customers from checking out with their experiences.
The trade off with this is that it also means it's not as easy for you as merchants to make little customizations to the booking form, such as changing the button color or fonts.
To account for this we've set up our booking form so that with a few edits to your experiences liquid template, you can embed the full page booking form within the context of your themes and inherit any corresponding styles.
Most of the time our booking form will play nicely with themes and you'll be ready to go right after making this change. However, in some cases the theme styles can conflict and cause issues in which case you'll need to add some additional CSS to resolve the conflicts.
In this tutorial we're going to show you how to make a few edits to our product.experiences.liquid file which will embed the booking form onto your site. If you're not sure where to find that file, please see our help article on how to locate your product liquid template.
Let's get started!
If you'd rather follow along with a video guide here's a recording of us walking through the same steps!
Step 1: Swap out your "activator" button for the embedded button
Now that you've found your product.experiences.liquid file, the first thing you'll want to do is change what we call the full page activator button to a button that will trigger the embedded form. By default this activator button will redirect you to the version of the booking form that's not embedded in the theme so we're going to replace that button with one that will simply trigger the full page form to pop up inside of your theme.
To do this you'll first want to find this activator button which is located on or around line 138 of the template and looks like this:
<button class="exp__book-now-btn" onclick="redirectToExperiences()">Book now</button>
Once you've found that you'll want to replace it with a button that looks like this:
<button class="button button--color-primary expapp-booking-form-activator">Book Now</button>
As you can see the differences are subtle but important. You can also add as many of these buttons to your page as you'd like.
For example, if you want to have a call to action button at the top and bottom of your experience product page, all you have to do is paste in that exact same button wherever you want. Once we're done any one of those buttons will trigger the same booking form.
This is also a great time to change the label on the button to whatever you feel is best, e.g. "See Dates", "View Classes", etc.
Step 2: Add the base element that the booking form will attach to
Great! The next step is add the actual mounting point for the booking form so that when the form is triggered, it has something in our HTML to attach itself to.
The actual location of this element isn't really important so I like to place it right above or below one of the buttons that you just placed so that you can find them easily later.
Note unlike the activator button, you only want to place ONE copy of the base element as adding more will cause the form to load more than once on your page.
Here's the snippet for the base element:
<div
data-expapp-full-page-booking-form
data-expapp-full-page-booking-form-product-id="{{product.id}}"
data-expapp-full-page-booking-form-shop-url="{{shop.permanent_domain}}"
data-expapp-full-page-booking-form-base-url="https://prod-v2-api.experiencesapp.services"></div>
Step 3: Add the script tag to source the booking form js file
Now that you have the activator and base element for the booking form. The final piece is to bring in the actual javascript file that makes all this work!
To do this we'll add this snippet to line 205 in the template:
<script src="https://widgets.experiencesapp.services/public/prod/widgets.js"></script>
Step 4: Customizations
The final step is actually customizing this booking form. When you go look at one of your experience products you should see the activator button and when you click on it, the booking form should pop up.
If you look closely you'll notice that it's picking up some of the same fonts and colors from your theme.
At this point you'll want to do a thorough run through to make sure that your theme styles haven't caused any issues like elements being fully hidden or disabled.
After that you can add your own custom CSS to the product.experiences.liquid file. To do this you'll want to create a <style> tag on line 43 of the template directly underneath the link to our embedded.css file.
For example if you decided you wanted to change the primary button colors from blue to red you could add a snippet like the one below:
<style>
.button--color-primary {
background-color: red;
}
</style>
From there all you need to do is identify a unique class or id on the element you want to style and overwrite the built in styles.
Wrapping Up
Well done! You've officially embedded the Full Page Booking Form inside of your theme. We hope this has been helpful.
If you have any additional questions or issues don't hesitate to reach out to someone from our team using the little chat bubble or email us directly at hello@experiencesapp.com.