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

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



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

main-cart-items.liquid

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

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

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:



Here is a code example:

<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:

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

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

cart-drawer.liquid

Follow the rest of the instructions indicated above.

Updated on: 16/10/2024