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?

Parent selectors

To show a full preview without the product image gallery you can provide a custom parent selector that will be searched for by the app and replaced with a live preview image. 

If your theme is not yet listed, you can find the selector by watching the video at the top, or reach out to us via the support button in the app.

Theme Selector
Debut .product-single__media-group
Venture .photos

Manual

You can also have full control over where exactly the live preview is displayed. For this you can provide a custom selector inside the app:

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 

If you setup the live preview to still show the product image gallery of your theme and want to automatically select the first product image whenever the live preview is updated, then you can use the following code:

<script>
    // listener to notify when the preview is rendered
    window.addEventListener('preview:rendered', function(e) {
       var selector = '.product-single__thumbnails li:first-child img'
       var mainImg = document.querySelector(selector);
       if(mainImg) {
        mainImg.click();
       }
    });
</script>

Important: the selector has to be updated based on your specific theme to select the first item of the product gallery image.   Example is based on the Debut theme. 

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.