![]() 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!
- Responsive 3 column display
- Optimized Drop Navigation for hand held devices
- Matching button set and icons included
- Responsive Home Page slideshow included
- Add your slide show images, set their links, enable/disable images/links, and set open in new window easily using the admin banner manager.
- 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 with expandable content areas for handheld devices
- Cross Browser tested using Firefox, IE10, IE9, IE8, Google Chrome, Opera, and Safari.
- Tested on the iPhone 5 with Mobile Safari 6.0; iPad 4 with Mobile Safari 6.0; Windows Phone 8 with IE10 Mobile; Blackberry Bold 9900 with Blackberry Browser 9900; and Android Nexus 4 with Chrome Mobile 18, Dolphin Mobile 9.3, Firefox Mobile 19, Marathon Mobile 4, Opera Mobile 12, Sleipnir Mobile 2.9
- 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 , Back to Top, Responsive Slides JS, Tabbed Home Page Modules
- 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.8x, 1.3.9s, 1.5x. Would probably work with lower versions although it has not been tested.
Support/Help
Free or personal supportThe 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:
Prepare the Package for Upload
Unzip the template package using your favorite unzip utility.
In the template package go to responsive_avonlee_contempo/files
Rename the folder YOUR_ADMIN_FOLDER to your admin folder name.
The YOUR_ADMIN_FOLDER/layout_controller file is a core overwrite. It will allow you to hide/show side boxes at min-width from the ADMIN > TOOLS > LAYOUT BOXES CONTROLLER page. Be sure to back up this file before you upload the template package.
Step 1: SQL Patches:
Necessary SQL Database Patches
Column Layout Grid
The 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
1. In your Zen Cart admin go to Tools-> Install SQL Patches
2. Copy and paste the contents of the clg_install.sql file into the box and click on the "Send" button. DO NOT INSTALL THE PATCH IF YOU HAVE PREVIOUSLY INSTALLED ONE OF OUR TEMPLATES OR HAVE RUN IT BEFORE
Now go to Configuration -> Product Listing
Click on "Product Listing - Layout Style", select "rows" and click on the "update" button.
Responsive, About Us, and Responsive Avonlee Contempo Patches
Follow steps 1 and 2 for the about_us.sql patch, the responsive.sql patch, and the responsive_avonlee_contempo.sql patch. DO NOT INSTALL THE responsive.sql OR about_us.sql PATCHES IF YOU HAVE PREVIOUSLY INSTALLED ONE OF OUR TEMPLATES OR HAVE RUN THESE PATCHES BEFOREGo to Configuration -> Define Page Status to define the About us page status.
Step 2: 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 and renamed admin directory and drop it in the root of your cart.

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 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: Show Box @Min-Width:
Hide Sideboxes on Small ScreensIn your Zen Cart admin go to Tools -> Layout Boxes Controller
Select which sideboxes will show on the phone sized device. I strongly recommend turning ALL of the sideboxes OFF.
Find which box you want to turn off and click on the green "e".
Select "OFF" for "Show this Box @ Min-Width" and click on the "update" button.
Step 6: Turn on Header Boxes:
Currencies, Languages and EZ Pages Drop MenuWatch an Easy Help Zen Cart Video Tutorial about this step HERE
In your zen cart admin go to Tools -> LayoutBoxes 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 ezpages_drop_menu.php sideboxes.
Step 7: 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:
Responsive Layout
In your Zen Cart admin go to Configuration -> Layout Settings
Click on "ACTIVATE Responsive Template by selecting Column Widths" and click on the "edit button"
Select "2" and click on the "update" button.
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 8: 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/responsive_avonlee_contempo/images.
Open includes/languages/english/responsive_avonlee_contempo/header.php in a plain text editor. Find this code on or around line 24:
define(
'HEADER_ALT_TEXT'
,
'Responsive 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 "Responsive 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 9: 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/responsive_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 10: Home Page Slideshow:
Advertise your products, highlight customer serviceAdd Your Images and Links
In your zen cart admin go to Tools -> Banner Manager.
Click on the banner "Slide 1", "Slide 2", "Slide 3", "Slide 4", "Slide 5"
Click on the "edit" button
Select "Banner New Window" Yes, or No, Enter your Banner URL in the text box, and Click on the "browse" or "choose file" button and select your image.
Click on the "update" button.
The default slider image size is 550 x 302 pixels.
Enable/Disable, Set Effect, Play & Pause:
In your zen cart admin go to Configuration -> Responsive Avonlee Contempo
Click on "Slides JS Slideshow" or "Play Interval".
To turn the slider on or off on the home page, click on "Slides JS Slideshow". Select "true" to show the slide show on the home page, or select "false" to hide the hide the slide show on the home page, and click on the update button.
To set the time between slide animation in milliseconds, click on "Play". Add the time in milliseconds and click on the update button.
Step 11: Customize the Footer:
Add Your Social Media LinksSocial Media
Watch an Easy Help Zen Cart Video Tutorial about this step HERE.
In a plain text editor open includes/languages/english/extra_definitions/responsive_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/responsive_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/responsive_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 12: 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:
Step 14: Mobile Device Header Menu:
Customize textIf you want to change the text of any of the header menu headings, edit the includes/languages/english/extra_definitions/responsive_avonlee_contempo/apparel_boutique.php
To Un-Install the Template:
Remove all files in the template package.
Restore your back up of the admin/layout_controller.php file.
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:
YOUR_ADMIN_FOLDER/includes/extra_datafiles/responsive_avonlee_contempo.php
includes/classes/categories_ul_generator.php
includes/extra_datafiles/about_us_filenames.php
includes/languages/responsive_avonlee_contempo/english.php
includes/languages/english/responsive_avonlee_contempo/aboutus.php
includes/languages/english/responsive_avonlee_contempo/header.php
includes/languages/english/responsive_avonlee_contempo/index.php
includes/languages/english/responsive_avonlee_contempo/metatags.php
includes/languages/english/responsive_avonlee_contempo/button_names.php
includes/languages/english/html_includes/responsive_avonlee_contempo/define_about_us.php
includes/languages/english/html_includes/responsive_avonlee_contempo/define_main_page.php
includes/languages/english/extra_definitions/responsive_avonlee_contempo/responsive_avonlee_contempo.php
includes/languages/english/extra_definitions/responsive_avonlee_contempo/about_us.php
includes/languages/english/extra_definitions/responsive_avonlee_contempo/footer_menu_defines.php
includes/languages/english/extra_definitions/responsive_avonlee_contempo/column_layout_grid_defines.php
includes/languages/english/extra_definitions/responsive_avonlee_contempo/module_tabs.php
includes/modules/sideboxes/currencies_header.php
includes/modules/sideboxes/languages_header.php
includes/modules/sideboxes/responsive_avonlee_contempo/ezpages_drop_menu.php
includes/modules/sideboxes/responsive_avonlee_contempo/information.php
includes/modules/sideboxes/responsive_avonlee_contempo/more_information.php
includes/modules/pages/about_us/header_php.php
includes/modules/pages/index/jscript_slides_js.php
includes/modules/responsive_avonlee_contempo/featured_products.php
includes/modules/responsive_avonlee_contempo/new_products.php
includes/modules/responsive_avonlee_contempo/product_listing.php
includes/modules/responsive_avonlee_contempo/specials_index.php
includes/templates/responsive_avonlee_contempo/template_info.php
includes/templates/responsive_avonlee_contempo/common/tpl_footer.php
includes/templates/responsive_avonlee_contempo/common/tpl_header.php
includes/templates/responsive_avonlee_contempo/common/html_header.php
includes/templates/responsive_avonlee_contempo/common/tpl_footer_menu.php
includes/templates/responsive_avonlee_contempo/common/tpl_main_page.php
includes/templates/responsive_avonlee_contempo/common/tpl_columnar_display.php
includes/templates/responsive_avonlee_contempo/common/tpl_footer_menu.php
includes/templates/responsive_avonlee_contempo/common/tpl_box_default_left.php
includes/templates/responsive_avonlee_contempo/common/tpl_box_default_right.php
includes/templates/responsive_avonlee_contempo/common/tpl_home_slider.php
includes/templates/responsive_avonlee_contempo/sideboxes/tpl_best_sellers.php
includes/templates/responsive_avonlee_contempo/sideboxes/tpl_search_header.php
includes/templates/responsive_avonlee_contempo/sideboxes/tpl_categories.php
includes/templates/responsive_avonlee_contempo/sideboxes/tpl_currencies_header.php
includes/templates/responsive_avonlee_contempo/sideboxes/tpl_document_categories.php
includes/templates/responsive_avonlee_contempo/sideboxes/tpl_ezpages.php
includes/templates/responsive_avonlee_contempo/sideboxes/tpl_information.php
includes/templates/responsive_avonlee_contempo/sideboxes/tpl_languages_header.php
includes/templates/responsive_avonlee_contempo/sideboxes/tpl_more_information.php
includes/templates/responsive_avonlee_contempo/sideboxes/tpl_ezpages_drop_menu.php
includes/templates/responsive_avonlee_contempo/templates/tpl_about_us_default.php
includes/templates/responsive_avonlee_contempo/templates/tpl_ezpages_footer_menu.php
includes/templates/responsive_avonlee_contempo/templates/tpl_index_categories.php
includes/templates/responsive_avonlee_contempo/templates/tpl_product_info_display.php
includes/templates/responsive_avonlee_contempo/templates/tpl_modules_featured_products.php
includes/templates/responsive_avonlee_contempo/templates/tpl_modules_product_listing.php
includes/templates/responsive_avonlee_contempo/templates/tpl_modules_specials_default.php
includes/templates/responsive_avonlee_contempo/templates/tpl_modules_whats_new.php
includes/templates/responsive_avonlee_contempo/templates/tpl_products_next_previous.php
includes/templates/responsive_avonlee_contempo/templates/tpl_index_default.php
includes/templates/responsive_avonlee_contempo/templates/tpl_modules_mobile_categories_tabs.php
includes/templates/responsive_avonlee_contempo/templates/tpl_site_map_default.php
includes/templates/responsive_avonlee_contempo/css/index_home.css
includes/templates/responsive_avonlee_contempo/css/print_stylesheet.css
includes/templates/responsive_avonlee_contempo/css/stylesheet.css
includes/templates/responsive_avonlee_contempo/css/stylesheet_css_buttons.css
includes/templates/responsive_avonlee_contempo/css/responsive.css
includes/templates/responsive_avonlee_contempo/css/stylesheet_back_to_top.css
includes/templates/responsive_avonlee_contempo/css/stylesheet_betterCategoriesEzInfo.css
includes/templates/responsive_avonlee_contempo/css/stylesheet_module_tabs.css
includes/templates/responsive_avonlee_contempo/css/stylesheet_footer_menu.css
includes/templates/responsive_avonlee_contempo/css/stylesheet_slides.css
includes/templates/responsive_avonlee_contempo/jscript/jscript_jquery.min.js
includes/templates/responsive_avonlee_contempo/jscript/back_to_top_min.js
includes/templates/responsive_avonlee_contempo/jscript/script.js
Credits & License
People who make this project possible- The Zen Cart Team
- rbarbour and the Responsive DIY Template Default for 1.5.x
- The jQuery Foundation
- Nathan Searles Slides JS http://www.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
- 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
- Get Em Fast for the CSS Horizontal Dropdown Menu With Jquery Module
- Back to Top www.myjqueryplugins.com - www.alpixel.fr
- Tessa Thornton http://webdesign.tutsplus.com/tutorials/site-elements/big-menus-small-screens-responsive-multi-level-navigation
- http://www.publicdomainpictures.net Petr Kratochvil
The Responsive 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.