How can I setup a gallery with multiple live views?

The app can show it's own image gallery instead of the gallery that is provided in your theme.

The image gallery of the app has the following advantages:

  • Better support for showing the live preview on a specific product image (e.g on the 3rd product image)
  • Support for interactive products configurations inside the gallery
  • Support for live updating the thumbnails on the gallery
  • Support for multiple live views

You can also use the image gallery with only a single view.  Just make sure to increase the preview size as described in the last step.

Setup

In "Live preview" section, enable the Gallery setting:

The preview should now show a gallery below the product image. This product has two different images (Front/Back):

Click on "Add view" to add a new view:

Note: each view has to be positioned onto a product image, if you want to add a new view, first upload a new product image in the Shopify Admin. 

View position

The view position defines on which product image this view should be displayed on: 

Gallery settings

To configure additional gallery settings, click on the settings icon:

You can exclude specific images from showing on the gallery, e.g removing the first image

If the gallery is showing multiple product variants as shown in the image above, then it's recommend to combine the variant images into a single image on the gallery:

Combining the variant images will automatically exclude all other variant images:  (With this setup you can use a single live preview config for all variants)

 The live preview can still show the current selected variant image.  On the product layer, make sure that the Show variant image setting is enabled and that no image position is set:

Preview size

To completely overlay the image gallery of your theme, follow the steps described in: How can I increase the live preview size?

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