Show Uploaded Images in the Cart

Please note this document is included as a courtesy to aide developers in customizations related to Product Customizer, so you should be familiar with HTML / liquid to implement changes listed below.

This snippet shows you how to swap out the image thumbnail in the cart for the file uploaded by the customer (only if it uses a valid image extension supported by most browsers).

{% assign product_img = item | img_url: 'medium' %}
{% for p in item.properties %}
  {% if p.last contains '/uploads/' %}
    {% assign file_name = p.last %}
    {% assign image_types = 'jpg|gif|tiff|png|jpeg|bmp|ico' | split: '|' %}
    {% assign file_type = file_name | split: '.' | last | downcase %}
    {% if image_types contains file_type %}
       {% assign product_img = p.last %}
    {% endif %}
  {% endif %}
{% endfor %}
Now replace the image source for your product image with {{ product_img }} instead; here's an example:
<tr class="cart-row">
  <td class="cart-item">
    <a href="/collections/{{ coll_handle }}{{ item.url }}">  
      <img src="{{ product_img }}"  alt="{{ item.title | escape }}" />
    </a>
  </td>

Still need help? Contact Us Contact Us