PLEASE NOTE: Every theme is slightly different, and this customization has proven challenging for our customers. Because of the differences between themes, making this article general enough to cover every theme is nearly impossible. Please get in touch with us via chat if you'd like help with this.
The Experiences App uses Shopify's line item properties to track custom information. This allows us to correctly link a Shopify order line item to the correct time slot in your schedule and track customers' additional details when booking your experience.
While this information is necessary for our app to function correctly, it doesn't always look pretty and can confuse the customer.
Following these steps, you can hide any fields on your cart page so that you present only the information you want to show your customer.
NOTE: Shopify controls the checkout page and will also display the fields on the checkout. Currently, we do not support hiding fields on the checkout page; however, we're actively looking into that.
Step 1: Locate your cart template
You'll need to make edits to the cart.liquid template in your theme files. To find this page, you'll want to navigate to Online Store > Theme > Actions > Edit Code, just like the following. Your cart template may be called something else based on your theme files.
Once you've located your theme files, you'll want to find your cart file, which controls line items. You can search for the word "cart" in the search box at the top of the left column.
Step 2: Edit your template
Once you've found the cart-template.liquid file (or whatever it's called), you're ready to start making the quick edits to hide fields you don't want to appear.
The line item properties are displayed in a section that might look like the following snippet:
Hint: Do a search for "p.first" in your browser for the code.
{% if property_size > 0 %}
<div class="cart__meta-text">
{% for p in item.properties %}
{% unless p.last == blank %}
{{ p.first }}:
{% comment %}
Check if there was an uploaded file associated
{% endcomment %}
{% if p.last contains '/uploads/' %}
<a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{{ p.last }}
{% endif %}
{% endunless %}
{% endfor %}
</div>
{% endif %}
An edit to this code will help you filter out line item properties that you don't want to display.
The way Shopify stores the properties is such that the property's name (for example, "Timeslot") is stored as p.first, and the value of that property is stored as p.last.
So, if you're trying to hide the Timeslot property the line you're going to want to change this line:
{% unless p.last == blank %}
to look like this:
{% unless p.last == blank or p.first == "Timeslot" %}
This will look at the field's name, and if it matches exactly the word "Timeslot", then it will not display.
You can continue to hide additional fields simply by adding to the or statement there:
{% unless p.last == blank or p.first == "Timeslot" or p.first == "Name" %}
Once you save these changes to your template, your cart page will no longer display line item properties that you've hidden.
Questions:
If you have any questions about this tutorial or trouble making the changes, reach out to us using the blue intercom bubble at the bottom right.
Thanks for reading!