logo

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.

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:

backup wizard Easy Help Zen Cart Tutorial™:  How to Install a New Template

2. Click on Backup:

backup wizard 2 Easy Help Zen Cart Tutorial™:  How to Install a New Template

3. Click on Full Backup:

backup wizard 3 Easy Help Zen Cart Tutorial™:  How to Install a New Template

4. Click on Generate Backup:

backup wizard 4 Easy Help Zen Cart Tutorial™:  How to Install a New Template

backup wizard 5 Easy Help Zen Cart Tutorial™:  How to Install a New Template

Prepare the Package for Upload

Unzip the template package using your favorite unzip utility.

In the template package go to responsive_apparel_boutique/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

sql

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

product listing

Click on "Product Listing - Layout Style", select "rows" and click on the "update" button.

Responsive, About Us, and Responsive Apparel Boutique Patches

Follow steps 1 and 2 for the about_us.sql patch, the responsive.sql patch, and the responsive_apparel_boutique.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 BEFORE

Go 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.

filezilla Easy Help Zen Cart Tutorial™:  How to Install a New Template

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 .

filezilla 1 Easy Help Zen Cart Tutorial™:  How to Install a New Template

3. Drag the includes and renamed admin directory and drop it in the root of your cart.

filezilla 2 Easy Help Zen Cart Tutorial™:  How to Install a New Template

Upload Method 2: CPanel File Manager

Zip up the includes folder and name it "includes.zip".

1. Select Legacy File Manager:

file mamager Easy Help Zen Cart Tutorial™:  How to Install a New Template

2. Select Web Root from the pop up window:

file manager 1a Easy Help Zen Cart Tutorial™:  How to Install a New Template

3. Click on Upload Files:

file manager 2 Easy Help Zen Cart Tutorial™:  How to Install a New Template

4. Click on Browse and choose upload.zip:

file manager 3 Easy Help Zen Cart Tutorial™:  How to Install a New Template

5. Click on Upload:

file manager 4 Easy Help Zen Cart Tutorial™:  How to Install a New Template

6. Click on upload.zip. In the Right hand top box, click on extract file contents:

file manager 5 Easy Help Zen Cart Tutorial™:  How to Install a New Template

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

template selection Easy Help Zen Cart Tutorial™:  How to Install a New Template

Click on the "edit" button

template selection edit Easy Help Zen Cart Tutorial™:  How to Install a New Template

Select the name of the template you just installed from the drop down menu

template selection choose Easy Help Zen Cart Tutorial™:  How to Install a New Template

Click on the "update" button.

template selection update Easy Help Zen Cart Tutorial™:  How to Install a New Template

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

template selection layout boxes Easy Help Zen Cart Tutorial™:  How to Install a New Template

Scroll down to the bottom of the screen and click the "reset" button.

template selection reset sideboxes Easy Help Zen Cart Tutorial™:  How to Install a New Template

Step 5: Show Box @Min-Width:

Hide Sideboxes on Small Screens

In your Zen Cart admin go to Tools -> Layout Boxes Controller

template selection layout boxes Easy Help Zen Cart Tutorial™:  How to Install a New Template

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.

template selection reset sideboxes Easy Help Zen Cart Tutorial™:  How to Install a New Template

Step 6: Turn on Header Boxes:

Currencies, Languages and EZ Pages Drop Menu

Watch an Easy Help Zen Cart Video Tutorial about this step HERE

In your zen cart admin go to Tools -> LayoutBoxes Controller

template selection layout boxes Easy Help Zen Cart Tutorial™: How to Turn on the Header Currencies and Languages in our Free or Paid Templates

Click on "sideboxes/your-template-override-directory/languages_header.php" and then click on the "edit" button

header lan Easy Help Zen Cart Tutorial™: How to Turn on the Header Currencies and Languages in our Free or Paid Templates

Set the "Single Column Status" to "ON", the "Single Column Sort Order" to something other than "0" , and click on the "update" button.

header lan1 Easy Help Zen Cart Tutorial™: How to Turn on the Header Currencies and Languages in our Free or Paid Templates

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

product listing

Copy these values:

product listing

Responsive Layout

In your Zen Cart admin go to Configuration -> Layout Settings

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

Layout Settings

In your Zen Cart admin go to Configuration -> Layout Settings

layout settings

Copy these values:

layout

EZ Pages Header Bar

To turn off EZ pages in the header, go to Configuration -> EZ-Pages Settings

