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

Please note that depending on your Shopify Theme, the code might be slightly different than the one in the following tutorial. If you are not familiar with coding, we highly recommend to ask a Shopify web developer such as Carson or StoreTasker to help you out.


Accessing your cart.liquid template

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

  2. Click on Online Store. Under Current theme, click on Actions.

  3. [Recommended] Duplicate your theme to create a backup copy. See this tutorial.

  4. Click on Edit code to open the code editor.

  5. On the left side of the screen, under Templates,

    1. If you are using a Shopify Vintage Theme (1.0), locate the cart.liquid file. Sometimes, it refers to another file named cart-template.liquid. Most of the time, you have to edit the latter.

    2. If you are using a Shopify 2.0 Theme, locate the cart.json file. Look for the section "cart-items".

      {
      "sections": {
      "cart-items": {
      "type": "main-cart-items",
      "settings": {
      "show_vendor": false,
      "padding_top": 36,
      "padding_bottom": 36
      }
      }, ...

      Example 2:

      {
      "sections": {
      "main": {
      "type": "main-cart",
      "settings": {
      "show_shipping_estimator": false,
      "shipping_estimator_default_country": "United States"
      }
      }, ...

      1. In the example above, the "type": "main-cart-items" and "type": "main-cart" points to the main-cart-items.liquid and main-cart.liquid files. This is the file you are looking to edit in the Sections folder:

Hiding _mczr line item properties

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 like this:

Make each custom property appear on a single line

Add a <br/> tag after {{p.last}}to make a line return after each custom property.

Your cart should now look like this:

Display customized product image

We have created a script to replace the default product image with the custom product image in your Shopify cart. We have tried to cover most of the Shopify Themes but this script will not work 100% of the times. You should run the script and see if your custom product image is displayed correctly in your cart. To run the script:

  1. Go to the Online stores section of the Kickflip dashboard.

  2. Click on your online store.

  3. Under Shopify themes settings, select your theme, then click on UPDATE CART.

If it does not work, it means your theme is not supported and you will have to manually update your cart :

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

In case your Theme is more complex, for example a Shopify 2.0 Theme with a lazy-loader, you need to set the code before the {% if item.image %} condition:

<td class="cart-item__media">
{% if item.properties._mczr_image %}
<img src="{{ item.properties._mczr_image }}" alt="{{ item.title | escape }}">
{% else %}
{% if item.image %}
{% comment %} Leave empty space due to a:empty CSS display: none rule {% endcomment %}
<a href="{{ item.url }}" class="cart-item__link" aria-hidden="true" tabindex="-1"> </a>
<div class="cart-item__image-container gradient global-media-settings">
<img src="{{ item.image | img_url: '300x' }}"
class="cart-item__image"
alt="{{ item.image.alt | escape }}"
loading="lazy"
width="150"
height="{{ 150 | divided_by: item.image.aspect_ratio | ceil }}"
>
</div>
{% endif %}
{% endif %}
</td>

Hiding mczr variant title (mczr_price_xxx)

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


Your cart should now look like this:

Still seeing mczr_price_xxx?

If cart.liquid contains the following code:

<p>{{ item.variant.title }}</p>

Modify it to:

{%- unless item.variant.title contains 'mczr_' -%}
<p>{{ item.variant.title }}</p>
{%- endunless -%}

If cart.liquid contains the following code, replace this:

{{ item.title }}

with:

{{ item.product.title }}

Saving your cart template

  • When you are done, save your template.

  • Important! You should make a copy of cart.liquid template because when you update your Shopify theme, you might lose the changes you have made to this template.

Notes

Default image on your Shopify product

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.

Side-carts (or mini-cart)

The above instructions only apply for your main cart. if you have a side cart (or mini-cart), you have to modify the code as well.

Please note that side-carts consist of external plugins, which is why their unique code differs greatly from one theme to another.

If you have web developers, it could be possible to modify the image in these carts using advanced script. Please checkout this documentation from Shopify to determine if this is possible with your theme.


Checkout page

It is not possible to edit the product image on the checkout page in Shopify.

Did this answer your question?