Setting up your Shopify cart page

You need to edit your Shopify cart page to properly display the product picture and custom order details.

Accessing your cart.liquid template

  1. Go to your admin panel (mystore.myshopify.com/admin).

  2. Click on Online Store, you will already be at the Themes page.

3. (Recommended) Duplicate your theme to create a backup copy. See this tutorial.

4. Click on Edit Code inside the actions dropdown button.

5. On the left dropdown, locate the cart.liquid file. Sometimes, it refers to another file named cart-template.liquid file. Most of the time, you have to change the latter. Further information below.

Hiding _mczr line item properties

6. Find where the line item properties are displayed. It is usually by searching a line of code that loops through the cart’s items properties. Frequent examples are :

{% for p in item.properties %}{% unless p.last == blank %} or {% for p in line_item.properties %}{% unless p.last == blank %}

Replace

{% unless p.last == blank %}

with

{% unless p.last == blank or p.first contains '_mczr' %}
Your cart should now look something like this

7. (Optional) You can add a <br/> tag after {{p.last}}to make a line return after each custom property

Cart with line returns

Display customized product image

8. Insert the following code where the <img ../> html element is. Please note that your original code line for <img ...> should be after the {% else %} statement.

{% if item.properties._mczr_image %}
<img src="{{ item.properties._mczr_image }}" alt="{{ item.title | escape }}">
{% else %}
---- ORIGINAL HTML CODE FOR YOUR CART PRODUCT IMAGE ----
{% endif %}

It should look (depending on your theme code) like this :

{% if item.properties._mczr_image %}
<img src="{{ item.properties._mczr_image }}" alt="{{ item.title | escape }}">
{% else %}
<img src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}">
{% endif %}

Hide mczr variant title (mczr_price_xxx)

9. To hide the variant title in your cart template, search for item.variant.title and add a condition to not display it if the variant title includes mczr. Here's an example :

Before the condition has been added:

{% unless item.variant.title == 'Default Title' %}
{{ item.variant.title }}
{% endunless %}

After the condition has been added:

{% unless item.variant.title == 'Default Title' or item.variant.title contains 'mczr' %}
{{ item.variant.title }}
{% endunless %}
Without mczr_price_123 (variant title)

10. Save the template.

Notes

  • You might need to set a default image on your shopify product, because some templates have a condition that might prevent your product from being displayed without it.

  • If needed, make sure the default image has the proper dimensions because in some cases, depending on the code of your theme, it will display the custom design image with these proportions.

  • This applies for your main cart. if you have a mini-cart, you have to modify the code as well.