Live preview image location

Automatic

If your configuration has a live preview enabled, then the app tries to automatically replace the main product image with a live preview image.

Product variant image

If the live preview is not visible or it is hidden by changing the product image gallery below or next to the product image, then it's recommended to setup the live preview to show the variant image:

And then either increase the preview size as shown in the video above or provide a parent selector to hide the product image gallery. 

Product image gallery

The app supports showing it's own image gallery below the product image with support for multiple live views, to learn more visit:  How can I setup a gallery with multiple live views?

Manual

You can also have full control over where exactly the live preview is displayed. For this you can provide a custom selector on the App > Settings > Location settings:

In your theme add the ".cl-preview"  class to the element where you want the preview to show. In most cases the class should be added on the main product image.

Look for the following code in your product templates:

{%- for media in product.media -%}

Add the class name to the first product image.   Also include the " data-live-preview" attribute to support multiple previews on a single page, e.g home page featured products. 

<div id="{{ media_wrapper_id }}" 
class="product-single__media-wrapper {% if forloop.first %}cl-preview"{% endif %}" {% if forloop.first %}data-live-preview="{{ product.id }}"{% endif %}  >
  ....

Important: for featured product support, the same liquid setup also has to applied in the featured-product.liquid