Modifying the layout of product.tpl

bespoke kid · #1 05-30-2008, 01:48 AM

Hello i'm trying to change the layout of product.tpl so that i can show a large image of the product but not shunt the whole page off the screen to the right.

So maybe have the image above the "Detailed description" like this :-

http://www.bespoke-dance-shoes.co.uk/xcart/images/producttemplate.jpg

sorry it's a bit long, i'm also thinking about how to allow the customers to read the shoe ranges text (there's so much of it !) but allow them to customize their selected shoe model quickly.

i've tried copying and pasteing the code in product.tpl into the positions i want but i just get errors.

any help appreciated.

balinor · #2 05-30-2008, 04:20 AM

product.tpl has a lot of {if} statements that can easily break if you aren't careful. It is a tough page to edit, you just need to keep trying. I'd suggest using Dreamweaver to help you see the table layouts, that is a least a start!

bespoke kid · #3 05-31-2008, 03:23 AM

thanks I was using dreamweaver, but like you say it's a bit fiddly to edit that .tpl

PostcardMania · #4 06-02-2008, 06:36 AM

I'm currently setting up our page and modifying its contents. I've found a best practice is to comment out bits of code or duplicate the page entirely. That way the original code stays intact, should you seriously FUBAR something.

That being said, and balinor correct me if I'm wrong, but product.tpl handles how each product's page will be laid out, whereas products.tpl determines the layout of product listings on the main page.

(I recently wasted an hour wanting to update products.tpl, but working in product.tpl instead and pulling my hair out!)

balinor · #5 06-02-2008, 06:38 AM

When in doubt, use webmaster mode or reference this thread:

http://forum.x-cart.com/showthread.php?t=21529

MasterGuru · #6 06-02-2008, 01:22 PM

Is there a program we can use from our desktop to edit the tpl files? decides dreamweaver. One that we can see what the layout looks like while still being able to edit the code?

balinor · #7 06-02-2008, 01:24 PM

No, if you want to see the table layout, DW is your best bet. But you really should edit the code in a code editor like UltraEdit.

gb2world · #8 06-02-2008, 02:21 PM

There is also a firefox addon that allows you to outline tables and/or table cells. It is called Web Developer. Using that in combination with Firebug makes it easier to see the numberous embedded tables & table cells.

Realsecurity · #9 06-22-2009, 01:08 AM

How does one remove the CSS styling to the detailed description area? want to add my own html product layout so that all text appears exactly as it was made in dreamweaver! if i copy the html code straight into detailed description at the moment it just reverts to x-carts font size, width, font colour etc!

any suggestions appreciated,