Free Zen Cart Template 1

November 4, 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!

This is the first contribution to the Zen Cart user community – a free Zen Cart template. It’s called Free Template 1 (creative huh?).

This template has a couple of differences from most other free Zen Cart templates – The language and currency switchers are on the header, and, on the front page a ‘Details’ button is displayed under each product thumbnail.

Overall, it looks OK, except for the top header image (as it’s a stock image and I did not design a custom header image as it won’t be suitable for all online stores) – you can change to your own design to make the template look even better.

Screenshot - Free Zen cart template 1

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

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

  1. Extract to appropriate locations (there are two ‘freetemplate1′ folders)
    \includes\modules\freetemplate1
    \includes\templates\freetemplate1
  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. IMPORTANT: Set the top menu separator to blank (as this template uses its own graphical menu separator).
    Admin > Configuration > EZ-Pages Header Link Separator > “blank”
  5. Set the column width:
    Admin > Layout Settings > Column Width – Left Boxes (set to 210 pixels or whatever you like)
    Admin > Layout Settings > Column Width – Right Boxes (set to 200 pixels or whatever you like)

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

Download Free Template 1 – Zen Cart 1.3.9
Download Free Template 1 – Zen Cart 1.3.8

Some notes:
The search box on the header has been removed – you can use the search sidebox instead.  Also, the top menu bar uses a graphical separator  instead of the original text separator, you need to set the text separator to blank (see step 4 above).

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

Bookmark and Share

Comments

