Gallery settings

In this section, you can tune each aspect of the gallery. You can change the color scheme, image sizes that will be used for the gallery, gallery features such as controls, etc...

Let's take a closer look at the settings:

1 - init method and selectors

In this section, you can select the init method (JS or HTML), set the CSS selector of the images container, and choose the insert method (inside or after the container).

The last two parameters are required if you have init method = JS. Usually, you need to enter the selector of this DOM element (the element that contains the default gallery):

This container has ID #content. If you can't determine which selector you need to enter, please contact our team.

2 - color scheme

In this section, you can set up the colors of the gallery.

3 - image sizes

In this section, you can choose the image sizes that will be used for the gallery.

4 - controls of the gallery

This section is dedicated to the controls of the gallery. Let's check what we've got:

Show switch button

Enable button that allows showing all product images or only current combination images

Show all images instead of combination images

If this option is enabled, all images will show up instead of the combination images.

Show controls

This option controls the display of left and right navigation buttons.

Show counter

This option is to show or hide the counter of the current/total images.

Show download button

Show or hide the Download button

Hide controls in the end of the gallery

If this option is enabled the left and right controls will be hidden at the first and last gallery item.

Loop gallery

If the loop gallery is disabled you won't be able to click the next image on the last gallery item and prev image on the first gallery item.

Show maximize button

Enable or disable the maximize button

5 - thumbnails

In this section, you can set up thumbnail image sizes, thumbnail area background color, and the button that allows you to show and hide thumbnail images.

6 - zoom

You can enable or disable the zoom button and functionality using this option.

7 - autoplay

This section is dedicated to the autoplay functionality. You can configure the autoplay button, progress indicator, and autoplay timeout in this section.