If you want to create a cleaner look for your booking page or prefer not to show the exact number of spots left for an event, you can easily hide that information using a small snippet of CSS.
Choosing Your Method
How you apply this change depends on which version of the Experiences layout you are using:
Option 1: Use this if you are using our new Booking Block within the Shopify Theme Editor.
Option 2: Use this if you are using our default
product.experiences.liquidtemplate.
[NOTE] By default, our app uses the product.experiences.liquid template. However, you can choose to switch to the Booking Block for more design flexibility. To learn how to make that switch, check out our guide here: How to use the Experiences Booking Block.
Option 1: Using the Theme Editor (Recommended)
Most of our modern templates include a Custom Style Overrides box directly in the Shopify Theme Editor. This is the fastest way to make the change without digging deep into your theme code.
In your Shopify Admin, go to Online Store > Themes.
Click Customize next to your current theme.
Navigate to an Experience Product page using the page picker at the top.
Click on the Experiences/Booking widget block in the left-hand sidebar.
Look for a field labeled Custom Style Overrides or CSS Overrides.
Paste the following code into that box:
.expapp-timeslot-availability {
display: none;
}Click Save
Here's what the style override section looks like
Option 2: Editing the Liquid Template
If you are using an older version of the app or prefer to hard-code the change, you can add it to your liquid file.
Go to Online Store > Themes > Actions > Edit Code.
Search for the file named
product.experiences.liquid.Scroll to the bottom of the file and locate the closing
<style>tag or the end of the CSS section.Paste the code snippet right above that closing tag:
CSS
.expapp-timeslot-availability { display: none; }Save the template.
[TIP] Not seeing the change? Ensure you are targeting the correct class. If you are using a specific sidebar layout and want to hide the date specifically, you might also use .expapp-modal-sidebar-date { display: none; }.