60 Responses to “Free Zen Cart Template 1”

  1. Rahim Murad on December 9th, 2008 7:37 pm

    Hi Vin,

    Thanks for your great work and ideas on the 1st zen cart templates which i have download and used it for my ecoomerce website. As i installed on my zen cart admin, everything goes well but i discovered there is a missing text on the top header as according to your interface on the top header there will be HOME, ABOUT US, MY ACCOUNT, NEW PRODUCT and CONTACT US. Pls browse my website and advise me on this as i might missing some file.

    Thank You

    Rahim Murad
    Malaysia

  2. admin on December 9th, 2008 8:11 pm

    Those links are not missing.. it’s just that you haven’t added them yet :) … it can be totally different from my screenshot.

    The menu is for EZ-Pages… you can create EZ-Pages (any content page you like) to be shown on the menu or you can use the menu to link to any page on your site.

    Go to Admin > Tools > EZ-Pages … add a page, set it to be shown on the header menu (or just set a link to any page on your site)

  3. T_man on December 27th, 2008 11:35 pm

    How do youremove the your slogan goes here at the top of the header on the left hand side I dont need it… whats the easiest way? thanks !

  4. admin on December 28th, 2008 12:05 am

    Just delete the lines in tpl_header.php file:

    \includes\templates\freetemplate1\common\tpl_header.php

    The lines to be deleted are:

    My Online Store

    Slogan or tagline here – change in tpl_header.php

  5. T_man on December 28th, 2008 12:37 am

    I cannt find the text wht line is it on ? Thanks

  6. T_man on December 28th, 2008 12:40 am

    Oh ok I found it thanks for the help! I was looking in the wrong folder lol! Thanks alot!

  7. T_man on December 28th, 2008 12:59 am

    OK how do I change the color of the side coloms I want to change from gray to blue…where would I go to do that?

  8. admin on December 28th, 2008 1:16 am

    Everything regarding styling is in stylesheet.css file. You need to be familiar with CSS so that you can make all the necessary changes.

    For example, look for:

    #navColumnOne, #navColumnTwo
    {
    background-color: #f1f1f1;
    padding-top: 15px;
    padding-left: 20px;
    }

    Change the color code.

    Most things about setting up and modifying Zen Cart template are available at http://www.zen-cart.com/forum/index.php

  9. Michelle on January 1st, 2009 7:04 pm

    Thanks for an awesome template! We’re still busy with some background setup but will have a very good-looking shop up and running on it soon.

  10. OA on January 8th, 2009 12:37 am

    Thanks for a great template. I am a professional web designer and a client of mine had already chosen your template for their site and charged me with the task of slightly modifying it. Your work is top class and I wanted to showcase the site for others to learn what may be achieved with the template.

    I added an AJAX menu plug in which you will see on the left side of the menu. I also tweaked the style sheets here and there and added a custom header graphic. The outcome looks great and shows how versatile this template is.

    Overall a great template and I thank you for your contribution!

  11. admin on January 8th, 2009 1:14 am

    You’re welcome

  12. jason on January 11th, 2009 12:49 am

    I am having trouble with the categories showing up in the main page section. When I click on a category it doesnt show the information in the main section.

  13. admin on January 11th, 2009 1:59 am

    Everytime you change a template you need to also reset the sideboxes:

    tools > layout boxes controller > click the ‘Reset’ button

    As for the category at the top, it can be turned on/off:

    configuration > layout settings > Categories-Tabs Menu ON/OFF

    This is the admin settings, independent of templates … see http://tutorials.zen-cart.com for settings of your Zen Cart.

  14. jason on January 11th, 2009 7:30 am

    The sub categories are not showing up. Under Layout setting, Categories – Always Open to Show Sub Categories it is set to 1. I have tried everything.

  15. admin on January 11th, 2009 10:04 am

    This is related to Zen Cart’s functionality and feature. You can find this is all other issues discussed at the official Zen Cart forum >> http://www.zen-cart.com/forum/index.php

    There might be a third party add-on to provide this feature.

  16. Ken on January 28th, 2009 8:27 pm

    Hi, do you have a phpbb template that i can use to go inline with your free template1 on Zen…great work and many thanks..

    Cheers..

  17. Ken on January 28th, 2009 8:28 pm

    Oh and is there a method of making the main page wider, its very small, and Im very new to Zen Cart lol

  18. admin on January 28th, 2009 9:07 pm

    You can set the width of the template in the CSS file (and all other styling like color, font etc).. you’d need to make your banner picture wider too.

    Sorry, I don’t have any template for phpBB.

  19. Ken on January 28th, 2009 9:24 pm

    Do you have an example where I can widen the main page, I have no clue on CSS

  20. admin on January 28th, 2009 9:40 pm

    Open the stylesheet.css file and change all occurrences of 850px to any width of your choice .. eg. 950px or 1000px etc.

  21. Ken on January 28th, 2009 9:42 pm

    Legendary thanks, may be in touch for some bespoke work if you are interested, you can mail me direct if you need to know more..

    Ken

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

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

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

    To Jason,

    Sorry, I assume 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\

  24. kyli on March 26th, 2009 5:39 pm

    hi,

    thanks for the template it’s really cool..
    i still have a question.. you decresed the widht of the shop which is great (nicef effect) ..what im trying to do now is change the design of the background.. basically add a image on the left and on the right (like a border) but can’t figure out how..

    thanks for the reply

  25. admin on March 26th, 2009 5:50 pm

    That’ll really be a big job.. you’ll need to learn CSS.

    Or if you want to add tiling image to the whole background.. just edit the stylesheet.css file:
    \includes\templates\freetemplate1\css\stylesheet.css

    Add:
    background-image: url(“../images/yourimage.jpg”);

    inside body {} .. line 11

    Upload your image to:
    \includes\templates\freetemplate1\images

  26. cecibo on March 29th, 2009 3:41 am

    can i make his template autostretch and how can i make it???

  27. admin on March 30th, 2009 6:36 pm

    The template is specifically designed to be fixed width. But you can experiment by changing the width to 100% in the stylesheet.css file.

    \includes\templates\TEMPLATE_NAME\css\stylesheet.css

    Change all occurrences of 850px to 100%.

  28. Tom on April 5th, 2009 6:02 pm

    Hi first awesome looooking template thanks.
    Second, how do you creat a left menu like the one on the zen cart classic green? With shipping info ect ect. Thanks.

  29. admin on April 5th, 2009 6:53 pm

    Everytime you install a new template, you need to reset the boxes, else the side columns won’t appear

    Admin > Tools > Layout Boxes Controller .. click the “reset” button in the middle

  30. Brian on April 8th, 2009 12:28 am

    Just curious as to where I can edit the colors of the top bar from black to a matching red and bottom bar below the banner to red also. I assumed it was in the stylesheet but not sure

  31. admin on April 8th, 2009 11:26 am

    Yes, in the stylesheet.css file.

  32. red on April 8th, 2009 11:10 pm

    Hi, Great template! I wanted to get rid of the \details\ button under the products image. How and where do I go to disable/remove/delete just the button?

  33. admin on April 8th, 2009 11:16 pm

    \includes\modules\freetemplate1\

    delete all the 3 files in the folder (or just delete the “freetemplate1″ folder)

  34. red on April 8th, 2009 11:51 pm

    splendid! thank you so much!

  35. Ken on April 10th, 2009 6:20 am

    Thank you for the template
    How to remove the language & currency from the top bar?

  36. admin on April 10th, 2009 10:42 am

    \includes\templates\freetemplate1\common\tpl_header.php

    There is a DIV (id=navCurrenciesWrapper) … remove the block

  37. Steve on April 18th, 2009 12:43 am

    Fantastic template! Where can I change the background “white” color to a darker tone? Please include line #s because I am a newbie and it will make it easier for me to find the code line(s). Also, where could I change the color for the left column menu box?

    Assuming I change the colors too dark … How can I modify all the text/font colors to better suit the new darker backgrounds?

    Thank you.

  38. admin on April 18th, 2009 12:53 am

    The templates are designed to be simple to edit.. with only minimal PHP file changes and only one CSS file

    \includes\templates\freetemplate1\css\stylesheet.css

    To make your job easier to locate the CSS code, 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)

  39. Steve on April 18th, 2009 2:34 am

    WOW! Thanks. I never knew about that great little tool.

    Also, I love your template and may use it as the foundation for a future FINE ART portfolio / shopping site. But, have you or would you know of anyone else who has posted free or affordable templates which have a 100% relative width with top horizontal navigation bars/menus and no left/right columns (allowing for the whole width to be used to emphasize product pictures which is important for art/photography websites)?

    Thank you.

  40. admin on April 18th, 2009 10:48 am

    I’m not sure where it’s available from. Have not seen many 100% (fluid) width Zen Cart stores.

  41. Ken on April 19th, 2009 3:27 am

    The “products_id=” number is not showing on the “Details” gif – but only for Specials and Featured Products list, although the picture is linked correctly. Not sure if it’s a bug or something I did. Assistance appreciated.

  42. admin on April 19th, 2009 10:27 am

    Yes, my apologies. There is a bug. The Product ID for Featured and Specials is not linked correctly (for the image button).

    Fixed. Pls download again.

    IMPORTANT: For those who’ve already installed earlier, just update 2 files:

    \includes\modules\freetemplate1\specials_index.php
    \includes\modules\freetemplate1\featured_products.php

  43. Ken on April 19th, 2009 2:17 pm

    Awesome, you are the man!

  44. deanos on April 25th, 2009 12:09 am

    very nice style
    thanks

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

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

  46. parrfunkel on May 8th, 2009 1:57 am

    great template! thanks for all of your hard work.

    I’m in the process of modifying to match the design of my blog. Could you tell me how I can get rid of the gap (white space) between the header and the main content area?

    here is a link: http://www.scraporiginals.com/store

    thanks!

  47. admin on May 8th, 2009 11:00 am

    parrfunkel,

    \includes\templates\freetemplate1\common\tpl_header.php

    Remove the line break tag (line 180)

  48. Chris on May 16th, 2009 6:20 am

    Hi. Thanks for the theme. I have a favicon and don’t know how to place it. I put it in the main directory, which usually is all you need to do, but that didn’t work. Can you tell me what php I need to add/change/etc.? Thanks.
    Chris

  49. admin on May 16th, 2009 10:33 am

    Pls see Zen Cart forum (or see the official tutorials):

    https://www.zen-cart.com/forum/showthread.php?t=101571

  50. mary on May 30th, 2009 6:50 am

    Tried changing the colour but no effect on the site…What could be the problem?

    Everything regarding styling is in stylesheet.css file. You need to be familiar with CSS so that you can make all the necessary changes.

    For example, look for:

    #navColumnOne, #navColumnTwo
    {
    background-color: #f1f1f1;
    padding-top: 15px;
    padding-left: 20px;
    }

    Change the color code.

    Most things about setting up and modifying Zen Cart template are available at http://www.zen-cart.com/forum/index.php

  51. admin on May 30th, 2009 12:21 pm

    If you make a backup of the original stylesheet.css file in the same folder, do not name it as stylesheet.bak.css (do not end with .css)

  52. Mary on June 3rd, 2009 10:16 am

    It worked. Thanks so much!!! Love the template.

  53. Richard on June 29th, 2009 6:31 pm

    Hiya

    Thanks for the great website template you have provided. I am happy to provide a link on my website later, when I have completed it. Just having a problem. Please can you help?! FREETEMPLATE1 How do I center stuff in the center column (main_page) I would like to use all of the space up until the right and left columns. Everything is going left and not centering. Thanks

  54. Richard on June 29th, 2009 6:33 pm

    Where and under what file do I change it?

  55. admin on June 29th, 2009 6:36 pm

    The files are specials_index.php, featured_products.php, new_products.php

    Located at:
    \includes\modules\freetemplate1

    You can just delete the whole folder (you’ll then get the original default style, and without the “Details” buttons)… or you can try to edit those 3 files.

  56. Richard on June 29th, 2009 7:07 pm

    When I put new information into the define pages editor, main_page section.Example I tried embedding a film and it stayed on the left side. How do I center this information in the middle of the website,instead of it going left? What do I need to change, please?

  57. admin on June 29th, 2009 8:05 pm

    This is CSS/HTML and can’t be easily explained here.. you can google for “css centering” or similar phrases to see how to style your content.

    Whatever you enter in the “pages” editor is html/css stuff… you can click the button on the editor to view/edit the source.

    You should create a DIV and put your content inside, then try to style it.

  58. Richard on June 29th, 2009 8:37 pm

    Hiya

    Thanks for the help. You doing great work! Just final question if possible? How do I increase the size I can use in center column? Does padding or margins block me? If so where? Thanks again.

  59. admin on June 29th, 2009 8:45 pm

    You can decrease the size of the left column:
    Admin > Configuration > Layout Settings

    Or increase the width of the whole site. This you need to edit the CSS file and your banner image accordingly

    Open the stylesheet.css file and change all instances of 850px to the width you want.

  60. Premium Zen Cart Templates for Business Owner | FindMyHosts.com on March 2nd, 2010 6:38 pm

    [...] Download / Demo [...]


Zen Cart Templates

Premium 1 Series ($22~25)

Premium 2 Series ($26)

Premium 3 Series ($29)

Premium 4 Series ($28)

Premium 5 Series ($30)

Premium 6 Series ($30)

Premium 7 Series ($35)

Premium 8 Series ($40)

Premium 9 Series ($35)

7 Days A Week E-mail Support