Cart image live preview

To automatically show the live preview image on the cart items, follow the instructions below:

Enable Live preview and thumbnail

On the product options configuration, in the Live preview section, enable the preview and check "Save preview image with order" and "Thumbnail":

Save the config and add a new product to the cart to test if the cart preview is working. Also try adding a second product to the cart with a different preview image.

Cart setup (only if not working)

Only required if the preview image is not working OR if in the case of multiple products the preview image is not shown on the right cart item.

You have to add some additional code for the app to find the cart item.

This can be done in the Shopify Admin theme editor, navigate to Online Store > Themes, [More actions] > Edit Code.

Search for "cart" to show your themes cart related code.

Common locations are:

sections/cart-template.liquid (most themes)
templates/cart.liquid

Find the cart items loop that is used to display the cart items:

{%- for item in cart.items -%} .. {% endfor %}

add the attribute data-live-item-key="{{ item.key }}" to the first element

{%- for item in cart.items -%}
    <tr data-live-item-key="{{ item.key }}">
             ...
    </tr>
{%- endfor -%}

Save the template and test the cart preview again.

Checkout

Shopify apps are not allowed to modify the checkout for Shopify merchants that are not on the Shopify Plus plan. For this reason the cart items will not be able to show the preview image.

Shopify Plus

If you are on Shopify Plus and can edit the checkout.liquid, then it should be enough to include the script tag for the preview images to work:

....
  <script src="https://assets.cloudlift.app/api/assets/options.js?shop={{ shop.permanent_domain }}" async></script>
</head>