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
Troubleshooting: check Location settings first
Most live preview problems that look like a layer, CSS or theme-compatibility issue come down to the location setting. The live preview replaces your theme's product gallery container rather than creating its own, so a wrong location means the app and the theme compete for the same element. Check App > Settings > Location settings > Preview before anything else if you see any of the following.
| Symptom | What to try |
|---|---|
| The correct layer flashes for a moment, then the original product image comes back | Switch the preview location to Automatic |
| The theme gallery will not slide or swipe on one product | Switch the preview location to Automatic |
| The preview is far too large, or overflows its column | Set a manual location. This is usually the app not finding the automatic location on that theme, and no CSS is needed |
| The preview dies after a variant switch, leaving a grey overlay (Live Crop) | Set a manual location |
| An option or text field does not render on one product only | Set a manual location |
Both directions occur, so if one setting does not help, try the other before looking at CSS or layer conditions.
When you do use a manual location, the references selector must be present in the theme to work.
Changing the preview location on a live store can affect thumbnail scrolling and selection, so test the change on a duplicate theme first.
After switching to Automatic: the other product images disappear
Once the preview occupies the main product image, the remaining images of the Shopify product gallery may no longer be visible.
Enable the Gallery setting in the Live preview section of the configuration. The app then renders its own gallery under the preview, showing the other product images as thumbnails alongside the live view, and the thumbnails update live. Individual images can be excluded in the gallery settings. See How can I setup a gallery with multiple live views?.
The app gallery replaces the theme gallery, so it will not look identical to your theme's own gallery.
If the preview is the right size but the wrong shape (letterboxed, dead space at the sides), that is the preview dimensions rather than the location, see How can I change the preview size on the product page?.