Main module configuration page

To decide about module's workflow - go to modules manager (modules > modules in prestashop 1.6 or modules > modules manager in prestashop 1.7). Hit configure button near module on list of available modules. You will be redirected to page where you can manage module's settings.

Below you can find details about available settings and explanation of what these options do.

Module appearance on list of products

Position of the module
Module to show pictures on list of products uses one from two positions. The position you need to select here depends on PrestaShop version and also on theme you use.

1. displayProductListReviews
   This is default position available in PrestaShop 1.7. If your theme supports PrestaShop theme development guidelines - you can be sure that this position will work. Please note that some templates have "theme configuration" area where you can configure the way of how theme works. You can find there options to "enable reviews on list of products" (activate it since module uses this hook) or manage layout of list of products (like it is in ApPageBuilder - where you have to activate this position as well).
2. displayProductDeliveryTime
   it is not default position in PrestaShop 1.7 but it it frequently used by many themes.
   It's a default position in PrestaShop 1.6 - so if you are on prestashop 1.6 - select this position.

Design of he module
This option allwos to decide about design details. You can select there one option from two:

• Classic theme
  this is design dedicated for classic theme in PrestaShop 1.7. If you will select this option, module will create layout in colors similar to default "classic" theme.
• Universal
  this is universal design applicable for all themes, module will not use any kind of background colors that can disharmonize layout

Display method
Display method decides about module workflow in terms of what it will display. You can select here one from 3 options.

1. Pictures for color combinations
   This option when active will get pictures of products for color combinations. Color combination is a combination created with usage of attribute with type: "color". Module will get product's combinations, then it will check associations between each combination and pictures.  Plugin will get only pictures associated with color combinations. If your product's combinations will not have any associated picture - module will not appear for this item. You can manage associations between product combinations and pictures on product edit page (its a default prestashop feature).
2. Pictures for each combination
   This option when active will get pictures of products for combinations. It does not matter if combination will be created with color attribute or not. The same as in previous method - module will get product's combinations. then it will check association between combinations' and pictures.If product's combinations will not be associated with any picture - module will not appear for this item.
3. All product pictures
   This option will just display all pictures uploaded to product

In Stock
This option is applicable to first two methods: Pictures for color combinations, Pictures for each combination. Module will display pictures of combinations that are in stock. If combination will be out of stock - module will not display picture associated with this combination.

Display color boxes instead pictures
Option is applicable to color combinations. If your products' combinations will be based on color attribute, you can display color miniature instead of product picture. Example of color boxes you can find below:

Picture switch method
Select how you want to init pictures switch process on list of products. You can select here one option from two: on click or on mouse over. When "on click" option will be active - you will have to click on color thumbnail to switch main product cover picture. If you will activate "on mouse over" - it will be enough to move mouse over the thumbnaul to switch main product cover picture.

Slider  

If your product has many pictures - you can create nice looking carousel with pictures. Below you can see list of pictures with "carousel". 

Module appearance on product page

As an additional feature - this module offers also appearance of thumbnails on product page. There are two possible options. You can display module in displayProductButtons / displayProductAdditionalInfo position and or replace default color attribute selection with pictures (where by default color squares appear).

Show color thumbs on product page in displayProductButtons hook
Option when active will display module on product page. This option displays pictures for color combinations. If you will select different "Display method" - module will not appear here.

Replace standard color attributes selection with thumbnails
Module allows to replace standard color attribute selection tool that is available on product page with thumbnails (images associated with color). This option when active will display color thumbnails (as images) on product page inside displayProductButtons hook. Images are clickable. When someone will clcik on it - this color combination will be selected. If you will activate this option remember to define thumbnail width and height, otherwise color thumbnails will not be replaced with pictures.

Css related settings

If you have problems with configuration of css related options - feel free to contact with us. We can help :-)

Main product container on list of products (class or id) 
Default value of this field is: .product-miniature. This option is for advanced users only and allows to use module in non-default themes that do not follow prestashop theme development standards. If you use theme where module does not work (for exmaple does not switch main picture) - this option can be helpful.

Product cover picture css (class or id)
Default value of this field is:  .product-thumbnail img. This option is for advanced users only and allows to use module in non-default themes that do not follow prestashop theme development standards. If you use theme where module does not work (for exmaple does not switch main picture) - this option can be helpful.

Product cover picture anhor css (class or id)
Default value of this field is: a.product-thumbnail . This option is for advanced users only and allows to use module in non-default themes that do not follow prestashop theme development standards. If you use theme where module does not work (for exmaple does not switch main picture) - this option can be helpful.

Product title anhor (class or id)
Default value of this field is: .product-title a . This option is for advanced users only and allows to use module in non-default themes that do not follow prestashop theme development standards. If you use theme where module does not work (for exmaple does not switch main picture) - this option can be helpful.

Additional class for miniature anchor (class) 
Some themes uses preloader after clicking on any kind of anchor. With this feature you can disable these preloaders.