Layout of Product Information Page

Hello everyone. I am really new to Zen Cart. I have managed to install Zen Cart with the apple Zen template with some tips from the FAQ pages.

Now that I have added attributes to the products, the product page takes up to 3 screens depending on the attribute. Here is an example of one of the pages.

I would like to make the following changes but have no clue on how to get started:

1. The image should be the medium size not the small one. Where there are additional images, I would like the small images on the right side the main image
2. I would like the attributes with images to be on a single line rather than spanning multiple lines or reduce the spacing between the options.
3. I wpuld like the medium column of the webside to be wider.

Thanks for your help.

hi,

ok may i first recommend you shrink the actual file of the logo. i mean the logo.gif
size the file not just the css to what ever size you need it to display.
photoshop, paintbrush, any imaging software will do it.

its now 3370px by 977px. (you only need that when you print) and it

a) killed me on download of the page at 212kb when it probably could be just about 10kb.

and second recommendation is install all 4 major browsers minimum when using css and testing a site. css i great but browsers tend to sometimes interpret it differently. so you logo "looks" fine in IE and Opera but it took over two of my screens horizontally and vertically in Firefox and Netscape.

install them and have a look before you fix. additionally, the browsers are notoriously bad in treating font sizes and sizings differently. so what you might have optimized for IE might be very very tiny in the others.. (yours seems to be ok,) but its one of the things you want to look at when you work, with css.

but digression aside, everything under the sky is possible, so its possible that your main image page is displaying the small image but its far more probable that your medium images are displaying but that you didn't change the default display size for the images for the product page.

Configuration > Images and then about half way down the page

Product Info - Image Width ? Info
Product Info - Image Height ? Info

replace ? with what ever you want the Product Image to be displayed at, assuming that your medium images are that size.

for the second part of #1)
Additional images relocated with CSS is a mod in the contribution downloads, now it relocates additional images below the product main image using CSS, but it might help you figure out how its done, and you can figure out how to move them to the side instead of under.

you might want to open your tpl_product_info_display.php and find this part

...(and everything in between)...

...(and everything in between)...

see if they are next to each other , what div's they are in so you know what to try to move with the css and how. (firefox suggestion at the bottom)
you might have to tinker with the tpl if there are elements between those two

#2 no idea <sorry>

#3

its here

#contentMainWrapper {
width:71em;

and then all your various centerColumnWraper and the centerColumnWraper a, b, c, .. 1, 2, 3 .. there seems to be a few of them you have to track them all down
the width is set to all of them to about 70 / 71em and that is determining the width of your main container.

Install firefox, download the web developer tool box and use the CSS >> View Style Information and as you hover over the middle of your page you will see in the address bar which css definitions are assigned to those elements..

then hunt them down in the stylesheet and change them to what ever you prefer to have them.

and cross test in browsers...

hope this helps

Thanks so much! The site is beggining to take shape

Some more suggestions:

You can eliminate a good chunk of text and reduce the possibility of mistaken orders. This

When ordering select
* t-shirt colour (all 3 t-shirts are the same colour)
* Text colour
* Size
* Design style

doesn't actually make the customers follow your directions.
The note (all 3 t-shirts are the same colour) could just as well go in the first color statement and reduce redundancy :) Also, saying "will be" instead of "are" may be clearer.

What you should do is add for each of the option names another option value valled "Select" or whatever, and then in Attributes Controller add "Select" and make it Display Only and Default, for each option name.
This will force the customer to make a conscious choice before adding to cart.
If something has a most common variety, you could just make that default (but not display only), and customers will get that unless they choose otherwise.

You don't say whether the customer gets to choose three different designs or only one. The checkboxes allow three designs to be chosen (or two or four...)
You need to firm up the options you want to offer, then make them clear to customers and enforce them as much as possible so impossible orders cannot be placed.

Glenn,

Thans so much for the detailed feedback. I have really underestimated the amount of work and time that is required to set up a Zen Shop. I am learning though.

I have trimmed down the product description and removed some of the image attributes to make the content smaller.

I'm still wotking on getting the attributes to look a little bit better.