> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.customall.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to add the personalized product image to the cart?

To add the personalized product image to the cart page or pop-up cart, follow the steps outlined below:

# Add the personalized product image to the cart page

1.  Go to your desired Shopify Theme → Click the **three dots** Button → Select **Edit Code**

![](https://storage.crisp.chat/users/helpdesk/website/a836ece0c4805800/image_rcuo7o.png)

2.  Identify the cart page file. This could be named something like:

* main-cart-items.liquid

3. Find the section of code responsible for rendering the product image. It looks something like this: 

 
```html
<div class="cart-item__image-container gradient global-media-settings">
  <img
    src="{{ item.image | image_url: width: 300 }}"
    class="cart-item__image"
    alt="{{ item.image.alt | escape }}"
    loading="lazy"
    width="150"
    height="{{ 150 | divided_by: item.image.aspect_ratio | ceil }}"
  >
</div>
```
 

4. Add a condition to check if the property `item.properties['_customall_preview']` exists.

* If the condition is true, display the image using the `src` attribute set to `item.properties['_customall_preview']`.
If true, show an image with the src attribute as item.properties['_customall_preview'] 
* If the condition is false, display the original image.
 
The final result should look like this:
 
![](https://storage.crisp.chat/users/helpdesk/website/a836ece0c4805800/image_s775bc.png)

Here is a code example: 

```html
<div class="cart-item__image-container gradient global-media-settings">
    {% if item.properties['_customall_preview'] %}
        <img
          src="{{ item.properties['_customall_preview'] }}"
          class="cart-item__image"
          alt="{{ item.image.alt | escape }}"
          loading="lazy"
          width="150"
          height="150"
        >
    {% else %}
        <img
          src="{{ item.image | image_url: width: 300 }}"
          class="cart-item__image"
          alt="{{ item.image.alt | escape }}"
          loading="lazy"
          width="150"
          height="{{ 150 | divided_by: item.image.aspect_ratio | ceil }}"
        >
    {% endif %}
</div>
```
 

# Add the personalized product image to the pop-up cart

To add the customized product image to your pop-up cart, follow these steps:
 
1. Go to your desired Shopify Theme → Click the **three dots** Button → Select **Edit Code**

2. Identify the pop-up cart file. This could be named something like:

* cart-drawer.liquid

3. Follow the rest of the instructions indicated above.