Add an image preview to the cart page

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 be pointing to a different file. In most cases, the code will be located under the Sections header within the cart-template.liquid file.

Note: If your theme does not have a cart.liquid file and if you see a cart.json file, locate a file called main-cart-items.liquid file in the Sections folder.

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 %}
  {% if preview_image %}
    <img src="{{ preview_image }}" alt="{{ item.title | escape }}">
    {% assign preview_image = false %}
  {% endif %}
{% endfor %}

6. Save your changes.

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

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