How do I style the product detail page

  • Posts: 2
  • Thank you received: 0
12 years 8 months ago #42154

Hi,
Enjoying using Hikashop - what a breath of fresh air after Virtumart!!
Anyhow, my progress has halted... I'm stuck on trying to change the display of the product detail page. I've been through all the config options but cannot see anyway to get the elements of the page (image, description, price, add to cart button) to position close to what I require. I am hoping to have the product image on the left, then the product name, price, description and add to cart button to the right of the image (effectively a two column layout). I only have HTML/CSS skills so trying to do this without risking breaking any of the php views. Is this possible without hacking the PHP?

Thanks,
Phil

Please Log in or Create an account to join the conversation.

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
12 years 8 months ago #42346

Hi,

You will have to edit the file "show_default" via the Display->Views menu. From what I understand, all you need is to move the bottom and top part code inside the right part area and that will display like your want.

Please Log in or Create an account to join the conversation.

  • Posts: 2
  • Thank you received: 0
12 years 8 months ago #42502

Many thanks Nicolas, that was really helpful. One further step forward now.

Please Log in or Create an account to join the conversation.

  • Posts: 40
  • Thank you received: 0
12 years 8 months ago #44462

Hey I'm also trying to achieve this exact same layout... I've found the area I need to edit, and I think I can see the parts of code I need to shift but the result is never correct. Would you possibly be able to show exactly the code modifications to make?

Please Log in or Create an account to join the conversation.

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
12 years 8 months ago #44580

You can just look at the name of the divs and move them accordingly.
For example, for the top, you can cut the code:

<div id="hikashop_product_left_part" class="hikashop_product_left_part">
	<?php
	$this->row = & $this->element;
	$this->setLayout('show_block_img');
	echo $this->loadTemplate();
	?>
</div>
and paste it just after:
<div id="hikashop_product_right_part" class="hikashop_product_right_part">

Please Log in or Create an account to join the conversation.

Time to create page: 0.067 seconds
Powered by Kunena Forum