How can I show the selected variant on the live preview?
If your product consists of multiple variants that all have the same product image expect maybe a different color, then it can make sense to update the live preview with the current selected variant image.
In the live preview config, on the product layer:
Enable the setting shown in the image above.
Image position
Leave this setting empty. This setting is only required if you want to show the live preview on a specific image of your product.
Image gallery
The app will show the live preview on the main image on the image gallery of your theme.
If you have set up the app to show the selected variant image, it is recommended to increase the preview size to completely overlay the image gallery of your theme.
Alternatively, you can setup the image gallery from the app: How can I setup a gallery with multiple live views?
Selecting the variant from the live preview
Variant synchronisation only works in one direction:
- Shopify variant → live preview: when the customer selects a variant with Shopify's native variant picker, the live preview updates to that variant's image. This is what the setting above enables.
- Live preview thumbnail → Shopify variant: clicking a thumbnail inside the preview gallery only changes which image is displayed. It does not change the variant the customer is buying.
This means the image shown in the preview and the variant that will actually be ordered can drift apart if the customer browses the preview thumbnails.
Can thumbnails be made non-clickable?
There is currently no setting to keep the thumbnail strip visible but disable clicking on it. The only available control is to hide the thumbnail strip completely with the Hide thumbnails gallery setting, which can be set for desktop and/or mobile. See How can I setup a gallery with multiple live views?
If it is important that the preview image always matches the selected variant, hiding the thumbnails is the recommended setup.