Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Need some help arranging my product info page

Need some help arranging my product info page

Views: 1,466

Results 1 to 8 of 8
18 Jun 2012, 3:48 AM
#1
menappi avatar

menappi

New Zenner

Join Date:
Oct 2007
Posts:
63
Plugin Contributions:
0

Need some help arranging my product info page

I need a little bit of help re-arranging my product info page. I've attached a picture of what I have now (top) and what I'd like to get closer to (bottom).

-I want to change the 'Add to Car' text to 'Qty'.
-I want to change the next/previous/listing buttons to text links.
-I want the product image on the left to be 245x360 and I want extra images underneath.
-would like to add an add-this bar somewhere in there to be able to share the product.

thisishooligan.
com/two-finger-ring-balls01-p-181.html (example page)

That's all really, any help is appreciated :)

Attachment 10650

18 Jun 2012, 9:26 AM
#2
terragirl avatar

terragirl

Zen Follower

Join Date:
Jun 2010
Location:
Austria
Posts:
123
Plugin Contributions:
0

Re: Need some help arranging my product info page

The design changes are best done by creating your own template. Do NOT be tempted just to quickly amend the default template - next time you need to upgrade your ZC version you'll curse yoruself.

How to create a template is explained here: http://www.zen-cart.com/content.php?180-how-do-i-create-a-new-custom-template

As for changing the language, this is explained here: http://www.zen-cart.com/content.php?78-how-do-i-set-up-the-template-overrides

Modifying the default Language File - /includes/languages/english.php

Example: You need to modify the title, so that instead of reading Zen Cart!, it reads Your Store Name!

Make a directory with the same name as your template name in /includes/languages, so you now have /includes/languages/custom.

Copy english.php to this directory.

Then, you can make any needed modifications in your new:

/includes/languages/custom/english.php

The additional images you'll need to do by installing a module - the one I'd use is Image Handler. Assuming your version is 1.5, then you'd need to use: http://www.zen-cart.com/downloads.php?do=file&id=1380

As for "Add this" take a look at this module: http://www.zen-cart.com/downloads.php?do=file&id=1325 It's for 1.3.9 but should work for 1.5 as well.

Lastly, as with any development, BACKUP your site!! Do not start to touch anything until you've got a full backup of all files and database. For projects with multiple changes like yours, it's also worth taking a milestone backup at every major completion point, so that if one part goes badly wrong, you don't have to go back to square 1.

18 Jun 2012, 12:46 PM
#3
menappi avatar

menappi

New Zenner

Join Date:
Oct 2007
Posts:
63
Plugin Contributions:
0

Re: Need some help arranging my product info page

terraGirl:

The design changes are best done by creating your own template. Do NOT be tempted just to quickly amend the default template - next time you need to upgrade your ZC version you'll curse yoruself.

How to create a template is explained here: http://www.zen-cart.com/content.php?180-how-do-i-create-a-new-custom-template

As for changing the language, this is explained here: http://www.zen-cart.com/content.php?78-how-do-i-set-up-the-template-overrides

The additional images you'll need to do by installing a module - the one I'd use is Image Handler. Assuming your version is 1.5, then you'd need to use: http://www.zen-cart.com/downloads.php?do=file&id=1380

As for "Add this" take a look at this module: http://www.zen-cart.com/downloads.php?do=file&id=1325 It's for 1.3.9 but should work for 1.5 as well.

Lastly, as with any development, BACKUP your site!! Do not start to touch anything until you've got a full backup of all files and database. For projects with multiple changes like yours, it's also worth taking a milestone backup at every major completion point, so that if one part goes badly wrong, you don't have to go back to square 1.

Thanks for the tips, but I think I'm one step ahead of you. :smartalec: I am working off template and have overrides set up. I also have been doing backups anytime I edit anything as a safety measure. I have been meaning to install the Image Handler add-on so I will try that out along with the add-######## one.

