The Experiences App uses Shopify's line item properties to keep track of custom information. This allows us to correctly link a Shopify order line item to the correct time slot in your schedule. It also allows us to 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 quick, easy steps, you can hide any fields on your cart page so that you're only presenting 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.liquid 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

Once you've located your theme files, you'll want to find the file under "Sections" called cart-template.liquid. This file will contain all the liquid template code for your cart page.

Step 2:

Once you've found the cart-template.liquid file, 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 looks like the following snippet:

{% 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 %}

You'll want to find this section in your cart-template.liquid file so that you can filter out line item properties that you don't want to display.

The way Shopify stores the properties is such that the name of the property (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 in the bottom right.

Thanks for reading!

Did this answer your question?