Hikashop Multiple images thumbnail ordering issue when using variants

icronje
Topic Author
Offline

6 years 9 months ago - 6 years 9 months ago #314064 by icronje

Hikashop Multiple images thumbnail ordering issue when using variants was created by icronje

-- url of the page with the problem -- : www.lesswatts.co.za/shop/product/smartsolar-mppt-100
-- HikaShop version -- : 4.22
-- Joomla version -- : 3.9.13
-- PHP version -- : 7.2.25
-- Browser(s) name and version -- : Firefox 71.0 (64-bit)
-- Error-message(debug-mod must be tuned on) -- : None

Hi,

When I have multiple images of a product in Hikashop, the image thumbnails displays correctly as expected when one first lands on the page, however, when a variant of the image is selected, the thumbnails for the product images suddenly changes its layout which makes it difficult to choose a new image to display on the product page.

What can be causing this behaviour?

REgards

Ignatius Cronjé

Last edit: 6 years 9 months ago by icronje.

Please Log in or Create an account to join the conversation.

nicolas
Away

6 years 9 months ago #314065 by nicolas

Replied by nicolas on topic Hikashop Multiple images thumbnail ordering issue when using variants

Hi,

This issue comes from the CSS:

Code:

.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.

The following user(s) said Thank You: icronje

Please Log in or Create an account to join the conversation.

Time to create page: 0.137 seconds