How can I center my product info though? I tried adjusting the padding on .centerColumn and it centered everything but then my product category listings got all screwed up. That and I would like to remove the next/previous buttons and replace them with TEXT only.

18 Jun 2012, 12:50 PM
#4
dgent avatar

dgent

Totally Zenned

Join Date:
Nov 2009
Location:
UK
Posts:
1,117
Plugin Contributions:
0

Re: Need some help arranging my product info page

Have a look at my dress site in my sig, and click on the left hand side of the site (boutique) and then click on a product. I have the product images underneath etc.

This is all done by simply rearranging the elements in a different order in the tpl_product_info_display.php file in a different order, then tweaking with CSS

The easiest way to make the buttons text would just do that in photoshop to look like text, rather than try and recode.

18 Jun 2012, 8:26 PM
#5
menappi avatar

menappi

New Zenner

Join Date:
Oct 2007
Posts:
63
Plugin Contributions:
0

Re: Need some help arranging my product info page

dgent:

Have a look at my dress site in my sig, and click on the left hand side of the site (boutique) and then click on a product. I have the product images underneath etc.

This is all done by simply rearranging the elements in a different order in the tpl_product_info_display.php file in a different order, then tweaking with CSS

The easiest way to make the buttons text would just do that in photoshop to look like text, rather than try and recode.

Good ideas, thanks. What about centering the product description and image? Can't figure that one out.

19 Jun 2012, 3:47 AM
#6
sph avatar

sph

Totally Zenned

Join Date:
Jan 2006
Posts:
1,556
Plugin Contributions:
0

Re: Need some help arranging my product info page

Looks like you've made alot of changes to this template.

Since you've removed the left column for product pages, does the body otherwise go across the full width of the site? I ask this because a few templates (Estorenow, Apple Zen as examples) if you turn off all columns you still have a blank column area until you do some css or other work (still haven't figured out Estorenow.)

If the body goes across full width, then part of the problem is that you don't have enough content yet to look good full width (no columns).

Try making the product image larger, probably at least 300px wide since you have full width, to see if it helps push things over. IH will eventually help with resizing imagtes.

Can you put up more text in longer sentences and paragraphs to see where it goes? Just start hitting keys, if you have to. See if it goes all the way across, which may help answer if body is truly full width.

On this layout, you might even consider turning on the right column for product pages only, where you might make some creative use with sideboxes to help fill in space.

You mean centered over the prev/next buttons? Overall, I don't know that it would look good "centered" just as it is. The left and right margins would look like something is missing? In any event, I don't know how just yet.

Text only buttons: you might be able to do this turning on the css buttons. But you'd lose other buttons you probably like.

19 Jun 2012, 3:56 AM
#7
sph avatar

sph

Totally Zenned

Join Date:
Jan 2006
Posts:
1,556
Plugin Contributions:
0

Re: Need some help arranging my product info page

I frequently make use of a table in the tpl_product_info_display to arrange things how I want. Usually image in left cell, price and add to cart stuff in right cell. Then usually images and description below, outside of the table.

So I'm wondering if it would be possible to center such a table to achieve your centering....

2 Jul 2012, 4:37 AM
#8
menappi avatar

menappi

New Zenner

Join Date:
Oct 2007
Posts:
63
Plugin Contributions:
0

Re: Need some help arranging my product info page

SPH:

I frequently make use of a table in the tpl_product_info_display to arrange things how I want. Usually image in left cell, price and add to cart stuff in right cell. Then usually images and description below, outside of the table.

So I'm wondering if it would be possible to center such a table to achieve your centering....

I think this might be what I need to do. Right now, any extra content , attributes, etc are going underneath my product image and I want to keep all of that on the right side. If you check out this link you'll see what I mean. If I made my product image higher then it probably wouldn't wrap below but i don't want to do that so do you think a simple table will work to arrange things??

thisishooligan.com/two-finger-ring-balls01-p-181.html