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 Heycarson.com 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, locate the cart.liquid file. Sometimes, it refers to another file named cart-template.liquid file. Most of the time, you have to edit the latter.

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

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.

Side-carts consist of external plugins, which is why their unique code differs greatly from one theme to another. Unfortunately, it is not possible to change the image to the personalized product image after checkout in the side-cart.

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

Finally, please note that it is only possible to edit the template .liquid for Shopify Plus customers.

Did this answer your question?