Free Zen Cart Template 2 – Wide

November 13, 2008 in Free Zen Cart Templates

Is this useful? Like it.

Want a better looking template to increase your sales? See our premium templates. Guaranteed unbeatable prices & value!

Some users have told me that most free Zen Cart templates or even commercial Zen Cart templates are just too narrow for their liking. It seems that there is a demand for wider (fixed-width) templates. Here’s one I created — 1000px width. Good enough to accommodate the left and right columns at 200px or more, and still leave enough room to fit 3~4 products per row in the center column comfortably.

Screenshot - Free Zen Cart template 2 (Click for larger image)

Screenshot - Free Zen Cart template 2 (Click for larger image)

Installation instructions (this is also included in the ZIP download):

  1. Extract to appropriate location:
    \includes\templates\freetemplate2
  2. Login to your Zen Cart admin to enable the template:
    Admin > Tools > Template Selection > Click ‘Edit’ button
  3. Reset the side boxes:
    Admin > Tools > Layout Boxes Controller > Click ‘Reset’ button
  4. Set the column width:
    Admin > Configuration > Layout Settings > Column Width – Left Boxes (set to 200 pixels or whatever you like)
    Admin
    > Configuration > Layout Settings > Column Width – Right Boxes (set to 200 pixels or whatever you like)

Zen Cart Version: 1.5.0, 1.3.9 and 1.3.8
Browsers tested: Firefox 3.0, Opera 9.5, Internet Explorer 6, Internet Explorer 7

Download Free Template 2

Premium Zen Cart templates from $19 only. Guaranteed unbeatable value! Give your business an advantage over others! Click to see now!

Bookmark and Share

Comments

