
Now you have to create a folder that will store the secondary images on your WebDAV server. Image.attr('src', image.attr('original')) Image.attr('original', image.attr('src')) Var next_image = config.ShopPath + '/content/hover/'+product_slug+'.jpg' Var product_slug = slugify(image.attr('alt')) Open the category.html file using WebDAV or the design mode feature in your control panel.Īdd the following script at the bottom of the file (before the element):

The possibilities are many and you can change the pictures to suit your particular needs. If you sell books you can show the front cover and then the back cover.

If you sell jewelry, you can show larger view and a detailed (zoomed in) view.

What is it good for? If you sell clothing you can show a front and back view. A regular template will only display one product image, but with this modification you will be able to display a second image for every product in the category list. I want to share with you a fast and easy way to improve the product presentation on your store's category pages.
