- Posts: 51
- Thank you received: 4
Product Page: Move thumbnails to left of images
14 years 2 months ago #62516
by bluewave
Product Page: Move thumbnails to left of images was created by bluewave
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!
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!
Please Log in or Create an account to join the conversation.
14 years 2 months ago #62561
by Xavier
Replied by Xavier on topic Re: Product Page: Move thumbnails to left of images
Hi bluewave,
Try to edit the frontend css file in HikaShop > Configuration > Display.
And add/edit the following property to the class like that:
And add the code:
Under:
In the view "product / show_default" in HikaShop > Display > Views.
Try to edit the frontend css file in HikaShop > Configuration > Display.
And add/edit the following property to the class like that:
Code:
.hikashop_main_image_div{
float:left;
}
And add the code:
Code:
echo "<br/>";
Code:
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);
Please Log in or Create an account to join the conversation.
14 years 2 weeks ago #70675
by norry
Replied by norry on topic Re: Product Page: Move thumbnails to left of images
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
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
Please Log in or Create an account to join the conversation.
14 years 2 weeks ago #70748
by Xavier
Replied by Xavier on topic Re: Product Page: Move thumbnails to left of images
Hi,
And if you just try to change the Product image size to, for example: 200px
Than edit the following properties:
And if you just try to change the Product image size to, for example: 200px
Than edit the following properties:
Code:
.hikashop_main_image_div{
float:left;
}
.hikashop_small_image_div{
float: right !important;
width: 150px;
}
The following user(s) said Thank You: norry
Please Log in or Create an account to join the conversation.
14 years 2 weeks ago #70761
by norry
Replied by norry on topic Re: Product Page: Move thumbnails to left of images
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
.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
Please Log in or Create an account to join the conversation.
Less
More
- Posts: 35
- Thank you received: 2
13 years 11 months ago #79543
by dynamicvitality
Replied by dynamicvitality on topic Re: Product Page: Move thumbnails to left of images
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.
Please Log in or Create an account to join the conversation.
13 years 11 months ago #79573
by Xavier
Replied by Xavier on topic Re: Product Page: Move thumbnails to left of images
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:
and add "<?php echo $class; ?>" in the class of the thumbnails.
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:
Code:
<?php
$produdctClass = hikashop_get('class.product');
$categories = $productClass->getCategories($this->element>product_id);
$class = '';
foreach($categories as $category){
if($category == '2')
$class = 'yourSuffix';
}
?>
Please Log in or Create an account to join the conversation.
Time to create page: 0.083 seconds