# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shoppad.gitbook.io/uploadery/customize-the-app/add-an-image-preview-to-the-cart-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.