ezpages 1 Easy Help Zen Cart Tutorial™: How Do I Turn Off the EZ Pages Header Bar?

Select "EZ-Pages Display Status - HeaderBar" and click on the "edit" button.

ezpages 2 Easy Help Zen Cart Tutorial™: How Do I Turn Off the EZ Pages Header Bar?

Click on the radio button for "0" and click on the "update" button.

ezpages 3 Easy Help Zen Cart Tutorial™: How Do I Turn Off the EZ Pages Header Bar?

Step 8: Add Your Logo:

Brand your site

Watch 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_apparel_boutique/images.

Open includes/languages/english/responsive_apparel_boutique/header.php in a plain text editor. Find this code on or around line 24:

define('HEADER_ALT_TEXT', 'Preston Elite :: Free Template by www.picaflor-azul.com');
define(
'HEADER_LOGO_WIDTH', '235px');
define(
'HEADER_LOGO_HEIGHT', '60px');
define(
'HEADER_LOGO_IMAGE', 'logo.png');

  1. Replace "Preston Elite :: Free Template by www.picaflor-azul.com" with your site name and tag line here
  2. Replace "235px" with your logo width
  3. Replace "60px" with your logo height
  4. 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_apparel_boutique/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 service

Add Your Images and Links

In your zen cart admin go to Tools -> Banner Manager.

banners Easy Help Zen Cart Tutorial™: How to Set Up a Banner Ad

Click on the banner "Slide 1", "Slide 2", "Slide 3", "Slide 4", "Slide 5"

Click on the "edit" button

banners Easy Help Zen Cart Tutorial™: How to Set Up a Banner Ad

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.

banners Easy Help Zen Cart Tutorial™: How to Set Up a Banner Ad

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 Apparel Boutique

Responsive Apparel Boutique

Click on "Slides JS Slideshow" or "Play Interval".

Abbington Mega

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.

Abbington Mega

To set the time between slide animation in milliseconds, click on "Play". Add the time in milliseconds and click on the update button.

Abbington Mega

Step 11: Customize the Footer:

Add Your Social Media Links

Social 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_apparel_boutique/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_apparel_boutique/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_apparel_boutique/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 Content

Watch an Easy Help Zen Cart Video Tutorial of this step HERE.

In your zen cart admin go to Tools -> EZ-Pages

ezpages 4 Easy Help Zen Cart Tutorial™: How to Add Important Links Into the Footer

Create a new file or select one that has already been created.

footer links 3 Easy Help Zen Cart Tutorial™: How to Add Important Links Into the Footer

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 space

In your zen cart admin go to Configuration -> Index Listing

index  listing

Click on "Show New Products on Main Page" select a value greater than "0" and click on the "update" button.

new products

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:

Easy Help Tutorial: What Determines if a Product is "New"

Step 14: Mobile Device Header Menu:

Customize text

If you want to change the text of any of the header menu headings, edit the includes/languages/english/extra_definitions/responsive_apparel_boutique/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

sql patch

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';

Files Included in the Template Package:

