Join over 55,891 Subscribers Today! FREE UPDATES!
Get The Only Freelancer crash course you will ever need to read!
This article is the continued part 2 version of Getting Started with ZenCart. In part 1 we learned about ZenCart, and it’s basic files and getting started with the “Bare Bones” template. We also learned a little about the admin screen provided by ZenCart. In this part 2 version I will go more in depth about using and customizing ZenCart OpenSource Shopping Cart.
First we will go back to our files that we downloaded in part one. Within the header.php file we can see the following code:
// added defines for header alt and text define('HEADER_ALT_TEXT', 'Powered by Zen Cart :: The Art of E-Commerce'); define('HEADER_SALES_TEXT', 'TagLine Here'); define('HEADER_LOGO_WIDTH', '192px'); define('HEADER_LOGO_HEIGHT', '64px'); define('HEADER_LOGO_IMAGE', 'logo.gif');
You will notice that the logo width, and height is defined in this area, but we will also need to modify our template .CSS file to make it match to what we add here. This will tell the template what dimensions we want, and the css file will give the matched output. Changing one or the other and not both can sometimes output errors.
The logo image itself is located in the template directory under the “images” folder. The filename can be changed if you want, but again must be defined in the header.php file.
You will be using this option in your admin panel to add and remove or modify products to your store. Though it is pretty straight forward I have still had many clients ask me to help them with it. It seems like if I explain it to someone, then they understand it and can do it themselves, so instead of assuming we can do this part – I will give a detailed explination. Be sure to make a note that even under the catalog menu, when items are added or modified – you will always have extra options that appear beside or below each item. I see many people a lot of times miss these extra options, then later wonder where to change something at. Please be sure to take a few minutes to look around on each screen to see what options are available to you.
Here is a list of each of the options available under the Catalog menu:
1. Categories / Products
This is the main part where you can add new categories to your store, and add/change/remove products that you have available for sale. Again, please check all the options available to you when you are under these sub-screens.
2. Product Types
This section will allow you to select a generic type of product you are listing – Either general, music, or digital download. This section by default is ok to leave alone unless you want to specify products into sub-areas.
3. Products Price Manager
This will be the area you modify prices in your store. You will add the prices when you add a product, but if you wish to modify any of that data later on, then you will need to visit this area to change it.
4. Option Name and Option Value Manager
For changing data that has been input already when adding items.
This is where users will be leaving reviews and you will be able to moderate it. Check it often and be sure to approve comments and feedback being left by your visitors.
This is the section you will need to visit to add special discount deals to your website. It will display as showing the old price, then the new price highlighted in red to show it is a “special” or on sale item. You can set the variables for these items as well as moderate and edit them under this screen.
7. Featured Products
This is the area to add items that you want to be “featured” – If you choose the box under box layout that displays featured items either on your page, or your sidebar, then you can set the specifics for these items under this section. This is a good way to show items you want to sell either on your sidebar or main page. This can also be set to randomly show items each time the page is refreshed.
Make your own sale, and choose how to run it. If you want to make everything 10% off or make it 50% off and last for 3 days then this is the section you need to visit. You can also specify categories and other variables within this page to specifically suit your needs.
9. Products Expected
This will show the items dates that are out of stock and expected back in. These variables can be set from a few different screens and modified under this section. If you are out of inventory on an item and want to change the status to show back in inventory then you will use this screen.
Many modules are available for ZenCart. Most of these can be found directly on the ZenCart website. Modules range from PayPal payment addons, to extra sidebar modules. Each of these serves a great purpose and can help out when customizing a ZenCart install. I have found a few modules that I usually install with each website I create with ZenCart. You can browse through the repository of modules by following the link [HERE]
Here are a few of my favorites:
This is located in the admin panel of your ZenCart install. You can get to it by going to “tools” then selecting “Define Pages Editor” – This allows you to select a page and edit it within your ZenCart admin panel. This makes it easy to modify some of your other pages on your website. From here you can add information to your home page, or modify your terms and conditions or even your contact page.
These are all self-explanitory, and when edited through your admin panel will show the changed results on your website. You can also choose to edit via text editor or HTML within your admin panel.
This is also in the admin panel under the “tools” menu option. This is an easy way to create new pages for your website. This option panel will also allow you to select where on your website the pages are located, and where the link to them is displayed. You can use this to create a bio page for your website, or even a different about page to give additional information about your company or website. EZ-Pages makes it very simple to add more to your website without having to code more template files. You can also edit the pages you have already created from here by selecting the “edit” button on the right side of the screen after selecting a page.
For those of you looking to create a ZenCart Template or Theme from scratch – Here is the basic file structure that will need to be followed. You can either copy the default them and modify it from there, or even use the before-mentioned theme “Bare Bones” to create one as well. Most theme templates work the same as basic HTML and CSS – so with good knowledge of both of these you can easily create your own template.
includes/languages/YOUR_TEMPLATE/english.php includes/languages/english/YOUR_TEMPLATE/index.php includes/languages/english/YOUR_TEMPLATE/header.php includes/templates/YOUR_TEMPLATE/template_info.php includes/templates/YOUR_TEMPLATE/common/tpl_header.php includes/templates/YOUR_TEMPLATE/common/tpl_footer.php includes/templates/YOUR_TEMPLATE/images/logo.gif includes/templates/YOUR_TEMPLATE/css/stylesheet.css
Make sure when personalizing a template and creating one, you use the template_info.php file within your theme to tell ZenCart the information it will need for your files. Here is a quick look at the information:
<?php /** * Template Information File * * @package templateSystem * @copyright Copyright 2003-2005 Zen Cart Development Team * @copyright Portions Copyright 2003 osCommerce * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0 * @version $Id: template_info.php 2306 2005-11-05 21:34:28Z wilt $ */ $template_name = 'Bare Bones'; $template_version = 'Version 1.0'; $template_author = 'Rowan Wigginton'; $template_description = 'Completely white with gray outlines.'; $template_screenshot = 'barebones_screenshot.png'; ?>
The above example shows the name of the template (Which will also be displayed within your admin panel when selecting a template to use) As well as the version number, author, description, and a link to the screenshot. Creating your own template will require a file like the above example to ensure your information is properly processed to work as a template for ZenCart.
I hope everyone has enjoyed this two part article on starting with ZenCart. If there are any questions or requests then feel free to comment below and I will try to help out as much as possible. I have found ZenCart to be VERY powerful and a great opensource shopping cart platform to use on a variety of websites. Thank you for reading!
Get The Only Freelancer crash course you will ever need to read!
My name is Kevin. I am a 30 year old freelance web designer. I have been working with HTML, CSS, and PHP for 6+ years - And creating websites using Wordpress for 3 years. I enjoy creating websites and also doing some graphic design using Photoshop and Illustrator. I hope everyone enjoys reading my articles and I look forward to your questions, comments, and feedback.
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!