Zen Cart Layouts

Zen Cart Layouts

This tutorial shows how to modify the look and functionality of your Zen Cart store by changing the number of columns. You can do this with most templates. I have written this tutorial with Zen Cart 1.3.x in mind, but the same methods apply to 1.2.x - the CSS will just be used to resize tables instead of divs.

You will need a basic understanding of CSS to merge my sample code into your template's CSS file. My Free Red Zen Cart Template is used as an example.

2 Columns

Simplify your interface and cut download times by dropping a column.

1.   Get rid of a column in the Zen Cart admin panel. I recommend removing the right column. While a right column is common on blogs, people still expect to see the main navigation on the left side or top in a shop.

2.   This leaves the centre column too wide on most monitors. We'll narrow it down with some CSS. I've added a grey background to the page and some padding to the left column to prevent it from going right to the edge of the store.

3.            

4.           body {

5.           color:#000000;

6.           font:.75em/1.5 'trebuchet ms', arial, sans-serif;

7.           background-color:#ccc; /* grey background */

8.           margin:0 15px;

9.           }

10.        

11.       #mainWrapper {

12.       text-align: left;

13.       vertical-align: top;

14.       width:700px; /* sets the width of the store */

15.       background-color:#fff; /* gives the store a white background */

16.       }

17.        

18.       #navColumnOne {

19.       padding-left:10px; /* move the left column inwards */

20.       }

Alternatively, I could add some padding around the whole centre section. The difference is most noticeable around the header image - there is now a white border between it and the grey background.

#mainWrapper {

padding: 0 15px;

}

It looks a lot less like Zen Cart already! I've added the background images just for fun. There is a lot of blank space around the shop now, so why not use it?

1 Column

Still too much clutter? Turn off the other column and make sure CSS navigation tabs are turned on so that Zen Cart's categories are listed in the header. You don't need to change any CSS, unless you want to vertically centre the store as well.

If you are going to vertically centre the store, make sure you have total control over the amount of content on every page - the height needs to stay the same.

#mainWrapper {

height:550px;

position:absolute;

top:50%;

left:50%;

margin-top:-275px;

margin-left:-375px;

border:7px solid #aaa;

}