Rearranging Product Information Page

[Guest RJMerc]

I would like to accomplish the following on the "Product Information" page:

1. The product image I'm using is 200x200 pixels. Right now it's centered with the product information displayed below it. I'd like to move the product image to the left hand side of the column.

2. Right now, the Product Options, Price, Quantity and Add to Basket button are located below the Product Descriptions, which are somewhat lengthy. I'd like to move these items to the right of the product image.

I was able to move all items such as the Shopping Basket, Mail List and Language to the left hand column under the Categories list and I have increased the width of the Products column...so I do have the room to add these other items if I can figure out how to do it...

Any thoughts?

My site is located at: http://nimedical.com/shop1/index.php

Thanks very much in advance.

Rick

[Guest webicon]

Hi Rick,

I see you've worked out how to make the site work two-colmn layout.

To make the image float left and have product information to the right try adding a style to the image in

{Your Skin}/styleTemplates/Content/viewProd.tpl

1. BACK UP the file you are working on - if all goes wrong you can restore!! :-)

2. To get the image to float left, find the image in viewProd

<img src="{IMG_SRC}" alt="{TXT_PRODTITLE}" border="0" title="{TXT_PRODTITLE}" />

and replace with

	<div style="float:left; width:220px;text-align:left;"><img src="{IMG_SRC}" alt="{TXT_PRODTITLE}" border="0" title="{TXT_PRODTITLE}" /></div>

I've added in the width at 220px above to a bit of space between the image and the text.

The product into should automatically align itself by floating to the right of this image.

If you dont want the product info to wrap th eimage but instead continue straight down as if in a second colomn, you can always apply a similar div around the product info - changing the style info to suit... Hope that helps...

[Guest RJMerc]

Thank you very much for taking the time to help me. I've done some of the work this weekend with good results. I'll try the second part this week.

I'm starting to get the hang of this...well, sort of...lots to learn.

Again, your help was very much appreciated.

Rick

[Snowsmile]

Hi Rick,

I see you've worked out how to make the site work two-colmn layout.

To make the image float left and have product information to the right try adding a style to the image in

{Your Skin}/styleTemplates/Content/viewProd.tpl

1. BACK UP the file you are working on - if all goes wrong you can restore!! :-)

2. To get the image to float left, find the image in viewProd

<img src="{IMG_SRC}" alt="{TXT_PRODTITLE}" border="0" title="{TXT_PRODTITLE}" />

and replace with

	<div style="float:left; width:220px;text-align:left;"><img src="{IMG_SRC}" alt="{TXT_PRODTITLE}" border="0" title="{TXT_PRODTITLE}" /></div>

I've added in the width at 220px above to a bit of space between the image and the text.

The product into should automatically align itself by floating to the right of this image.

If you dont want the product info to wrap th eimage but instead continue straight down as if in a second colomn, you can always apply a similar div around the product info - changing the style info to suit... Hope that helps...

Great! I've searched for this code for a long time. Much appreciate for your instruction.