Introduction What can be found in this package and what it can be used for
Thank you for purchasing Zen Cart template. This documentation consists of several parts and shows you the entire process how to set up and administer Zen Cart Web site from scratch. We did our best to make this manual as clear and easy to follow as possible.
What is Zen Cart?
Zen Cart is an Open Source e-commerce application. It is written in PHP and requires a MySQL database. Zen Cart provides easy customization of your online store. Zen Cart has a built-in system for receiving online payments, setting tax and discount rates, etc. Learn More
What is Zen Cart template
Zen Cart template is a skin for your Zen Cart platform. In other words you can easily change your Zen Cart Web site appearance by installing a new template in a few easy steps. With all its simplicity Zen Cart template is provided with all necessary source files and you are free to edit or extend it the way you need.
The template package you have downloaded consists of several folders. Let's see what each folder contains :
- Documentation - contains documentation files
- index_en.html - main documentation file
- theme### - contains Zen Cart theme files
- Screenshots - contains template screenshots. Not for production
- Sources - contains template source files
- psd - template Adobe Photoshop source files (.psd)
- images - product images, social icons, etc.
- ZENCART_AJAX_SEARCH.sql - provides extended search settings
- ZENCART_CUSTOM_BLOCK.sql - sets the extra editable content blocks
- ZENCART_FULL.sql - contains store & theme settings, sample banners, categories, products settings, megamenu, custom block, social icons on the product page, slider on homepage, etc.
- ZENCART_MEGAMENU.sql - sets the megamenu into your site
- ZENCART_SHORT.sql - contains only store and theme settings
- ZENCART_SLIDER.sql - slider on homepage
- ZENCART_SOCIAL.sql - set of social icons on the product page
- ZENCART_YOUTUBE.sql - display YouTube video on the product page
- fonts_info.txt - contains links where the template custom fonts can be downloaded
- info.txt - contains instructions on how to extract source files
Prepare What do you need to make this work
Before you proceed to setting up your Zen Cart Web site, please make sure you are fully prepared. Please complete the following preparation steps:
To feel comfortable working with Zen Cart template, we recommend downloading all applications required. You can see the list of required software on the template preview page.
The requirements may vary for different templates so we'll tell you here what is needed in general:
- First, you need the right applications to extract the password protected sources_#########.zip archive. WinZip 9+ (Windows) and Stuffit Expander 10+ (Mac) is the required software.
- You may also need Adobe Photoshop application. It is used to edit .PSD source files and it is necessary if you want to edit template design graphics and images.
- To edit template source code files, you need some code editor like Sublime Text, Adobe Dreamweaver (code mode only), Notepad++, etc.
- To upload files to the hosting server, you may need an FTP Manager like Total Commander, FileZilla, CuteFTP, etc.
As Zen Cart is a PHP/MySQL based application, you need to prepare a hosting environment to run Zen Cart.
If you have a live hosting, please make sure it matches Zen Cart software requirements and it is ready to be used for Zen Cart websites.
Otherwise you can run Zen Cart locally on your computer using the local server. To create a local hosting server, please use the localhost applications as WAMP, AppServ, MAMP, etc. Any of those can be easily installed as any other program and used to run Zen Cart.
Please check the tutorials below on how to configure local development environment:
Zen Cart engine installation
To install Zen Cart you need to download the Zen Cart engine package from the official website at www.zen-cart.com. Just click a 'Download' button in the right box.
2. Extracting Files
Once the Zen Cart engine package is downloaded, you will need to extract its files and folders from the archive.
This can be done with the required software like WinZip 9+ (Windows) and Stuffit Expander 10+ (Mac).
3. Uploading Zen Cart engine files
In case you’ve extracted the files locally on your computer, you will need to upload them to your hosting server.
This can be done using the hosting control panel File Manager or third party FTP Manager applications like FileZilla, TotalCommander, CureFTP, etc.
You can check the detailed video tutorial on how to upload files to server using FTP manager and how to upload files to a server using cPanel (WebHost Manager, WHM).
4. Zen Cart engine installation
When you are done with the files upload, you can start Zen Cart engine installation. Open your web browser and type in the domain name/path to your Zen Cart directory in the address bar and reload the current page. You should see the welcome screen. Please follow the instructions below to install Zen Cart.
Step 1: Installation Assistant
Click the “Click here to begin the installation” link.
Step 2: Installation Assistant (License agreements)
Please check the license agreement.
When you are done, click 'Continue' button.
Step 3: Installation Assistant (License Confirmation)
When you are done, select 'I have read and agree to abide by the Terms and Conditions as stated above' and click 'Continue' button.
Step 4: System Inspection
Make sure your hosting server matches the ZenCart engine requirements. Otherwise you’ll see the error message. Contact your hosting provider if the System Inspection screen shows any errors. If everything is OK, click Install button at the bottom of the screen.
If everything is correct, click the 'Install' button.
Step 5: Database Setup
At the Database setup step you need to input your database details. Note that you should have a new database created. Feel free to check the detailed tutorial on how to create a database.
You need to input the database host name, user name, password and database name. All these details can be obtained from your hosting control panel or by contacting your hosting provider.
When you are done, click 'Save Database Settings' button.
Step 6: System Setup
At the System Setup step you can define the root to your ZenCart installation and install SSL certificate. If you are not sure, please do not perform any changes at this step. Click the Save System Settings at the bottom of the screen to proceed.
When you are done, click 'Save System Settings' button.
Step 7: Store Setup
Store setup step lets you input the store info like store name, country and region. The Store demo at the bottom allows you to install the default ZenCart sample data – sample products that allow to test the store functionality. If you are using purchased ZenCart template, there is no need to install default demo store. The sample products are provided within the template package.
When you are done, click 'Save Store Settings' button.
Step 8: Administrator Account Setup
At the Administrator Account Setup step you need to create the store administrator account. Input Administrator user name, email and password. Keep these details safe to avoid unauthorized access.
When you are done, click 'Save Admin Settings' button.
Step 10: Setup - Finished
Congratulations. You’ve successfully installed ZenCart store. Use the buttons at the bottom of the screen to access the store frontend or the ZenCart administration panel.
Now you are ready to proceed to configuring your Zen Cart based Web site. Click 'Click here to go to the Store' button to view your Web site or 'Click here to open the Admin area' to view Zen Cart backend.
Please check the detailed video tutorial on how to install Zen Cart engine.
How to install a Zen Cart Template.
First, you need to download the purchased template onto your computer. The download link is available on your order details page.
When the template download is complete, you need to extract the files from the downloaded package. This can be done using the WinZip (Windows OS) or Stuffit Expander (MAC OS) applications. Don't forget to extract the files from the inner sources_XXXX.zip package. The sources archive is password protected and contains the template source files. The password can be obtained from the order details page.
1. Open the 'themeXXX' folder and upload the 'includes' folder to Zen Cart installation root on your server.
2. Then open Zen Cart store admin panel and go to 'Tools > Template Selection'.
3. In the right column click Edit button and in the appeared select box choose a new template (themeXXX).
How to install Zen Cart sample data
To make your template look like on the live demo, you need to install the template sample data. Sample data contains the website settings, sample products, modules, menus, images, etc. It is useful when you want to see the template functionality or the examples of the pages design and layout.
Zen Cart templates are provided with one main SQL file (ZENCART_FULL.sql) that contains all website sample content and sample website settings, and seven additional SQL files that can be installed on the existing store for your choice. The SQL files can be imported into your database using your database management tool (usually phpMyAdmin) or directly through Zen Cart admin panel: Tools > Install SQL Patches.
- ZENCART_FULL.sql – contains store and theme settings, sample banners, categories, products settings, megamenu, custom block, social icons on the product page, slider on homepage. Use it with clear Zen Cart installation.
- ZENCART_SHORT.sql – contains only store and theme settings. Installing short dump won't replace your store goods.
- ZENCART_AJAX_SEARCH.sql – provides extended search settings.
- ZENCART_CUSTOM_BLOCK.sql – sets the extra editable content blocks.
- ZENCART_MEGAMENU.sql – sets the megamenu into your site.
- ZENCART_SHORT.sql – contains only store and theme settings.
- ZENCART_SLIDER.sql – slider on homepage.
- ZENCART_SOCIAL.sql – set of social icons on the product page.
- ZENCART_YOUTUBE.sql – displays YouTube video on the product page.
You will get 2 options, either execute SQL query or upload .sql file. The result will be the same either option you choose.
Click on the 'Browse' button and navigate to 'sources' folder of the template package, select the .sql file and press the 'Upload' button to execute it.
Feel free to check the detailed tutorial on how to install Zen Cart template sample data
How to manage modules
To manage Left/Right boxes, open Zen Cart admin panel > Tools > Layout Boxes Controller.
You will see the list of available modules. Select one, then in the right panel click 'Edit' button.
When you use both left and right columns, you can change the following properties:
- Left/Right Column Status: ON=visible, OFF=hidden
- Location: LEFT or RIGHT position of the sidebox
- Left/Right Column Sort Order: sort order of sideboxes in the columns.
Note that Single Column settings do not currently affect the page display, and can generally be ignored.
How to change store logo
To use your own logo, simply overwrite 'logo.jpg'('logo.png') that is located in includes/templates/themeXXX/images/.
Upload a new image with the same title to the same folder on server, accepting the replacement.
You can create an image that is larger than the default one. If it doesn't match the header dimensions, you'll need to perform style modifications in the /includes/templates/themeXXX/css/stylesheet_tm.css file. You can locate the needed css rule with the help of developer tools.
How to change store colors
To change the site colors, you need to edit the CSS files in the /includes/templates/themeXXX/css/. You can learn more about working with the CSS files bychecking the detailed video tutorials.
Zen Cart Add-ons:
This feature allows to add frontend banners with slideshow effect.
You can navigate to Configuration > ZC Slideshow to configure the slider:
Slider provides several functions that can be changed manually:
- Slideshow Theme - Allows you to select one of four themes of your slider;
- Effect - Sets the transition options between slides;
- Slideshow Animation Speed - Slideshow transition speed in milliseconds;
- Slideshow Pause Time - How long each slide will show in milliseconds;
- Slideshow Navigation Arrows - Show Prev/Next navigation arrows;
- Slideshow Navigation Hide - Show Prev/Next navigation arrows only on hover;
- Slideshow Numbered Navigation - Show numbered navigation;
- Slideshow Pause on Hover - Stop animation while hovering;
- Slideshow Captions - Caption opacity (set it to 0 to make it invisible).
You can add all the required slider effects and select the group of banners that will show up in your slider.
With Custom block you can display additional content with images and text.
Custom block consists of three independent units which can be edited to meet your needs.
This module was added to the template to extend functionality of the default search. Ajax Search allows you to find the right content and immediately display it without reloading the page under the search field. The results are presented with images, so they look more attractive.
In order to add this Ajax-search to your website, it is enough to install ZENCART_AJAX_SEARCH.sql via Admin panel > Tools > Install SQL Patches. Additional settings are not required.
Extra Product Images
The new Zen-cart feature allows you to display the additional product images on the product page and open them in the lightbox. To make the extra images display on the product page, please put them into the folder with the product images.
- Open Zen Cart admin panel
- Go to Catalog > On the product editing screen scroll down and find the image file name and open the product you want to modify.
- On the product editing screen scroll down and find the image file name.
Create new product images with the names that contain the default product image file name.
Default product image name: 01.png
Additional product image names: 01_1.png, 01-2.png, etc.
Default product image name: my_product.jpg
Additional product image names: my_product_1.png, my_product-2.png, etc.
Upload the additional images to the directory where the default image is located. Usually the product images are stored in the 'images' directory of your Zen Cart installation.
When the upload is complete, open the product page in the browser and refresh it. You should see additional images at the bottom of the page.
The number of additional images is unlimited.
Conclusion where to get help, support and additional information
Zen Cart engine is a great solution for your online store. The default engine package contains all modules necessary for successful sales. Open source allows you to offer really outstanding merchant possibilities for your customers. Due to the quite complex engine structure advanced usage of Zen Cart will require much time and aspiration. You'll need much more than this manual.
Live Chat Olark
To get your data, you can register on Olark website and do all the required steps to get your code.
Then, open includes/templates/themeXXX/common/tpl_main_page.php file and insert the received code between the lines 'begin olark code' and 'end olark code' and save the file. To remove Live Chat Olark, simply delete this code from tpl_main_page.php file.
Loading data from Google servers
Some countries have issues connecting to Google servers. This can cause issues loading Google Fonts and Java Script libraries from Google CDN. To resolve these issues, please do the following:
Can't load Google Fonts:
- Open \includes\templates\themeXXX\common\html_header.php file
- Locate the line:
- Replace it with the following:
Can't load jQuery
- Locate the line:
- Replace with the following:
You can also use local copy of jQuery library.
Both HTML markup and CSS styles used in our templates are semantically correct and valid. However, some W3C errors still can take place. Making code 100% W3C valid eliminates the usage of modern website technologies as CSS3 features and HTML5 markup. Our goal is to deliver rich user experience with high quality templates and sometimes we have to break some rules.