Hide hidden box properties on your cart page

Easily hide box properties starting with "_" on your cart page using Liquid filters—no CSS or JS needed.

  1. Navigate to your Shopify admin dashboard, then go to the Online Store > Themes section.

  2. Click on the "Actions" dropdown menu for the active theme, then choose "Edit code."

  3. Open the "cart-template.liquid" or "cart.liquid" file (it depends on your theme) located in the "sections" or "templates" folder.

  4. Locate the part of the code where the line item properties are being rendered. It typically looks like this:

    {% for p in item.properties %} {% unless p.last %} <div class="line-item-property"> <span class="line-item-property__name">#{{ p.first }}:</span> <span class="line-item-property__value">#{{ p.last }}</span> </div> {% endunless %}{% endfor %}
    
  5. Modify the code to check if the property name starts with an "_". If it does, skip rendering that property:

    {% for p in item.properties %} {% unless p.last %} {% assign first_char = p.first | slice: 0 %} {% unless first_char == "_" %} <div class="line-item-property"> <span class="line-item-property__name">#{{ p.first }}:</span> <span class="line-item-property__value">#{{ p.last }}</span> </div> {% endunless %} {% endunless %}{% endfor %}
    

    In this modified code, we use the slice filter to extract the first character of the property name and store it in the first_char variable. Then, we use an unless tag to check if first_char is equal to "_". If it's not equal, the property is rendered. If it is equal, the code inside the unless block will be skipped, effectively hiding the property.

  6. Save the changes. Line item properties that start with an "_" should now be hidden in the cart.