With this “change product image when click on color variants module” for PrestaShop 1.7, you can display product attributes (in most cases product color variants) out on product miniature, when you click on attributes, product images will be changed to the image of clicked attribute, which is very usefully for sites like, clothing store, flowers store, shoes store, etc.
Ability to product attributes out on product miniature
- This module can show any types of product attributes out, like “Color”, “Size”, “Model”. In most cases we use this module for “Color”.
- Ability to show in-stock attributes only.
- Ability to hide attributes which have no images.
3 Ways to select products
- All. For example, if your site sells clothing only, then you can set to show color variants for all products.
- By category. You can choose categories to show color variants.
- By manufacturer. You can choose manufacturers to show color variants.
2 ways to handle click event.
- Click on color variants to change product images.
- Product images will change when mouseover color variants, clicking on color variants links to the product page.
- Match your site design, you can set this module to match your site design.
- Custom css code.
- PrestaShop 1.7
- Transformer theme v4, Panda theme v2, Classic theme and all other standard themes.
99% PrestaShop themes are standard themes, till now we just saw one non-standard theme which even don’t use the /theme/core.js file.
How to install and upgrade.
This “Change product image when click on color variants module for PrestaShop 1.7” can be installed easily without editing any files.
How to install? Use the “Upload a module” button on “BO > Modules” page to install the module.
How to upgrade? Use the “Upload a module” button on “BO > Modules” page to upload the new version to your site, it’s the same as how to install, don’t worry all your data will be safe, PrestaShop will just upload updated files to your site, it won’t reinstall this module.
How to get support.
If you have any questions with this module, post them out on the prestashop module support forum, we’ll help you out.
Generally we don’t need to show attribute name out so I didn’t add an option for that, because in most cases just “Color” and “Size”. If you like to show attribute name out, put this code to the custom css code field.
This module has an option to don’t show out-of-stock attributes. If you like to show out-of-stock attributes out, then use this code to gray out-of-stock attributes out to make everything be more sense.