Hi,
This issue comes from the CSS:
.hikashop_product_page .hk-row-fluid #hikashop_product_left_part .hikashop_product_main_image a img {
height: 100%;
}
.hikashop_product_page .hk-row-fluid #hikashop_product_left_part #hikashop_small_image_div {
background: #f5f5f5;
}
.hikashop_product_page .hk-row-fluid #hikashop_product_left_part #hikashop_small_image_div a {
display: inline-block;
margin: 0 5px;
padding: 0 5px;
border: 1px solid rgba(15,30,32,0.8);
}
.hikashop_product_page .hk-row-fluid #hikashop_product_left_part #hikashop_small_image_div a img.hikashop_child_image {
height: 1
in the file
www.lesswatts.co.za/templates/jd_miami/css/template.css
of your template.
instead of #hikashop_small_image_div, it should use .hikashop_small_image_div so that the CSS is still applied when the variant images are displayed instead of the default ones.
You should contact your template provider so that they can update the CSS in their template to take that into account.