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

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:

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

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:

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.

Updated on: 16/10/2024