 Live Demo |
 Support |
 Live Readme |
 Fan Gallery |
Donations are not required, but any size donation is greatly appreciated and accepted.
Click here to make a donation.
If you don't feel comfortable installing the template please feel free to contact me at info@picaflor-azul.com.
Features
A template packed with functionality- Super flexible design perfect for all types of ecommerce stores--the possibilites are endless!
- Fixed width 2 or 3 column display
- Matching button set included
- Matching icons
- Home Page slideshow included
- Tabbed home page centerbox content for New Products, Featured Products, and Specials
- Add This social bookmarking added to all product pages (includes Facebook like button, Twitter Tweet Button, Pinterest Pin it button, and 300+ Sharing Services)
- Custom footer featuring a footer menu with quick links, information, customer service, and useful links (ez pages), integrated, and optional links to your Facebook, Twitter, Youtube, Pinterest, Google Plus, and blog.
- Customized product info page layout
- Cross Browser tested using Firefox, IE9, IE8, IE7, Google Chrome, Opera, and Safari.
- W3C Valid XHTML and CSS
- Custom header including shopping cart totals (item count and dollar amount), checkout link, search, currencies with drop down menu, and languages.
- Comes with the following modules installed: Column Layout Grid, About Us Page, Footer Menu , Column Divider Pro, Designer Monthly Boxes
- No changes to core files
- Detailed HTML readme file with written instructions and screenshots, and links to videos for the installation and customization steps.
- Fully compatible with versions 1.3.8, 1.3.9x, 1.5x. Would probably work with lower versions although it has not been tested.
Support/Help
Free or personal support
The Complete Installation Guide
Pre-Installation: Backup Files & Database
Don't skip this!Watch an Easy Help Zen Cart Video Tutorial of this step HERE
1. Go to your host cpanel and select the backup wizard:
2. Click on Backup:
3. Click on Full Backup:
4. Click on Generate Backup:
Step 1: Unzip and Upload the Files:
Method 1: FTP with Filezilla
Watch an Easy Help Zen Cart Video Tutorial of step 1 - 4 HERE
1. Enter the address of the server, your username, password, and port if needed into the top of the Quickconnect bar.
2. Once you are connected navigate to the directory on your local machine where you unzipped the template package in the right side of window and navigate to your store root directory on your web host in the left side of the window .
3. Drag the includes directory and drop it in the folder above the includes folder.
Upload Method 2: CPanel File Manager
Zip up the includes folder and name it "includes.zip".
1. Select Legacy File Manager:
2. Select Web Root from the pop up window:
3. Click on Upload Files:
4. Click on Browse and choose upload.zip:
5. Click on Upload:
6. Click on upload.zip. In the Right hand top box, click on extract file contents:
Step 2: SQL Patch:
For the Column Layout Grid & About Us Page ModulesThe column layout grid module will give you a product listing page in columns rather than rows. The template pacakge comes with the files already installed. To complete the installation, you will need to patch your database.
Watch an Easy Help Zen Cart Video Tutorial about this step
In your Zen Cart admin go to Tools-> Install SQL Patches
Copy and paste the following into the box and click on the "Send" button
INSERT INTO configuration (configuration_title, configuration_key, configuration_value,
configuration_description, configuration_group_id, sort_order,
last_modified, date_added, use_function, set_function)
VALUES ('Product Listing - Layout Style', 'PRODUCT_LISTING_LAYOUT_STYLE', 'rows',
'Select the layout style:
Each product can be listed in its own row (rows option)
or products can be listed in multiple columns per row (columns option)', '8', '40', NULL,
now(), NULL, 'zen_cfg_select_option(array(\'rows\', \'columns\'),');
INSERT INTO configuration (configuration_title, configuration_key, configuration_value,
configuration_description, configuration_group_id, sort_order,
last_modified, date_added, use_function, set_function)
VALUES ('Product Listing - Columns Per Row', 'PRODUCT_LISTING_COLUMNS_PER_ROW', '3',
'Select the number of columns of products to show in each row in the product listing.
The default setting is 3.', '8', '41', NULL, now(), NULL, NULL);
INSERT INTO configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, last_modified, date_added, use_function, set_function)
VALUES ('Define About Us Status', 'DEFINE_ABOUT_US_STATUS', '1', 'Enable the Defined About Us Link/Text?
0= Link ON, Define Text OFF
1= Link ON, Define Text ON
2= Link OFF, Define Text ON
3= Link OFF, Define Text OFF', 25, 59, NOW(), NOW(), NULL, 'zen_cfg_select_option(array(''0'', ''1'', ''2'', ''3''),');
Now go to Configuration -> Product Listing
Click on "Product Listing - Layout Style", select "rows" and click on the "update" button.
Go to Configuration -> Define Page Status to define the About us page status.
Step 3: Select the Template:
Watch an Easy Help Zen Cart Video Tutorial about Steps 1-4 HERE
In your Zen Cart admin go to Tools -> Template Selection
Click on the "edit" button
Select the name of the template you just installed from the drop down menu
Click on the "update" button.
Step 4: Reset the Sideboxes:
Watch an Easy Help Zen Cart Video Tutorial about Steps 1 -4 HERE
In your Zen Cart admin go to Tools -> Layout Boxes Controller
Scroll down to the bottom of the screen and click the "reset" button.
Step 5: Turn on Header Boxes:
Currencies, Languages and SearchWatch an Easy Help Zen Cart Video Tutorial about this step HERE
In your zen cart admin go to Tools -> Layout Boxes Controller
Click on "sideboxes/your-template-override-directory/languages_header.php" and then click on the "edit" button
Set the "Single Column Status" to "ON", the "Single Column Sort Order" to something other than "0" , and click on the "update" button.
Follow the same procedure for turning on the curencies_header.php and search_header.php sideboxes.
Step 6: Admin Settings:
Make your site look just like the demo.Product Listing
**Please note that this template was designed to look best when the ezpages in header and category tabs in header are turned off**
In your Zen Cart admin go to Configuration -> Product Listing
Copy these values:
Layout Settings
In your Zen Cart admin go to Configuration -> Layout Settings
Copy these values:
EZ Pages Header Bar
To turn off EZ pages in the header, go to Configuration -> EZ-Pages Settings
Select "EZ-Pages Display Status - HeaderBar" and click on the "edit" button.
Click on the radio button for "0" and click on the "update" button.
Step 7: Add Your Logo:
Brand your siteWatch an Easy Help Zen Cart Video Tutorial about this step HERE
Create your logo in your image editing program and upload it to includes/templates/avonlee_contempo/images.
Open includes/languages/english/avonlee_contempo/header.php in a plain text editor. Find this code on or around line 24:
define('HEADER_ALT_TEXT', 'Avonlee Contempo :: Free Template by www.picaflor-azul.com');
define('HEADER_LOGO_WIDTH', '235px');
define('HEADER_LOGO_HEIGHT', '60px');
define('HEADER_LOGO_IMAGE', 'logo.png');
- Replace "Avonlee Contempo :: Free Template by www.picaflor-azul.com" with your site name and tag line here
- Replace "235px" with your logo width
- Replace "60px" with your logo height
- Replace "logo.png" with the name of your logo image
define('HEADER_ALT_TEXT', 'Your store name :: your store tag line');
define('HEADER_LOGO_WIDTH', 'height in px');
define('HEADER_LOGO_HEIGHT', 'width in px');
define('HEADER_LOGO_IMAGE', 'your logo name .png');
***This is a php file and MUST be edited in a plain text editor. If you try to edit this file in any type of wysiwyg editor, the code will be corrupted and when you insert the file back into your zen cart it will break your entire site.***
Step 8: Add Your Tag Line/Slogan:
Watch an Easy Help Zen Cart Video Tutorial of this step HERE.
In your favorite plain text editor, open the includes/languages/english/avonlee_contempo/header.php.
On or around line 25 find this code:
define('HEADER_SALES_TEXT', 'A Free Template by www.picaflor-azul.com.');
Change the text in green to your site tagline, or remove it for no tagline. Be sure to keep the single quotes intact.
define('HEADER_SALES_TEXT', 'Your site tagline goe here.');
Save the file.
***This is a php file and MUST be edited in a plain text editor. If you try to edit this file in any type of wysiwyg editor, the code will be corrupted and when you insert the file back into your zen cart it will break your entire site.***
Step 9: Home Page Slideshow:
Advertise your products, highlight customer serviceWatch an Easy Help Zen Cart Video Tutorial about this step HERE.
1. Create your slider images. They should all be the same height and width. They should be named:
slide1.jpg
slide2.jpg
slide3.jpg
slide4.jpg
slide5.jpg
2. Upload your images to includes/templates/avonlee_contempo/images.
Using Images With Different Names
Watch an Easy Help Zen Cart Video Tutorial about this step HERE.
In your zen cart admin and go to Tools -> Define Pages Editor
Select define_main_page.php from the drop down menu. Make sure that the Text Editor drop down is set to "Plain Text".
Find this code:
define(IMAGE1,'slide1.jpg');// default width 550px height 302px /
define(IMAGE2,'slide2.jpg');
define(IMAGE3,'slide3.jpg');
define(IMAGE4,'slide4.jpg');
define(IMAGE5,'slide5.jpg');
Replace slide1.jpg, etc. with the names of your images, making sure to keep the single quotes intact.
Click on the "save" button.
Images of Different Dimensions
In a plain text editor open the file includes/templates/avonlee_contempo/css/stylesheet.css. Find this code:
/*bof slide show*/
#container {width:550px;padding:10px;margin:0 auto;position:relative;z-index:0;margin-bottom:20px;}
#example {width:550px;height:302px;position:relative;}
#slides {position:absolute;top:0px;left:4px;z-index:100;}
.slides_container {width:550px;overflow:hidden;position:relative;display:none;}
.slides_container a {width:550px;height:302px;display:block;}
Change the width and height to the width and height of your images and save the file.
Add Links to the Images
Watch an Easy Help Zen Cart Video Tutorial about this step HERE.
Follow the first two steps from the "Using Images With Different Names" section.
Find this code:
define(URL1,'http://www.picaflor-azul.com');
define(URL2,'http://www.picaflor-azul.com');
define(URL3,'http://www.picaflor-azul.com');
define(URL4,'http://www.picaflor-azul.com');
define(URL5,'http://www.picaflor-azul.com');
Replace http://www.picaflor-azul.com with your link urls, making sure to keep the single quotes intact.
Using More or Less Than 5 Images
Follow the first two steps from the "Using Images With Different Names" section of this tutorial.
Find this code:
<div id="slides_container">
<a href="<?php echo URL1 ?>"><img src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE1 ?>" alt="first slide image" /></a>
<a href="<?php echo URL2 ?>"><img src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE2 ?>" alt="second slide image" /></a>
<a href="<?php echo URL3 ?>"><img src="<?php echo $template-<get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE3 ?>" alt="third slide image" /></a>
<a href="<?php echo URL4 ?>"><img src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE4 ?>" alt="fourth slide image" /></a>
<a href="<?php echo URL5 ?>"><img src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE5 ?>" alt="fifth slide image" /></a>
</div>
To use less images, remove this block of code for each image:
<a href=”<?php echo URL5 ?>”><img src=”<?php echo $template->get_template_dir(”,DIR_WS_TEMPLATE, $current_page_base,’images’).’/’.IMAGE5 ?>” alt=”fifth slide image” /></a>
You are removing the <a href> to </a> and all the code in between.
To use more images, add this code using the next number in sequence, for example image 6 would be:
<a href="<?php echo URL6 ?>"><img src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE6 ?>" alt="sixth slide image" /></a>
Then add these lines to define code above:
define(IMAGE6,'slide6.jpg');
and:
define(URL6,'http://www.picaflor-azul.com');
Follow this procedure for each image you want to add.
Step 10: Customize the Footer:
Social Media Links, IconsSocial Media
Watch an Easy Help Zen Cart Video Tutorial about this step HERE.
In a plain text editor open includes/languages/english/extra_definitions/avonlee_contempo/footer_menu_defines.php
On or around line 59 find this code:
/*bof bottom footer urls*/
Define('FACEBOOK','http://www.facebook.com/Custom.Zen.Cart.Design');
Define('TWITTER', 'http://www.twitter.com/picaflorazul');
Define('YOUTUBE', 'http://www.youtube.com/user/ZenCartEasyHelp');
Define('PINTEREST', 'http://www.pinterest.com/picaflorazul');
Define('GOOGLE', 'https://plus.google.com/113609090217058276980/posts');
Define('BLOG', 'http://www.picaflor-azul.com/blog');
Change the urls between the single quotes (shown here in green) being careful to keep the single quotes intact.
Save the file.
Customize Social Media Icons
If you want to change the icon used, on or around line 42 find this code:
/*bof bottom footer definitions*/
Define('FOOTER_PAYMENT_ICON', 'paypal.png');
Define('FACEBOOK_ICON', 'facebook.png');
Define('TWITTER_ICON', 'twitter.png');
Define('YOUTUBE_ICON', 'youtube.png');
Define('PINTEREST_ICON', 'pinterest.png');
Define('GOOGLE_ICON', 'google.png');
Define('BLOG_ICON', 'blog.png');
Upload your new icons to includes/templates/avonlee_contempo/images and change the name of the image (shown here in green) being careful to keep the single quotes intact.
Remove Social Media Links
In your favorite plain text editor open includes/templates/avonlee_contempo/css/stysheet_footer_menu.css
At the bottom of the file add display:none; to the class for each icon you don't want to display. So, for example if you don't want to display the facebook icon you would add:
.facebook{display:none;}
The classes used for the icons are:
.facebook
.twitter
.youtube
.pinterest
.google
.blog
Step 11: Add "Useful Links" to Footer:
Use EZ Pages to Add Site ContentWatch an Easy Help Zen Cart Video Tutorial of this step HERE.
In your zen cart admin go to Tools -> EZ-Pages
Create a new file or select one that has already been created.
Make sure that Footer "Yes" is checked and "Order" is designated.
The first 5 pages marked for the footer will show in the footer menu.
Step 12: Turn On Center Box Tabs:
Show featured, new, and speicals in a small amount of spaceIn your zen cart admin go to Configuration -> Index Listing
Click on "Show New Products on Main Page" select a value greater than "0" and click on the "update" button.
Repeat the above steps for "Show Featured Products on Main Page" and "Show Special Products on Main Page".
See these tutorials for more detail:
Easy Help Tutorial: How to Add New Products to the Main Page
Easy Help Tutorial: How to Add Featured Products to the Main Page
These boxes will not show until you have created Featured Products and Specials. See these tutorials for instructions on creating Featured Products and Speicals in the zen cart:
Easy Help Tutorial: How to Create a Special for a Product
Easy Help Tutorial: How to Create a Featured Product
The New Products centerbox will not show until you have added products to your store. See this for setting which products show up as new:
To Un-Install the Template:
Remove all files in the template package.
Remove the database changes for the Optional Column Layout Grid Module:
In your zen cart admin go to Tools -> Install SQL Patches
Paste this in the box and click on the "Send" button.
delete from configuration where configuration_key in('PRODUCT_LISTING_LAYOUT_STYLE','PRODUCT_LISTING_COLUMNS_PER_ROW');
DELETE FROM configuration WHERE configuration_group_id=25 AND configuration_title='Define About Us Status';
Easy Help Zen Cart Tutorials Index:
Files Included in the Template Package:
includes/extra_datafiles/about_us_filenames.php
includes/languages/avonlee_contempo/english.php
includes/languages/english/avonlee_contempo/aboutus.php
includes/languages/english/avonlee_contempo/header.php
includes/languages/english/avonlee_contempo/index.php
includes/languages/english/avonlee_contempo/metatags.php
includes/languages/english/html_includes/avonlee_contempo/define_about_us.php
includes/languages/english/html_includes/avonlee_contempo/define_checkout_success.php
includes/languages/english/html_includes/avonlee_contempo/define_conditions.php
includes/languages/english/html_includes/avonlee_contempo/define_contact_us.php
includes/languages/english/html_includes/avonlee_contempo/define_discount_coupon.php
includes/languages/english/html_includes/avonlee_contempo/define_main_page.php
includes/languages/english/html_includes/avonlee_contempo/define_page_2.php
includes/languages/english/html_includes/avonlee_contempo/define_page_3.php
includes/languages/english/html_includes/avonlee_contempo/define_page_4.php
includes/languages/english/html_includes/avonlee_contempo/define_page_not_found.php
includes/languages/english/html_includes/avonlee_contempo/define_privacy.php
includes/languages/english/html_includes/avonlee_contempo/define_shippinginfo.php
includes/languages/english/html_includes/avonlee_contempo/define_site_map.php
includes/languages/english/extra_definitions/avonlee_contempo/headermenu.php
includes/languages/english/extra_definitions/avonlee_contempo/about_us.php
includes/languages/english/extra_definitions/avonlee_contempo/footer_menu_defines.php
includes/modules/sideboxes/currencies_header.php
includes/modules/sideboxes/languages_header.php
includes/modules/sideboxes/avonlee_contempo/ezpages_drop_menu.php
includes/modules/sideboxes/avonlee_contempo/information.php
includes/modules/sideboxes/avonlee_contempo/more_information.php
includes/modules/pages/about_us/header_php.php
includes/modules/pages/index/jscript_easySlider.php
includes/modules/avonlee_contempo/featured_products.php
includes/modules/avonlee_contempo/new_products.php
includes/modules/avonlee_contempo/product_listing.php
includes/modules/avonlee_contempo/specials_index.php
includes/templates/avonlee_contempo/template_info.php
includes/templates/avonlee_contempo/common/tpl_footer.php
includes/templates/avonlee_contempo/common/tpl_header.php
includes/templates/avonlee_contempo/common/html_header.php
includes/templates/avonlee_contempo/common/tpl_footer_menu.php
includes/templates/avonlee_contempo/common/tpl_mega_menu.php
includes/templates/avonlee_contempo/common/tpl_columnar_display.php
includes/templates/avonlee_contempo/sideboxes/tpl_best_sellers.php
includes/templates/avonlee_contempo/sideboxes/tpl_search_header.php
includes/templates/avonlee_contempo/sideboxes/tpl_categories.php
includes/templates/avonlee_contempo/sideboxes/tpl_currencies_header.php
includes/templates/avonlee_contempo/sideboxes/tpl_document_categories.php
includes/templates/avonlee_contempo/sideboxes/tpl_ezpages.php
includes/templates/avonlee_contempo/sideboxes/tpl_information.php
includes/templates/avonlee_contempo/sideboxes/tpl_languages_header.php
includes/templates/avonlee_contempo/sideboxes/tpl_more_information.php
includes/templates/avonlee_contempo/templates/tpl_about_us_default.php
includes/templates/avonlee_contempo/templates/tpl_ezpages_footer_menu.php
includes/templates/avonlee_contempo/templates/tpl_modules_attributes.php
includes/templates/avonlee_contempo/templates/tpl_product_info_display.php
includes/templates/avonlee_contempo/templates/tpl_modules_featured_products.php
includes/templates/avonlee_contempo/templates/tpl_modules_product_listing.php
includes/templates/avonlee_contempo/templates/tpl_modules_specials_default.php
includes/templates/avonlee_contempo/templates/tpl_modules_whats_new.php
includes/templates/avonlee_contempo/templates/tpl_products_next_previous.php
includes/templates/avonlee_contempo/css/CSS_read_me.txt
includes/templates/avonlee_contempo/css/print_stylesheet.css
includes/templates/avonlee_contempo/css/stylesheet.css
includes/templates/avonlee_contempo/css/stylesheet_css_buttons.css
includes/templates/avonlee_contempo/css/ie6.css
includes/templates/avonlee_contempo/css/ie7.css
includes/templates/avonlee_contempo/css/stylesheet_betterCategoriesEzInfo.css
includes/templates/avonlee_contempo/css/stylesheet_dotline.css
includes/templates/avonlee_contempo/css/stylesheet_footer_menu.css
includes/templates/avonlee_contempo/jscript/jscript_jquery.js
Credits & License
People who make this project possible- The Zen Cart Team
- Nathan Searles http://slidesjs.com
- stevefriedman71 and DrByte for the Column Layout Grid Module
- Clyde Jones for the Footer Menu Module
- torvista and DrByte for the About Us Page Module
- qhome for the Column Divider Pro Module and the Designer Monthly Boxes Module
- Glen Herbert and ginginca for the Shopping Cart Totals In Header
- AddThis Social Bookmarking
- Rafael Lima for the CSS Browser Selector http://rafael.adm.br/css_browser_selector
- mbfergie for the Tabbed Home Page Modules Module
The Avonlee Contempo Free Zen Cart Template is released under the General Public License (see LICENSE.txt)
This script is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
Always backup your shop and database before making changes.
Free Zen Cart Templates by Picaflor Azul
Start your ecommerce site on a shoestring
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Bugs & Updates
Help us to continually improve the package04/24/2013-----Updated includes/templates/abbington_mega/jscript/jscript_jquery.min.php
11-13-2012-----Replaced Easy Slider with SlideJS. New files: includes/modules/pages/index/jscript_jquery.min.jquery.slides.php, includes/templates/avonlee_contempo/jscript/jscript_jquery.min.easing.1.3.php, includes/templates/avonlee_contempo/jscript/jscript_jquery.min.php. Updated files: includes/languages/english/html_includes/avonlee_contempo/define_main_page.php
11/13/2012-----Updated AddThis social bookmarking on the product info page to include Pinterest Pin it button
11/13/2012-----Customized product info page layout
11/13/2012-----Updated files: includes/modules/avonlee_contempo/new_products.php, includes/modules/avonlee_contempo/featured_products.php, includes/modules/avonlee_contempo/specials_index.php
11/13/2012-----New readme file.
11/13/2012-----Added youtube, pinterest, google plus, and blog icons to the footer menu. Changed files: includes/languages/english/extra_definitions/avonlee_contempo/footer_menu_defines.php, includes/templates/avonlee_contempo/common/tpl_footer_menu.php, Added: includes/templates/avonlee_contempo/images/youtube.png, includes/templates/avonlee_contempo/images/pinterest.png, includes/templates/avonlee_contempo/images/google.png, includes/templates/avonlee_contempo/images/blog.png
11/13/2012/----added Tabbed home page centerbox content for New Products, Featured Products, and Specials. Added files: includes/templates/avonlee_contempo/css/index_home.css, includes/templates/avonlee_contempo/css/stylesheet_module_tabs.css, includes/templates/avonlee_contempo/templates/tpl_index_default.php
07/28/2011-----1.3 I have removed the the header_php.php and main_template_vars.php files from the includes/modules/pages/index folder. No changes were made to these files and they were causing a fatal error on version 1.3.5. Now template is fully compatible with version 1.3.5.
07/09/2011------1.2 fixed slider javascript bug, added html readme file, added 3 column layout, replaced install.txt file with correct readme.txt file, resized slider images, centered slider, set twitter and facebook links to open in a new tab, fixed twitter and facebook links css bug, added home page image and text layout, added custom button to search sidebox, fixed attributes layout in ie6 and ie7, fixed many minor css bugs.
11/17/2010-------Fixed wrong path name for javascript in define_main_page.php, moved about_us_filenames.php to correct directory, fixed wrong path name in twitter and facebook links in footer, fixed ie6 and ie7 spacing bug with prev, listing, next on product info page.
11/06/2010-------First Release 1.0