Product Page: Move thumbnails to left of images

hello,

i am trying to move the thumbnails from under the image to the right of the image. I have attached a picture of what they currently look like. Notice the two very small thumbnails under the image, I would like to move those to the right of the main image (thus so those small thumbnails are next to their main image and in between the their larger image and the add to cart button/area).

Thanks for your help!

Hi bluewave,

Try to edit the frontend css file in HikaShop > Configuration > Display.

And add/edit the following property to the class like that:

.hikashop_main_image_div{
    float:left;
}

echo "<br/>";

			if (!empty ($this->element->images) && count($this->element->images) > 1) {
				foreach ($this->element->images as $image) {
					echo $this->image->display($image->file_path, 'hikashop_main_image'.$variant_name, $image->file_name, 'class="hikashop_child_image"','', $width,  $height);

hi there i have the same need to move the thumbnails to the right of the main pic

see here www.dressed2thenines.co.uk/index.php/interior-design

apologies in advance but im a starter on this - i have done the css edit above but when i pop into the show_default to edit i cant find that piece of code at all to add the echo "<br/>" under do i have to add that code too first

Hi,

And if you just try to change the Product image size to, for example: 200px
Than edit the following properties:

.hikashop_main_image_div{
    float:left;
}
.hikashop_small_image_div{
    float: right !important;
    width: 150px;
}

hi Xavier thanks so much the code was great i just tweaked it to

.hikashop_main_image_div{
float:left;
}

.hikashop_small_image_div{
float: center!important;
width: 800px;
}

and that gave the 2 wide thumbs as they were in a single line downward and enabled me to keep the big pictures

just need to tweak the price to another place as the thumbs are overwriting .

thanks very much indeed for your help - most appreciated

Is it possible to somehow use a suffix to modify this differently for different products? I'd like to have products in category "a" with small thumbs on the left, while products in category "b" be larger and below the photo.

Hi,

Yes it can be possible, edit the view "product / show_default" and add a class or a suffix to the class if the product is in the category '...'.
You can try to use a code like that:

<?php
$produdctClass = hikashop_get('class.product');
$categories = $productClass->getCategories($this->element>product_id);
$class = '';
foreach($categories as $category){
	if($category == '2')
		$class = 'yourSuffix';
}
?>