Secondary product images appear distorted

Hi,

That comes from the CSS of your template, not from the thumbnails themselves.

HikaShop generates the thumbnails at a fixed size and writes that size on the image tag, like this :

If the CSS of your template contains a rule which forces the width of the images, for example img { width: 100% }, without setting the height back to auto, the browser stretches the image to the whole width of the column while it keeps the height written on the tag. The result is exactly what your screenshot shows : thumbnails as wide as the block and completely flattened. The main image is not affected because it sits in a container of its own size.

Two ways to confirm it in one minute :

- open one of the thumbnails alone in a browser tab (right click on it, open the image in a new tab). If the file itself has the right proportions, then it is the CSS of the page.
- right click on a thumbnail and choose Inspect : the rule which sets the width will be shown in the styles panel, with the name of the CSS file it comes from.

The fix is to add this in the custom CSS of your template :

Note that HikaShop never distorts an image : the two modes available in the configuration for the thumbnails are "keep the ratio" and "crop", so a generated thumbnail always keeps its proportions.

If that does not solve it, give me the address of a product page of your website and I will look at it directly.