How to change the design of the layout

When you edit/create a hikashop products listing menu, you can access the hikashop options on the right side of the screen. In those options, you have an option to display the current category description. In the category description you can add images and text. If you want to add image scrolling modules in it, you will have to edit the file listing of the view product via the menu Display->Views and change:
echo $this->element->category_description;
to:
echo JHTML::_('content.prepare',$this->element->category_description);

In that menu Display->Views, you can edit any view of hikashop to suit your needs.
If you want to change products displays on listing, based on your changes you will either want to modify the product view files via that menu or, for less invasive modifications, edit your HikaShop CSS file in the configuration under the tab display.

You don't need to and shouldn't edit the files directly as your modifications will be lost when you update. By doing them via the interface, you will keep them when updating.

Hi,

You can edit the hikashop CSS in the config, under the tab display and change the height in that code :
div#hikashop_product_left_part img.hikashop_child_image {
margin: 2px;
height: 25px;
}

You can already change a lot of stuff by changing just the CSS relative to the product page. If you want to change even things in it, you can go in the menu Display->Views and edit the file show of the view product.

In the view file mentioned in my last post, if you change the line:
echo $this->image->display($image->file_path,'hikashop_main_image',$image->file_name,'class="hikashop_child_image"');
to:
echo $this->image->display($image->file_path,true,$image->file_name,'class="hikashop_child_image"');

that should remove the mouse over functionality.

It's not possible to change it easily without hacking in the core files of hikashop.

Ah you mean the popup effect ?

You're talking about the limit blue rectangles next to the images ?

That's actually because of your template styling. You could try to add that CSS in the hikashop CSS:

#hikashop_image_small_link { background: white }

But your template override it.
The easiest will be to add it directly in the styles of the image links:
echo $this->image->display($image->file_path,'hikashop_main_image',$image->file_name,'class="hikashop_child_image"','style="background:white;"');

And for categories and products listings, it's in the file listing_img_title of the view products and categories:
<a href="<?php echo $link;?>" style="background:white;">

Are you sure that you changed the code
echo $this->image->display($image->file_path,'hikashop_main_image',$image->file_name,'class="hikashop_child_image"');
to:
echo $this->image->display($image->file_path,'hikashop_main_image',$image->file_name,'class="hikashop_child_image"','style="background:white;"');
in the show file of the product view ? Because I didn't see that CSS style on your page...

The small iamges "move" because of the border added to them. You can remove that by editing the file administrator/components/com_hikashop/helpers/image.php and removing the line:
obj.childNodes[0].style.border=\'1px solid\';
But that modification will be lost of you update hikashop.

Hi,

There is no div enclosing the whole product page so you can't put a background image easily with just CSS. You will first need to edit the file show of the view product via the menu Display->Views and add a div around it with the attribute: style="background-image:url( mywebsite.com/my_image.jpg )"

The distance between the image and the small images is fixed automatically by hikashop based on the height of thumbnails that you specified in your configuration under the tab files. Reducing the height of thumbnails will reduce the gap there.

If you want to move the description, you will have have to edit the file show of the view product via the menu Display->Views and move the description related code to the right part div.

The layout files are indeed not loaded dynamically.
You could use put your code in the file listing_list of the view product via the menu Display->Views so that your code is in the override file of the list layout. Then, by selecting the list layout, you will get your modifications.