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 property

6. Find where the line item properties are displayed (line items are each cart’s product in the cart, independently of it’s quantity). 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 %}
{% for p in line_item.properties %}{% unless p.last == blank %}

Replace the line {% 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 %}

9. 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.