> For the complete documentation index, see [llms.txt](https://shoppad.gitbook.io/uploadery/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shoppad.gitbook.io/uploadery/customize-the-app/add-an-image-preview-to-the-cart-page.md).

# 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.

{% hint style="info" %}
**Note**: This will only work with rasterized files (.png, .jpg, .jpeg, and .gif).
{% endhint %}

<figure><img src="/files/yW1aqFgYzSPKFlEcUWes" alt=""><figcaption></figcaption></figure>

### 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.**

<figure><img src="/files/NQYJNnfPxZZ9VgqzXpeR" alt=""><figcaption></figcaption></figure>

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.

{% hint style="info" %}
**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.
{% endhint %}

4\. Locate the product image by searching for:

```html
item | img_url
```

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

```html
{% 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.

![](/files/jzprtwbXHcGyH13O9vdu)

{% hint style="info" %}
**Note:** If you need help getting this set up, feel free to contact our support team. We're happy to help out!
{% endhint %}