Display thumbnail as product image in cart

If you want to display the uploaded image file instead of the product image on the cart page follow the instructions below.

Automatic

We've released a new app that supports automatic live preview of the uploaded image on the cart page. The app integrates seamlessly the Upload-Lift app.

You can find the app on the Shopify app store: https://apps.shopify.com/live-product-options

Manual

To achieve the result shown in the image above you first have to configure the thumbnail feature in the App.

On your upload field, in the Image settings section, select "Thumbnail uploaded image".

Next you have to edit your theme code where the cart items are displayed.

This can be done in the Shopify Admin theme editor, navigate to Online Store > Themes, [More actions] > Edit Code.

Search for "cart" to show your themes cart related code.

Common locations are:

sections/cart-template.liquid (most themes)
templates/cart.liquid

Find the cart items loop that is used to display the cart items:

{%- for item in cart.items -%} .. {% endfor %}

Look for the <img> element where the item.image is displayed:

<img class="cart__image{% if item.image == null %} hide{% endif %}" src="{{ item | img_url: 'x190' }}" alt="{{ item.image.alt | escape }}" data-cart-item-image><strong style="background-color: initial;"><br></strong>

Add a new if condition to check if a "_thumbnail" property is set on the item. (This indicates that the product has a custom image)

{% if item.properties['_thumbnail'] %}
      <img class="cart__image" src="{{ item.properties['_thumbnail'] }}" >
{%- else -%}
      <img class="cart__image{% if item.image == null %} hide{% endif %}" src="{{ item | img_url: 'x190' }}" alt="{{ item.image.alt | escape }}" data-cart-item-image>
{% endif %}<br>

Important: If you allowed multiple file uploads each upload will be suffixed with a number, in this case to show the first thumbnail replace "_thumbnail" with "_thumbnail_1".

Save the theme and test the functionality by adding your product to cart, now the uploaded image should be displayed on the cart page.

If you need further assistance, please send us a request and we will be happy to help you out.