Product Image

Hello,

As a start please consider my screenshot :

As you can see on my screenshot, it seems that you override view add an element to your view with the id="hide-main-image"
Then, when you select a variant (with several image define) the HikaShop default thumbnail part appear as expected (id="hikashop_small_image_div_19").

Now from this several idea to understand :
If when you arrived in your product (with variants) you haven't the thumbnail part, while you want that your product have more than one image and should therefore have the thumbnail part.
In my screenshot in the below the default view (which is a variant) there are 2 image and so the thumbnail part is displayed :


=> If you have set several image for your product in the Product tab, and not in the Variants tab, that's normal that you haven't the thumbnail part, then reproduce my configuration in the Variants tab to have the Thumbnail part when you arrived on your product page.

From this explanation, you may understand that the custom part (id="hide-main-image") isn't required anymore, and that don't seems to be able to manage the variant image process.
Hope this will help you to solve your issue in your variant management.

Regards

Hi,

It's possible yes.

First, you need to understand how the variant switching system works.
If you look at the HTML of the product page, you can see many divs with an id finishing with _main.
For example, you have the div hikashop_product_image_main which contains only the main image currently displaying on your end but normally contains the main image and the thumbnails currently displaying.
Then, after the </form> tag, you can see divs using similar ids but finishing with _XX (where XX is a number) instead of _main.
So for example, on your variant product link, you'll find hikashop_product_image_18 and hikashop_product_image_19.
You can see that that these divs are hidden with a "display:none;" inline style, and that they contain the main image corresponding to the variant with the id 18 or 19.
Finally, if you look at the script tag below the characteristic selector dropdown, you'll find a function called hikashopUpdateVariantData : i.imgur.com/r4OcsVy.png
The role of this function is to swap the HTML from the _main divs by the corresponding _XX div based on the currently selected variant in the characteristic dropdown(s). You can see in that function an array names which contains the list of div names to be taken into account for the swapping. There, you'll see "image". And the function will then look for hikashop_product_ + image + _main (or _XX).

Now that you understand how the system works, you know what you're missing for the ide-main-image to do the same thing as the other areas and automatically refresh when the variant selection changes :
- you need to set the id of this div to hikashop_product_YY_main where YY is some text defining your area. For example you could replace YY by thumbs
- you need to edit product / show_block_characteristic.php and in the names array of the hikashopUpdateVariantData function, you need to add YY to the list.
- in product / show.php, in the big foreach on the variants which takes the second half of the file, you need to add custom code to display the hikashop_product_YY_XX div for each variant.