Display a thumbnail image in the cart

Displaying a thumbnail image in the cart is a great way to assure your customers that they have uploaded the file correctly, and that you will receive it once they purchase the item. Follow the instructions below to get started.

Note: This will only work with rasterized files (.png, .jpg, .jpeg, and .gif).

Getting Started...

1. Starting from your Shopify admin, click on Online Store, then click on Themes.

2. Find the theme you want to edit, click the Actions button, then click Edit code.

3. On the left side, under the Templates heading, click on the cart.liquid file.

If your theme's cart.liquid file doesn't contain much code, it may pointing to a different file. In most cases, the code will be located under the Sections header within the cart-template.liquid file.

4. Locate the product image by searching for  item | img_url.

5. Copy and paste the following code snippet below your product image.

{% for p in item.properties %}
   {% if p.last contains '//uploadery.s3'%}
      {% if p.last contains '.png' or p.last contains '.jpg' or p.last contains '.jpeg' or p.last contains '.gif' %}
         {% assign file_parts = p.last | split:"/" %}
         {% assign file_path = file_parts | last %}
         {% assign file_parts = file_parts | join: "/" | replace: file_path, "" %}
         {% assign preview_image = file_parts | append: "preview_" | append: file_path %}
      {% endif %}
  {% endif %}
{% endfor %}
{% if preview_image %}
   <img src="{{ preview_image }}" alt="{{ item.title | escape }}">
   {% assign preview_image = false %}
{% endif %}

6. Save your changes.

Below is in example. Placement will vary depending on your theme.

If you need help getting this set up, feel free to contact our support team. We're happy to help out!

Still need help? Contact Us Contact Us