54 Responses to “Free Zen Cart Template 2 – Wide”

  1. Fred on December 5th, 2008 6:39 pm

    SOrry but this point is not clear… :$…

    # Set the column width:
    Admin > Layout Settings > Column Width – Left Boxes (set to 200 pixels or whatever you like)
    Admin > Layout Settings > Column Width – Right Boxes (set to 200 pixels or whatever you like)

    i don’t find the lik to Layout settings in admin…

    Could you help?

  2. admin on December 5th, 2008 7:08 pm

    Oops… The locations to adjust column width are:

    Admin > Configuration > Layout Settings > Column Width – Left Boxes

    Admin > Configuration > Layout Settings > Column Width – Right Boxes

    Thanks.

    PS: Post already rectified

  3. Julie on January 25th, 2009 1:06 pm

    Hi there :) Thanks for this template. However I have followed your instructions, and everything seemed just fine, except even tho this template is selected, it’s not showing up on the store front, it’s still showing the generic zen cart. Any ideas on what could be wrong?

  4. admin on January 25th, 2009 1:38 pm

    Admin > Tools > Template Selection > Click ‘Edit’ button

    Did you then choose the template from the dropdown and click ‘Update’ ?

  5. Julie on January 25th, 2009 2:44 pm

    yes did choose it and click update and it shows that that template as the default under tools/template selection, and the preview shows it – but then clicking on online catalog still shows the generic one.

  6. Julie on January 25th, 2009 4:11 pm

    I have figured this out..thanks for your reply :) apparently where there were two templates on the left side.. once I deleted the generic one, this did work.

  7. Free Zen Cart Templates - Hidden Pixels on February 16th, 2009 1:10 pm

    [...] Free Zen Cart Template 2 – Wide [...]

  8. Lola on February 21st, 2009 1:00 am

    Hi…How can you add the logo where is says my online store…I haven’t been able to figure it out…Instead of a tagline or slogan I just want to add my logo…

  9. admin on February 21st, 2009 10:33 am

    Edit the \includes\templates\freetemplate2\common\tpl_header.php

    Replace the slogan with image html code … then open the stylesheet.css file and define the position of the DIV #slogan

  10. Cameron MacLeod on February 23rd, 2009 6:56 am

    Hi there, I am trying to get the categories to display on the main page but they don’t seem to come up. They are there okay with the default template but with yours they dont seem to display. What could be the problem with this? Thanks

  11. admin on February 23rd, 2009 10:33 am

    Admin > Tools > Layout Boxes Controller .. then scroll to the bottom and click the reset button.

    Every time you change to a new template, you need to click the reset button

  12. Julianna on March 3rd, 2009 10:07 am

    Hi. I installed the freetemplate2 and love it! :-)

    Only I do have a question…I can’t seem to get my logo/banner in the right position (as you can see at http://worldofgiftbaskets.com).

    Also, from the screenshot of your template, I noticed the links under the header..I don’t see any on mine. They are only displayed at the very top.
    Any help would be greatly appreciated!

    Regards,

    Julianna

  13. admin on March 3rd, 2009 10:46 am

    You can just replace the background image (hd.jpg) witn another image of the same dimension (950px × 171px)

    Or if you want to put a smaller image on top.. you need to use CSS absolute positioning to control the position. Open the stylesheet.css file and find:

    #slogan {
    position: absolute;
    top: 90px;
    left: 50px;
    }

    ——————

    The menubar is Ez-Pages links … it’s blank by default. You can add links to the menu:
    Admin > Tools > Ez-Pages

    Pls see zencart.com tutorial or forum on how to use Ez-pages

  14. Julianna on March 3rd, 2009 9:52 pm

    It worked! :-)

    I just change the hd.jpg image with mine. I just didn’t think it would fit or look right..but I think it looks just the way I wanted it! :-)

    http://worldofgiftbaskets.com

    What do you think?

    Thank you so much for suggesting that…

    Regards,

    Julianna

  15. Julianna on March 4th, 2009 10:09 am

    Quick question…how do I make the header link to my site?
    I tried adding the link to where the slogan/tagline is with no luck. Which file would I need to change to do this?

    Thanks so much for all your help.

    Regards,
    Julianna

  16. admin on March 4th, 2009 10:21 am

    you need to convert the banner to image instead of background.

    put image code in the tpl_header.php file (also you need to edit the CSS)

  17. Julianna on March 4th, 2009 11:42 am

    I can’t find where..:-(

    Would it be under where it says branding display?

    And where in css??

    Sorry..it seems a bit confusing for me.

    Thanks,

    Julianna

  18. admin on March 4th, 2009 11:53 am

    The elements on the header (top banner included) is in :
    \includes\templates\freetemplate2\commontpl_header.php

    The CSS is in:
    \includes\templates\freetemplate2\css\stylesheet.css

    You may need to study the codes and also learn some CSS

    You can email me if you have further questions.

  19. Mark B. Daly on March 10th, 2009 2:43 am

    Hello,
    I am having problems with sub catagories not showing up in main.I have made the changes in product listings and layout settings. I still do not get the sub catagories listed in main when navigating.

    http://www.tblaptops.com/zen-cart/index.php?main_page=index&cPath=27

    Zen Cart 1.3.7
    Database Patch Level: 1.3.7

    I am using a template called freetemplate2 downloaded from http://www.zenflavor.com/free-zen-cart-template-2-wide.html

    This template is exactley what I am looking for with this one eception.
    Please help
    I also reset the banner control. This did not help.
    Please Help

  20. admin on March 10th, 2009 10:47 am

    This is how Zen Cart behaves.

    Head over to Zen Cart official forum, you may find advice or modules that may help you.

  21. Mark B. Daly on March 11th, 2009 10:56 pm

    Everything points to a problem with this template???
    Can I get some guidance as to where to look and what the code should look like that would show sub catagories on main when navigating

    http://www.tblaptops.com/zen-cart/index.php?main_page=index&cPath=27

    Zen Cart 1.3.7
    Database Patch Level: 1.3.7

    I am using a template called freetemplate2 downloaded from http://www.zenflavor.com/free-zen-cart-template-2-wide.html

  22. Dee on March 15th, 2009 2:43 pm

    Hello —

    Great template and instructions! But try as I may, I can’t see where I am able to get rid of the ‘Zen Cart – The Art of E-commerce’ that comes up on web tabs — where can I edit this to put in the name of my site as well as the meta tags? — Thanks very much!

  23. admin on March 15th, 2009 6:12 pm

    Mark,

    Sorry, I assumed that you were talking about the subcats list on the sidebox. If you mean the sub cats thumbnail images in the centre column >>

    Just delete the tpl_index_categories.php file from \includes\templates\CUSTOM_TEMPLATE\templates\

    (the thumbnail images display has been removed bcos I have many clients asking me to do it.. so I included in my templates. Anyway, if you want to show thumbnail images of all your subcats in the main/centre column, just follow the instruction above)

    PS:
    Yes, I do tend to remove some things on my templates that I think are not necessary and requested many times by my clients .. sorry.

  24. admin on March 15th, 2009 6:16 pm

    Dee,

    \includes\languages\english\CUSTOM_TEMPLATE\meta_tags.php

    Create the folder and pls change CUSTOM_TEMPLATE to your custom template’s folder name. Copy the original meta_tags.php file from (do not edit this original file):

    \includes\languages\english\meta_tags.php

  25. Dee on March 16th, 2009 2:59 pm

    Thanks very much! I was able to change it!

  26. Tina K on March 17th, 2009 3:36 am

    Where/How can I change the font color for the subcategory links in the category sidebox?

  27. admin on March 17th, 2009 11:54 am

    It’s in the stylesheet.css file … look for lines containing .leftBoxContainer a:link etc

  28. Tina K on March 17th, 2009 12:13 pm

    Thanks ~ That changes the font colors for catergory AND subcategory. I am wanting the category name to show pink and hover white, and the subcategory name to show white and hover pink.

    I appreciate your help! ;0)

  29. Beginner’s Guide to E-Commerce Solution | Showcases | instantShift on April 14th, 2009 3:25 am

    [...] Features Live Demo Download [...]

  30. Steve on April 18th, 2009 12:06 am

    Great template. I guess it is too late to edit current postings. But, as a suggestion for us newbies, could you please include the CSS “Line” number(s) so we could easily find the CSS lines/codes you are referring to in your directions.

    Thank you.

  31. admin on April 18th, 2009 12:45 am

    Thanks for the suggestion. Will try to remember that :)

    I’ve a recommendation to help you guys make things easy. Install Firefox and then install the add-on called Web Developer >> https://addons.mozilla.org/en-US/firefox/addon/60

    Activate the “View Style Information” or Ctrl+Shift+Y .. then you can just click anywhere on a web page to see the CSS code (and line number)

  32. Steve on April 20th, 2009 7:17 am

    Thanks again for all your help. Can you help me with a link or instructions on how to edit the format of when a product/item is displayed? I would like the product photo(s) to be centered and I would like to remove the Left-wrap-justify so that the desctiption tezt is listed BELOW the photos (and not to its right side). Also, how can i edit the format/placement of the “Add To Cart”, “Write a review” and “tell A friend” buttons so that they are more neatly indented towards the middle?

    How can I move the “Price” to the bottom after the description so it is right next to “Add to Cart?

    If there is any CSS or PHP changes involved then, if you can, please include line numbers to make this newbies life easier :-)

    Thanks again.

  33. admin on April 20th, 2009 10:56 am

    Hi Steve,

    The changes that you require are mainly in the tpl_product_info_display.php file (which is not included in all my templates… that means the prod desc. layout follows the default Zen Cart style)

    Copy the original file from:
    \includes\templates\template_default\templates\

    Paste to:
    \includes\templates\freetemplate2\templates\

    (this will override the original file.. and if you mess it up, you can copy from the original folder again)

    Modify/experiment as needed. This is too much to be explained here though.

    Since it’s Zen Cart’s default/original file, you can learn more from the official forum.

    As for the CSS, you can see my comment above about installing Firefox and Web Developer add-0n .. it’s and excellent tool.

  34. Steve on April 20th, 2009 1:59 pm

    Thanks for the response. I took a look at tpl_product_info_display.php on my editor just to see what I was going up against and, quite honestly, I could not make sense of any code. I am accustomed to HTML and even CSS makes logical sense in its structure and language. But this PHP file had no words or lines which seemed to indicate any control over the product image, it’s placement (Centered, top justify absolute) or how any of the text, attributes and button elements lay out on the live page.

    I did not touch it. Was I looking at the right file? if i was, then this may be way beyond my tinkering. So, do you know of any other downloads that deal precisely with this issue? Any files out there that would format the product title and image centered and on the top, followed by the text below it, attributes and the price next to the Add to Cart button and all the other buttons neatly arranged below it?

    Thanks again.

  35. admin on April 20th, 2009 2:20 pm

    Yup, that’s the correct file… well, that’s how PHP files look like :)

    I don’t think there is any individual file out there that specifically deals with your requirements. Also, most free templates won’t touch this file, as different users may want the elements in different positions.

    If you need to move things around, you’ll need to tinker with the PHP files (and use CSS for the styling).

  36. Steve on April 20th, 2009 2:29 pm

    Hm … When you say “use CSS for the Styling” are you saying that there is a CSS page (if not the main stylesheet) where I can edit the format and/or layout of the elements? So, by “styling” what level of control or adjustment can one make without PHP changes? If I could just Center the main image and have the product description moved below it then I would be content with that one change.

    Thank you

  37. admin on April 20th, 2009 2:33 pm

    Yes, it’s the main CSS… stylesheet.css

    CSS can be used to change things like color/font/background etc.

  38. Steve on April 20th, 2009 2:52 pm

    oic … Well. can you recommend any innexpensive programmers that can just make the changes I would like … I am assuming the changes I am requesting would not take too much time for a person with experience. Also, please give me a time estimate so that I know whomever I find is not trying to rip me off on time :-)

    Thank you

  39. admin on April 20th, 2009 3:10 pm

    You can try to ask about it in the Zen Cart official forum. Or try some of the freelance coding sites.

    Probably won’t take too long for experienced coders (maybe around 1 hour… not definite about this tho, as it depends on the programmer)

  40. Hugo on April 21st, 2009 10:14 am

    Your templates and Slimbox are incredible. Simple and elegant designs. I am just testing and starting my site (truly in its infancy) and I have some questions.

    1. I was using your template (wide) and Slimbox and all was working great. The main image, when clicked, popped up quickly as a lightbox should. But, when I installed Image Handler 2, the Slimbox stopped workin (the “hourglass” just keeps gpoing but the image never comes up). Before Image Handler 2, the lightbox worked very fluidly and quickly. Alsom the “additional images” by Image handler 2 are not activated with Slimbox? Why did this happen and how could it be fixed? Here is the link to my one test product for review — http://hugocruzgallery.com/shop/index.php?main_page=product_info&cPath=1_2&products_id=1

    2. How can I edit font colors for the product description page and for the whole site in general? Also, how could I edit the font size for the title and other elements on the site?

    Thank you

  41. admin on April 21st, 2009 11:16 am

    Hi Hugo,

    1. Pls remove lightbox by deleting the 4 files that you downloaded here. Then make sure Image Handler 2 is working and then try to install lightbox again.

    Btw, when I hover the mouse on the medium image on prod info page, and copy the address of the LARGE image, then paste to browser, it shows page error:
    http://hugocruzgallery.com/shop/images/large/metal_art/Bowing_Matrix_1000px_01_LRG.jpg

    2. As for editing the styles, it’s this file:
    \includes\templates\freetemplate2\css\stylesheet.css

    Pls see my comment regarding Firefox and Web Developer add-on above >> April 18th, 2009 12:45 am

  42. Hugo on April 22nd, 2009 2:14 am

    Thanks again for giving us non-programmers the chance to have such beautiful sites with your help.

    I have a few questions (refer to http://hugocruzgallery.com/shop/index.php?main_page=products_all )

    1. I could not find any reference on Firefox/firebug for the “ALL PRODUCTS” page. As you can see, I set my background to black. As far as I could find, no other page is affected by this change except for this one. How can i change the background of the ALL PRODUCTS listings to BLACK?

    2. For #navColumnOne, #navColumnTwo,it seemes like the formatting commands are in Line 488 and 717. I experimented many times but could bever find the right change or command to LEFT Justify the elements on #navColumnOne and RIGHT justify the elements on #navColumnTwo (so that they are flush with both sides. How can this be done?

    3. Where do i adjust the UPPER padding so that EVERYTHING below the upper grey line (currently only has METAL ART and INFRARED PHOTOGRAPHY centered inside of it) is shifted down … Giving it as much padding as I see fit? Also, just curious, what is this grey line called? EZ links?

    4. Within the “EZ LINKS” how can I add more separation between the links or add a “•” separator inbetween?

    Thank you

  43. admin on April 22nd, 2009 11:18 am

    Hi Hugo,

    1. I think you’re talking about .productListing-Odd and .productListing-Even

    (These are the classes to change the bg color of the odd and even rows for pages that lists products.. not just All Products)

    2. The centered contents are specified by .centeredContent … other contents in the sideboxes are NOT specified.. so they are left-aligned (which is the default way). Maybe you can add text-align: left; / text-align: right; to .leftboxcontainer and .rightboxcontainer … but this will look funny tho.

    If you want to go all the way, then also delete .centeredContent from line 1038

    3. This is the categories tab menu which can be switched off from:
    Admin > Config. > Layout settings > Categories-Tabs Menu ON/OFF > 0

    Or if you want to edit the CSS, you can easily see the elements with firebug right? #navCatTabsWrapper, #navCatTabs etc.

    4. The separator and spacing for the top ez-pages menu links is here:
    Admin > Config. > Ez-Pages Settings > EZ-Pages Header Link Separator
    Example (if you want some spaces and a centred dot):
      ·  

  44. Hugo on April 22nd, 2009 3:25 pm

    1. Yes, thank you! Your reply solved it :-) . For those interested, these can be found in stylesheet.css around line 1028 ( I only say “around” because I added several lines to my CSS stylesheet, so your actual line numbers for the code may be different). The code will look like:

    .productListing-even {
    background-color:#000000;
    }
    .productListing-odd {
    background-color:#000000;

    2. Sorry. i don;t thin I described my question well. Although, not being familiar with the jargon of the web savvy, I am not surprised :-) . I came across an answer (hopefully) to my question/need. I was able to adjust Column ONE and TWO so they are both justified with all the top banner lines. For anyone else, these can be found in stylesheet.css around line 810. The code will look like:

    #navColumnOneWrapper {
    margin-left:0px;
    margin-top:5px;
    background-color: #fff;
    }
    #navColumnTwoWrapper {
    margin-right:0px;

    As you can see, i switched the margin left and right to 0px so that both columns are aligned with the banner/headers/footer graphic lines. I also added 5px of padding just because I prefer to see negative space (less busy).

    3. Thank you.

    4. Sorry, before your reply i assumed they were called “EZ links”. But now I know what I was referring to are the “Category Tabs Menu”. How can I add more space(s) or a dot between the text categories in the Category tabs menu?

    5. New question. When someone views “ALL PRODUCTS” on my page, why does the truncated title text start with “Untitled ….”? I thought my items WERE titled (i.e. “Bowing Matrix”). What makes it say “Untitled” and how can I change or edit this?

    6. NEW QUESTION: Referring to the shopping cart page (when an item is added). Where can i change the background setting from WHITE to BLACK. As far as i could tell from Firebug, it should be around LINE 593 and I changed the background color to #283c68 for the cart #cartSubTotal. But where or how can I change the background color for what I assume is the cartTableHeading from white to black? When I try to hover over it with Firebug it only catches the “.cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay” elements (Line 606) but it cannot select the background — Thus, i have no idea where this element is. I hope you can help.

    Thank you.

  45. admin on April 22nd, 2009 5:25 pm

    4. This has to be done within the PHP file. See http://www.zen-cart.com/forum/showthread.php?p=708905

    5. This is not defined/controlled by the template. The default Zen Cart installation does not display this text. Could be some settings in admin that you made?

    6. Try .rowEven and .rowOdd (around line 1086 stylesheet.css)

  46. Hugo on April 23rd, 2009 3:53 am

    4. Thank you. I will experiment with this.

    5. Hm, I guess I’ll have to backtrack and find out what went worong & how to change this.

    6. Thank you! Worked perfectly! :-)

  47. Hugo on April 23rd, 2009 8:58 am

    How do I center the logo/banner? I tried editing the following code around LINE 197:

    #headerpic {
    position: relative;
    background: url(“../images/hd.jpg”);
    background-repeat: no-repeat;
    height: 175px;
    width: 850px;

    I changed position to “center” but nothing happened. i also changed the width to 100% with Center and nothing happened. I returned it to what it is above. What can i add/change to center the hd.jpg banner?

    Thank you

  48. admin on April 23rd, 2009 11:11 am

    try this:

    #headerpic {
    position: relative;
    background: url(“../images/hd.jpg”);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    height: 175px;
    width: 100%;
    }

  49. RyanZEN on April 26th, 2009 11:17 am

    This template is by far the best one I have come across, I say better that most templates.

    Rather than having a category list on the menu header, how can you replace that with your own set of menu? hope this is not too much.

  50. admin on April 26th, 2009 12:08 pm

    You can disable the top categories tab menu at:
    Admin > Configuration > Layout Settings > Categories-Tabs Menu ON/OFF > 0

    The code for this tabs menu is located in this file:
    \includes\templates\freetemplate2\common\tpl_header.php

    If you want to add your own menu, then you need to hard code (html) in this file.. between bof-optional categories tabs navigation display and eof-optional categories tabs navigation display (abt line 127)

    Add your own DIV and html content… and you can also use the stylesheet.css file to add your own css elements to style your new menu.

  51. RyanZEN on April 28th, 2009 9:48 pm

    Thanks, I ended up disabling Categories menu tab and used EZ-Pages to add what I wanted on the menu. Its easier that way. My web skills goes as far as the first half of your instruction ^ lol

  52. Webdesignchennai’s Blog on April 30th, 2009 1:23 am

    [...] Free Zen Cart Template 2 – Wide [...]

  53. template zencart gratis | panduantokoonline.com on May 12th, 2010 2:04 pm

    [...] Wide [...]

  54. 40+ Free Ecommerce Websites Templates | Le blog pixellogo.fr | Graphic Design, Logo Reviews, Tips & Tutorials on November 12th, 2010 11:24 pm

    [...] 31. Black and Blue Free Zen Cart Template [...]


Zen Cart Templates

Premium 1 Series ($19~22)

Premium 2 Series ($23)

Premium 3 Series ($25)

Premium 4 Series ($25)

Premium 5 Series ($26)

Premium 6 Series ($26)

Premium 7 Series ($28)

Premium 8 Series ($37)

Premium 9 Series ($33)

7 Days A Week E-mail Support