Rearrange Product Page

Hi! Making progress here, but I would like to make two changes to my product pages:

1) I would like to rearrange the product image so that it's centered and on top of the price, add to cart, etc (but still below the title).

2) I would like to add some padding around the product description at the bottom so that it doesn't stretch across the entire screen.

Your help on this is greatly appreciated!!! Thanks in advance!

You can modify the look of the product page by editing the file "show" of the view "product" via the menu Display>Views.

Padding can be added by adding some CSS in the front end CSS file that you can edit via the Display tab of the configuration.
More specifically:
#hikashop_product_description_main { padding: 50px; }

Thanks! Your tip about the padding worked great! Can you just tell me exactly how I can move the product image between the title and the price? I'm having a hard time finding it in the CSS. Thanks again!

That cannot be done via CSS.You need to edit the file "show" of the view "product" via the menu Display>Views and move the image block of code before the price block of code.

The image block of code is (for 1.5.4):
<div id="hikashop_product_image_main" >
<div id="hikashop_main_image_div" class="hikashop_main_image_div">
<?php
$image = null;
if(!empty($this->element->images)){
$image = reset($this->element->images);
}
if(!$this->config->get('thumbnail')){
if(!empty($image)){
echo '<img src="'.$this->image->uploadFolder_url.$image->file_path.'" alt="'.$image->file_name.'" id="hikashop_main_image" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle" />';
}
}else{

$height = $this->config->get('thumbnail_y');
$style='';
if(!empty($this->element->images) && count($this->element->images)>1){
if(!empty($height)){
$style=' style="height:'.($height+5).'px;"';
}
} ?>
<div class="hikashop_product_main_image_thumb" id="hikashop_main_image_thumb_div" <?php echo $style;?> >
<?php echo $this->image->display(@$image->file_path,true,@$image->file_name,'id="hikashop_main_image" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle"','id="hikashop_main_image_link"'); ?>
</div>
<?php }
?>
</div><div id="hikashop_small_image_div" class="hikashop_small_image_div"><?php
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',$image->file_name,'class="hikashop_child_image"');
}
}
?>
</div>
</div>



The price block of code is:
<span id="hikashop_product_price_main" class="hikashop_product_price_main">
<?php
if($this->params->get('show_price')){
$this->row =& $this->element;
$this->setLayout('listing_price');
echo $this->loadTemplate();
}
?>
</span>

Thanks That worked, but now everything has aligned to the left for some reason. How can I re-center it?

See the link here:

bledsoe.cloudaccess.net/lavina-tooling/polish/nato.html

Thanks!

You can edit the front end CSS file of HikaShop via the interface in the Display tab of the configuration and change the code:
.hikashop_product_right_part {
float: left;
padding-left: 1px;
}

to:
.hikashop_product_right_part {
width: 150px;
margin: auto;
}

I did that, but for some reason, it didn't work. The code now reads:


/* product listing */
.hikashop_product_item_left_part{
text-align:center;
}
.hikashop_product_right_part {
width: 150px;
margin: auto;
}
.hikashop_product_image{
padding-bottom: 2px;
}


It still looks the same:

bledsoe.cloudaccess.net/lavina-tooling/polish/nato.html

Please help! Thanks!

You didn't remove the CSS I said to remove:
.hikashop_product_right_part {
float: left;
padding-left: 1px;
}

Hi Nicolas,

I am also interest in rearranging the product page to look similar to what I currently have at my site, for example:

Product page link

I have seen the views section, but my concern is how this will affect potential upgrade if I start reordering php files? Is that advisable or should I stick to just css changes?

Thanks

No problem about that. If you update the views via the menu Display->Views, you won't loose your changes when you update HikaShop.

Hi. I did everything you posted in the original post:

.hikashop_product_right_part {
float: left;
padding-left: 1px;
}

to:
.hikashop_product_right_part {
width: 150px;
margin: auto;
}


it now reads:

/* product listing */
.hikashop_product_item_left_part{
text-align:center;
}
.hikashop_product_right_part {
width: 150px;
margin: auto;
}
.hikashop_product_image{
padding-bottom: 2px;
}

This is the only listing of ".hikashop_product_right_part" in the CSS. I even tried removing this, but it didn't work. Please help Thanks!

Thanks nicolas! That's good to know.

I can still see:
.hikashop_product_right_part{
float:left;
padding-left:1px;
}

in your CSS file: bledsoe.cloudaccess.net/media/com_hikash.../frontend_custom.css

Here:


hikashop_product_main_image_thumb{
margin-bottom:5px;
}

.hikashop_product_right_part{
float:left;
padding-left:1px;
}
.hikashop_product_bottom_part{
clear:both;
width:100%;
}
.hikashop_product_characteristic_chooser{
text-align:center;
}

Thanks. That fixed it. Sorry...having trouble finding some of the code sometimes