YOUR_ADMIN_FOLDER/layout_controller.php
YOUR_ADMIN_FOLDER/includes/extra_datafiles/responsive_apparel_boutique.php
includes/classes/categories_ul_generator.php
includes/extra_datafiles/about_us_filenames.php
includes/languages/responsive_apparel_boutique/english.php
includes/languages/english/responsive_apparel_boutique/aboutus.php
includes/languages/english/responsive_apparel_boutique/header.php
includes/languages/english/responsive_apparel_boutique/index.php
includes/languages/english/responsive_apparel_boutique/metatags.php
includes/languages/english/responsive_apparel_boutique/button_names.php
includes/languages/english/html_includes/responsive_apparel_boutique/define_about_us.php
includes/languages/english/html_includes/responsive_apparel_boutique/define_main_page.php
includes/languages/english/extra_definitions/responsive_apparel_boutique/responsive_apparel_boutique.php
includes/languages/english/extra_definitions/responsive_apparel_boutique/about_us.php
includes/languages/english/extra_definitions/responsive_apparel_boutique/footer_menu_defines.php
includes/languages/english/extra_definitions/responsive_apparel_boutique/column_layout_grid_defines.php
includes/languages/english/extra_definitions/responsive_apparel_boutique/module_tabs.php
includes/modules/sideboxes/currencies_header.php
includes/modules/sideboxes/languages_header.php
includes/modules/sideboxes/responsive_apparel_boutique/ezpages_drop_menu.php
includes/modules/sideboxes/responsive_apparel_boutique/information.php
includes/modules/sideboxes/responsive_apparel_boutique/more_information.php
includes/modules/pages/about_us/header_php.php
includes/modules/pages/index/jscript_slides_js.php
includes/modules/responsive_apparel_boutique/featured_products.php
includes/modules/responsive_apparel_boutique/new_products.php
includes/modules/responsive_apparel_boutique/product_listing.php
includes/modules/responsive_apparel_boutique/specials_index.php
includes/templates/responsive_apparel_boutique/template_info.php
includes/templates/responsive_apparel_boutique/common/tpl_footer.php
includes/templates/responsive_apparel_boutique/common/tpl_header.php
includes/templates/responsive_apparel_boutique/common/html_header.php
includes/templates/responsive_apparel_boutique/common/tpl_footer_menu.php
includes/templates/responsive_apparel_boutique/common/tpl_main_page.php
includes/templates/responsive_apparel_boutique/common/tpl_columnar_display.php
includes/templates/responsive_apparel_boutique/common/tpl_footer_menu.php
includes/templates/responsive_apparel_boutique/common/tpl_box_default_left.php
includes/templates/responsive_apparel_boutique/common/tpl_box_default_right.php
includes/templates/responsive_apparel_boutique/common/tpl_home_slider.php
includes/templates/responsive_apparel_boutique/sideboxes/tpl_best_sellers.php
includes/templates/responsive_apparel_boutique/sideboxes/tpl_search_header.php
includes/templates/responsive_apparel_boutique/sideboxes/tpl_categories.php
includes/templates/responsive_apparel_boutique/sideboxes/tpl_currencies_header.php
includes/templates/responsive_apparel_boutique/sideboxes/tpl_document_categories.php
includes/templates/responsive_apparel_boutique/sideboxes/tpl_ezpages.php
includes/templates/responsive_apparel_boutique/sideboxes/tpl_information.php
includes/templates/responsive_apparel_boutique/sideboxes/tpl_languages_header.php
includes/templates/responsive_apparel_boutique/sideboxes/tpl_more_information.php
includes/templates/responsive_apparel_boutique/sideboxes/tpl_ezpages_drop_menu.php
includes/templates/responsive_apparel_boutique/templates/tpl_about_us_default.php
includes/templates/responsive_apparel_boutique/templates/tpl_ezpages_footer_menu.php
includes/templates/responsive_apparel_boutique/templates/tpl_index_categories.php
includes/templates/responsive_apparel_boutique/templates/tpl_product_info_display.php
includes/templates/responsive_apparel_boutique/templates/tpl_modules_featured_products.php
includes/templates/responsive_apparel_boutique/templates/tpl_modules_product_listing.php
includes/templates/responsive_apparel_boutique/templates/tpl_modules_specials_default.php
includes/templates/responsive_apparel_boutique/templates/tpl_modules_whats_new.php
includes/templates/responsive_apparel_boutique/templates/tpl_products_next_previous.php
includes/templates/responsive_apparel_boutique/templates/tpl_index_default.php
includes/templates/responsive_apparel_boutique/templates/tpl_modules_mobile_categories_tabs.php
includes/templates/responsive_apparel_boutique/templates/tpl_site_map_default.php
includes/templates/responsive_apparel_boutique/css/index_home.css
includes/templates/responsive_apparel_boutique/css/print_stylesheet.css
includes/templates/responsive_apparel_boutique/css/stylesheet.css
includes/templates/responsive_apparel_boutique/css/stylesheet_css_buttons.css
includes/templates/responsive_apparel_boutique/css/responsive.css
includes/templates/responsive_apparel_boutique/css/stylesheet_back_to_top.css
includes/templates/responsive_apparel_boutique/css/stylesheet_betterCategoriesEzInfo.css
includes/templates/responsive_apparel_boutique/css/stylesheet_module_tabs.css
includes/templates/responsive_apparel_boutique/css/stylesheet_footer_menu.css
includes/templates/responsive_apparel_boutique/css/stylesheet_slides.css
includes/templates/responsive_apparel_boutique/jscript/jscript_jquery.min.js
includes/templates/responsive_apparel_boutique/jscript/back_to_top_min.js
includes/templates/responsive_apparel_boutique/jscript/script.js

Credits & License

People who make this project possible
Special Thanks:
  • 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 Apparel Boutique 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.

Bugs & Updates

Help us to continually improve the package
09/05/2013-------First Release 1.0