Customise product layout and make it responsive

-- HikaShop version -- : 2.3.0
-- Joomla version -- : 3.2.3

Hi,

I am wanting to change the layout of the product page display.
I have attached 3 images :
-one shows how it is displaying currently without any changes in code or css
-one shows how I woul like it displayed
-one shows how the second one must also be responsive so as to adapt to mobile devices

I found someone who had some css trick to make the thumbs swap to the right of the main image but it made things messy by putting the thumbs under the price text to which I had to then add a huge top margin to and this certainly didin't make it a responsive design.

I'm good with css but not so good with php and I am guessing I need to alter the php of (presumebly) the product/show_default.php

I think what needs to be done is take the "hikashop_small_image_div" out of "hikashop_product_image_main" and "hikashop_product_left_part" and put it into "hikashop_product_right_part". This would make sense no? That way the thumbs go to the right where I want them and then sit above the price and dimensions.
Then I would put the "hikashop_product_description_main" that is in"hikashop_product_bottom_part" also into "hikashop_product_right_part"???

BUT I have no idea how to do this exactly as I can't even find the code for the thumbs nor do I know which parts to take and which to leave and where to place them exactly.

The second issue being that I also need the product page to be completely responsive for mobile devices.
Right now the images doesn't even resize to fit mobile.

Can anyone help on this matter?

Thanks in advance!!

ps : please if anyone can explain how to do this, can you walk me through every step as my php knowledge is virtually non existant!

Claire

Hi,

this is the page I'm trying to customise :
stlena.dekerpelbarclay.com/index.php/bou.../3-housse-de-coussin

I have reset the css to how it was before I started playing with it so it's the original frontend.css
I can only get so far with the css before I get blocked ( images won't become responsive for mobile correctly, I believe it's an overflow problem and the price and dimensions section end up under the thumbs on mobile) so any help you could offer when you have a moment would be greatly appreciated!

Thanks in advance

Claire

Hello Claire,

1. For the second screenshot, the solution will probably be to that of CSS code :

#hikashop_product_left_part {
width: 100%;
}

#hikashop_main_image_div {
float: left;
}

.hikashop_child_image {
width: 149px !important;
height: 91px !important;
}

#hikashop_product_right_part {
float: right;
margin-top: -60px;
padding-left: 30px;
}

#hikashop_product_description_main {
float: right;
margin-right: -123px !important;
}

You can do the modifications in the frontend css file via the menu Configuration > Display > CSS
Use the @media tags to change the width of the columns when the width of the page is less than xx.

ex:
@media (max-width: 767px) {
.hikashop_products .row-fluid .span4 { width: 49% !important;}
}

Here is some documentation about the layout customization:
www.hikashop.com/support/documentation/1...ize-the-display.html

Hi Mohamed,

thank you for your help.
I have pasted the css you gave me and it displays nicely on desktop like I had it previously using different css (but I will prefer yours to mine!).
However I am a bit confused by the instructions for responsiveness.
Whether I paste the css :
@media (max-width: 767px) {
.hikashop_products .row-fluid .span4 { width: 49% !important;}
}
into the the frontend css file via the menu Configuration > Display > CSS or not put it in at all it makes no difference.
Even when changing the max-width to a different number, nothing changes.

Am I missing a step?
The link you sent :
www.hikashop.com/support/documentation/1...ize-the-display.html
doesn't go over @media. Am I meant to change or add something in the php of one of the views?

I have attached a mockup of how it is displaying on mobile so you can see what I mean by it not being fully responsive.

Thank you again for your help.

Claire

Hello,
Note that the CSS code used through the thread that I gave you isn't adapted to your website or what you want to do, in your case the solution will be to use this kind of CSS code :

@media (max-width: 767px) {
YourCSSCodeForMobile
}

Hi,

right I understand now, thanks for all your help.

Claire