How to change Product layout?

[sunshinepro]

Hello, So I've been looking for days now to figure this one out and I can not find anything that helps...

I'm trying to change the product layout.
I would like it to look something like this picture.

I have tried changing the css style sheet But no luck
I have Tried Changing the Tpl_product_listing_info.php and nothing...
I have also tried installing the layout grid mod.. Nothing..

I'm using Mother earth template.

Can someone please help me figure this out...

Thank You.

[fredmccay]

I have the same problems and I have 1500 products. I've heard they will address some of these issues in the next release but that won't be here for sometime. Changing the product layout page is difficult to not possible.

[sunshinepro]

I have the same problems and I have 1500 products. I've heard they will address some of these issues in the next release but that won't be here for sometime. Changing the product layout page is difficult to not possible.

I'm sure there is a way... Other wise other sites would not have it...

I really need help - Or perhaps a Template that is Designed like that, & I can change the colors and such...

Please Anyone?

[rstevenson]

So far you've said you need help but other than saying that what you tried resulted in "no luck" or "nothing" you haven't said what's wrong. Give us a link to your site and we can probably help.

Changing the product page is not rocket science. It's a matter of making changes (if necessary) to the PHP files which are used to assemble that page, and then fine tuning the CSS. But first tell us what you tried and what the result was -- in more detail than "nothing".

You might also want to look at the "Similar Threads" section, down below here.

Rob

[sunshinepro]

Ok well , To start with here is the link sunshineproductz.com

I have looked all over, trying to find the right tutorial on how to change the product layout to a similar one in the picture...

I have changed the tpl_product_listing_info.php by moving the php codes around to position where I want everything...

Then I Have edited the css Stylesheet added and changed these codes

/*.content,*/ #productDescription{
/*font-size: 1.2em;*/
margin: -12.0em 0.5em 0.5em 20em;
text-align:center;
}

/*Image Display*/
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
margin: 0em 1em 1em -23em ;
}

and seemed to position it a little more the way I would like it...

But the Problem I am Having is, The Text line... I would like the text to, as it is inserted, To follow under the picture rather then keep going down on the right side. I want it to stay on the right side, but if it get longer, Follow under the picture.
Plus I'm having a bit of trouble finding out how to fix the picture and the larger picture text from going into the Add to cart Button Box.

I hope this helps in explaining what I need help with.

if you need more info, please let me know!.

Thanks again.

[rstevenson]

Hi,

Site's looking good -- I like the Mother Earth template. First, a few basics...

1. Be sure to optimize your images before going live. The site is loading very slowly because of image size.

2. Careful how you move things around. You have the <!--eof Product description --> well above the <!--bof Product description --> part. That won't hurt anything, but it suggests you may have made other errors in moving bits of code in the PHP file.

3. Validating one of your product pages gives 13 errors. None of them will affect the issue you're asking about, but they may confuse older browsers. You should fix things like unencoded ampersands.

Now for the alignment issue. You said...

I would like the text to, as it is inserted, To follow under the picture rather then keep going down on the right side. I want it to stay on the right side, but if it get longer, Follow under the picture.

Interestingly, most people, when they ask about aligning things in the product description, want just the opposite. They want the text to stay over in a block and not wrap under the image. In other words, a stock Zen Cart does wrap text under the image. Do any of your products have enough text to show this? I couldn't find one that had enough text, but then I wasn't trying too hard.

What happens if you leave the changes in the PHP but temporarily put back a fresh, untouched stylesheet? (Remember that if you rename your changed stylesheet, make sure you call it stylesheet.bak and not stylesheet-bak.css. The former won't load; the latter will and will likely confuse the issue.

Let's reference one page until we get this worked out. I'm looking at your Hand Crafted Goddess Oak Wand product detail page, because it also has an additional image which is overlapping the text. I can see there that your main product picture is in a div which overlaps well outside the main (centercolumn) content area. Did you move that? (I'm using the Firebug addon in Firefox to see these things. It's highly recommended.)

Rob

[sunshinepro]

Greetings Rob.

Ok So I Optimized the main header and background image for now, That seemed to help. it was loading slow...

As for the <!--eof Product description --> & Stylesheet, I went a head and and replace it with the originals, So we can fix it up right...

What happens if you leave the changes in the PHP but temporarily put back a fresh, untouched stylesheet?

Well I checked this, and it came out looking like The picture.

I can see there that your main product picture is in a div which overlaps well outside the main (centercolumn) content area. Did you move that?

Yeah I Believe I did. All the codes that I have moved around, I can not remember if I did or not lol, But most likely I did....

Here is a Copy of my stylesheet and tpl_product_info_display
i'm really not sure on how to fix all the errors you were talking about, Other then putting back the original files...

And Yes I do have on my firefox a tool called web developer.

I hope there is a way to Align everything Properly...

Thanks again Rob.

[rstevenson]

Hi again,

I didn't try to do exactly what you want on a fresh install, mostly because I didn't have the time. But if you have a look at my retail site you'll see that the product detail page has been modified from stock. Here's what I did -- it should give you some ideas on what's possible.

First I moved some of the blocks around, experimenting just to see what went where. Here's the order of the blocks (the parts within those eof/bof comments) I have now, ignoring the usual stuff at the top...

<div class="prodInfoLeft">
Main Product Image
Product Price block
Add to Cart Box
</div>

<div class="prodInfoRight">
... all the description text with title, etc. ...
</div>

So that's the order of things. (You can View Source in your browser to see it in detail.) I added those two DIVs so I could apply style to the blocks all at once if I needed to. I didn't end up using that very much. You can probably ignore that part.

All the rest of the action occurs in stylesheet.css, down at the bottom. (I always put my changes at the bottom, to make them easy to find and to make sure they are the last definitions rendered.) As you can see, not much was required, mostly a few bits to align things. My main goal in all this was to get the "action" stuff up where people would see it -- that's the Add To Cart button and the price. The product description is not so important (for our products, anyway) so it's below the image. Styling for it was mostly applied in the admin text input.

#productDescription {
	margin: 0em;
	clear: left;
}

.prodInfoRight {
	clear: left;
}

#productPrices {
	text-align: right;
	margin-right: 100px;
}

I hope this helps you see what can be done. The real trick is to get the CSS worked out. Pushing the bits around in the PHP is easy by comparison.

Rob

[sunshinepro]

Well I tried changing all the codes around to how you have them, and still did not come out the way I wanted it...

I changed my template to Zen Natural...
Has the type of Product description I have been looking for.

Now all I have to do is change the header and some other pics and such and it will be fine...

I found no other way of doing this other then finding a Template already made...

Thank again Rob for helping me. I'm sure I'll need it again some day...

[mkyle]

Hi,

I am also tearing my hair out trying to sort the image positioning for the shop I am creating for my wives new business venture. I have grouped the three elements below together within tpl_product_info_display.php

Main Product Image
Product Price block
Add to Cart Box

My css style sheet shows:

#productMainImage {

float:left;

/*background: url('../images/shadow.gif') no-repeat bottom right !important;

margin: 0em 20em 0em 0em;*/

margin-left:5px; margin-right:0; margin-top:10px; margin-bottom:0;


However when I check in IE8 the picture shows above the product name (http://dase.me.uk/index.php?main_pag...products_id=10) but in Firefox 3.6.18 it shows on top of the product name

I would like the image to show under the product name in all browsers.

Thanks, Martin