Changing the layout of my product information page

Hi,

I wonder if anyone can help me? I am trying to redesign my product information page but am having trouble getting various items to display how I would like them to.

Firstly, I have a div setup that holds my product description, however for some reason this wraps around the product image. I have added a background colour to this div to show this more clearly. How can I set this up so that the div does not wrap around the product image?

Secondly I have moved my additional product images so that they sit just underneath the main product image. However the white space between the images is much too big and I would also like to remove the dotted vertical lines but cannot seem to find a way of doing this.

Thirdly, ideally I would like the add to cart button and quantity box to sit neatly beneath the price and above the description. At the moment it is at the side and squashes all the description text up.

Finally, for some reason, my search box displays nicely in the main navigation bar in Chrome and Firefox. In ie however it displays lower and hangs off the bottom of the navigation bar. Does anyone have an idea of how I might rectify this.

The link to my product page is:

http://w w w.our little cottage shop.co.uk/owls/vintage-floral-owl-cushion

I would appreciate any help anyone may be able to give.

Thank you in advance,

Lee

Looks like you got this fixed ?

Hi Stevesh,

No it's not fixed I'm afraid. All of the above are still issues...

Lee

Here's what the page you referenced looks like here in IE8 and FF12: http://stevesh.org/test/example.jpg

What exactly did you want to be different ?

Templates and the product layout in particular are what have been on my mind for some time. I have no real issue with zencart and its functionality otherwise.

I've long used a table in the tpl product info display to help arrange things. Often photos in left cell (might put additional pics below main pic); price, attributes and add to cart in right cell, and rest below table. As it turns out, some free templates also use a table, like the free Abagon Red currently on my prommart site.

I think that the free Rubik Modern Zen has about the most modern product layout, and I have it on a demo here:

http://www.prom-mart.com/demo-2/a-bugs-life-multi-pak-special-2003-collectors-edition-p-34.html

Maybe additional photos could be moved up under main photo. I really should dig in to this template to see how he did it.*

Now, this morning and on this forum I just discovered these demos:

http://mystorepal.com/demo/

Either of the two demos here have what I consider the ultimate product layout. I am very impressed with these demos overall.

=============
*Rubik and BlueCart also have nice displays for "All Products", etc, showing the descriptions where ever they appear. Just make the sites look bigger, IMO. Wish: combine Rubik and BlueCart and maybe can approach the nice demos at mystorepal. How come I don't see any zencarts looking like mystorepal? Not even TM look as good overall.

EDIT: Yes, your current layout looks okay in my IE9, agree with stevesh

stevesh:

Here's what the page you referenced looks like here in IE8 and FF12: http://stevesh.org/test/example.jpg

What exactly did you want to be different ?

Hi,

Thanks for coming back to me again.

Firstly the spacing between the two additional images is too wide and I'd also like to remove the vertical dotted line between them.
Secondly, my add to cart button and quantity box I would ideally like positioned to the left, beneath the product price but above the product description.
Thirdly I have set a pale blue background. At present this is wrapping round the main product images and appearing behind one of the additional images. I do not want it to do this. Ideally the left side should continue in a straight line and not wrap behind the additional image.

Hopefully this makes sense.

Lee

1. The additional Photos dotline seem to be in all of Picaflor's templates, probably best to ask her. I don't recall the exact mod the template uses right now.

2. You can move blocks of code around in tpl product info display to move the add to cart. But I'm not sure how you got it to the right. In any event, it looks like you've been in there so are familiar with it.

3. Blue background, not sure how to do with css (I'm just studying online) but probably wouldn't wrap if set up in a table as I stated above. Just that table cell would have color. In fact, I've done this color background before.

SPH:

1. The additional Photos dotline seem to be in all of Picaflor's templates, probably best to ask her. I don't recall the exact mod the template uses right now.

2. You can move blocks of code around in tpl product info display to move the add to cart. But I'm not sure how you got it to the right. In any event, it looks like you've been in there so are familiar with it.

3. Blue background, not sure how to do with css (I'm just studying online) but probably wouldn't wrap if set up in a table as I stated above. Just that table cell would have color. In fact, I've done this color background before.

Hi, thanks for your comments. I agree, the product information page is one of the only things that really isn't great within Zen Cart, hence why I am trying to heavily change it to a more suitable layout. The demos you included in your post have some really good layouts for the product info page.

You mention that one way of getting items to align correctly is to use a table. I have no idea how I would go about doing this I'm afraid and have always been under the impression (rightly or wrongly, I dont know) that tables aren't a good idea for page layouts and that div tags should be used instead. I would be interested to know how to add a table though so I have this option available.

Thanks for the thought re the dotted lines. I will contact Anne and see if she can help me.

Thanks for all your help,

Lee

Hi Stevesh,

Did you have any further thoughts about how I may achieve what I am after please? Did I explain it clearly enough?

Many thanks

Lee

Fact is, I like the layout of your product info pages. It's always dangerous, IMO, to obsess over minor layout details.

That said, you'll need to move the page elements around as SPH mentioned in tpl_product_info_display.php. The various segments are identified in the file code using BOF and EOF comments like <!--bof Product description -->. You can move that whole section where you want it relative to the other sections.

Install the Firefox browser and the Web Developer plugin for Firefox. You can use those to see where in the stylesheet you change the styling of the various page elements.

Ctrl-Shift-Y will allow you to hover over a section of the page and see the class and id names for that section in the box at the top. The statements in the stylesheet that begin with # are id's and the ones that begin with dots are classes.

Ctrl-Shift-E will open the CSS editor and allow you to edit the stylesheet and see the changes in real time without changing anything permanently. An essential tool.

Some prefer Firebug, which does much the same thing.

(If you're using Firefox 4-12, you'll need to remap the editor shortcut, since Firefox has appropriated Ctrl-Shift-E for an internal function - I use Ctrl-Shift-Q.)

You'll find that the dotted line is part of your template and is here in stylesheet_dotline.css:

.vDotLine
{
background-color: transparent;
background-image: url(../images/delim_v.gif);
background-repeat: repeat-y;
background-attachment: scroll;
width: 20px;
font-size: 1px;
}