logo
blog twitter facebook

Welcome to Biki-kini Zen Cart Custom Template

Version: 1.0

Designed by CREATIVsite (http://www.creativsite.com)

Biki kini Template Live Demo

Biki-kini Template Support Thread

The Biki-kini Free Zen Cart Template is made available to you for use, additions, changes, modifications, etc. without charge under the General Public License (see LICENSE.txt)

While this software is free, donations are greatly appreciated each time you download a new version, to help cover the expenses of maintenance, upgrades, updates, the free support forum and the continued development of free custom templates for your online e-commerce store.

Donations can be made at: The CREATIVsite Page

This program 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 and is redistributable under the GNU General Public License.

Template Features

  1. Maximum use of style sheet rendering the design cusomizable for any store.
  2. Fixed width 2 or 3 column display.
  3. Matching button set and icons included.
  4. Custom header with customizable language and currency fields, links to home, log in (log off when customer is logged in), shopping cart totals, and checkout, customizable header text ad, and header search box.
  5. Fully customizable header drop down menu with quick links, categories, shop by brand, information (includes admin configurable ez pages), contact us form, and customer service (with customizable text and images).
  6. Home Page slideshow included.
  7. Home page center content for New Products, Featured Products, and Specials.
  8. Add This social bookmarking added to all product pages (includes Facebook like button, Twitter Tweet Button, and 300+ Sharing Services).
  9. Custom footer featuring a footer menu with customizable contact information (link to contact us page), information, customer support, and useful links (ez pages), integrated, optional links to your Facebook, Twitter, Youtube, Pinterest, Google Plus, and blog, and optional, customizable links to payment options.
  10. Cross Browser tested using Firefox, IE9, IE8, IE7, and Safari.
  11. W3C Valid XHTML and CSS.
  12. Custom header including shopping cart totals (item count and dollar amount), checkout link, search, currencies with drop down menu, and languages.
  13. Comes with the following modules installed: Column Layout Grid, Footer Menu , Column Divider Pro, Pure CSS Header Menu, LanguageCurrency Links in Header.
  14. No changes to core files.
  15. Fully compatible with version Zen cart 1.5. Would probably work with Zen cart 1.3.8 and 1.3.9 although it has not been tested.

Installation Steps

  1. Backup: Backup your shop (at least back up the old version of the files before upadating) and database before making changes.
  2. Upload files: Unzip the Biki-kini.zip and upload the directory stucture to your server where you installed Zen Cart files.
  3. SQL patches: Run the sql statements from bikikini_patch.sql file to have column grid layout for products and currency and language fields in the header. You can run these statemement via via phpMyAdmin, or by Admin->Tools->Install SQLPatch.
    To run using ZenCart Admin menu, open Admin->Tools->Install SQLPatch, copy and paste the following lines in the box:
    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_id, configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, last_modified, date_added, use_function, set_function) VALUES ('', 'Show Languages in Header?', 'HEADER_LANGUAGES_DISPLAY', 'True', 'Display the Languages flags/links in Header?', 19, 170, NULL, now(), NULL, 'zen_cfg_select_option(array(''True'', ''False''), ');
    INSERT INTO configuration (configuration_id, configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, last_modified, date_added, use_function, set_function) VALUES ('', 'Show Currencies in Header?', 'HEADER_CURRENCIES_DISPLAY', 'True', 'Display the Currencies symbols/links in Header?', 19, 171, NULL, now(), NULL, 'zen_cfg_select_option(array(''True'', ''False''), ');

    Click Send button.
  4. Column Grid Configuration In ZenCart Admin, click on Configuration -> Product Listing -> Layout Style, select select "rows" and click on the "update" button.
  5. Languages Box show/hide: By default, after running the sql statements, the language and currency box in the header section will be set. In order to hide language and currency box from the header, select Configuration -> Layout Settings, select "Show Languages in Header", change the value to "false" in the menu and click "update".
  6. Currencies Box show/hide: By default, after running the sql statements, the currency box in the header section will be set. In order to hide currency box from the header, select Configuration -> Layout Settings, select "Show Currencies in Header", change the value to "false" in the menu and click "update".
  7. Select Template: In the Admin menu, go to Tools->Template Selection->Edit. Select "Biki kini - Go Green" as "Template Name" and click "update". You should be able to see the new template in your store.
  8. Reset Sideboxes: In the Admin menu, go to Tools->Layout Boxes Controller. Click reset to reset All Box Sort Order to match DEFAULT sort of the installed Template.
  9. Banner Customization: In the Admin menu, go to Tools->Banner Manager. Click on the Banner you would like to customize, select Edit. Upload your custom image and click update. Make sure the banner box status is enabled (green).

Template Customization

  1. Logo and Tagline Customization
    • Replace CREATIVsite logo with your shop's logo under includes/templates/biki_kini/images.

      The best logo size for this template is 235 x 60 pixels. The max logo size 400 x 100 pixels.

    • Open includes/languages/english/biki_kini/header.php in your favorite plain text editor. Find this code on or around line 32:

      define('HEADER_ALT_TEXT', 'Biki kini :: Free Template by www.CREATIVsite.com');

      define('HEADER_SALES_TEXT', 'Biki kini :: Free Template by www.CREATIVsite.com');

      define('HEADER_LOGO_WIDTH', '235px');

      define('HEADER_LOGO_HEIGHT', '60px');

      define('HEADER_LOGO_IMAGE', 'logo.png');

    • Replace the text in red with your store tag line, your header width and height. It should look as :

      define('HEADER_ALT_TEXT', 'Your tag line');

      define('HEADER_SALES_TEXT', 'Your tag line');

      define('HEADER_LOGO_WIDTH', 'Your logo width in px');

      define('HEADER_LOGO_HEIGHT', 'Your logo height in px');

      define('HEADER_LOGO_IMAGE', 'logo.png');

  2. Slide image Customization (Basic):

    Create your images for the slider. All of your slider images should be the same height and width. The default number of images for all of the sliders are 5. Your images should be named:slide1.jpg, slide2.jpg, slide3.jpg, slide4.jpg, slide5.jpg and whould have dimensions 550px height 300px. Upload the images at includes/templates/biki_kini/images

    .
  3. Slide Customization (Advanced):

    In Zen Cart admin and go to Tools -> Define Pages Editor and open define_main_page.php from the drop down menu (make sure Text Editor drop down is set to "plain Text").

    Find the following lines and customize it to your store specific

    • If you change the name of the slide images, change the red text to your slide names.

      define(IMAGE1,'slide1.jpg');// default width 550px height 300px

      define(IMAGE2,'slide2.jpg');

      define(IMAGE3,'slide3.jpg');

      define(IMAGE4,'slide4.jpg');

      define(IMAGE5,'slide5.jpg');

    • Change the urls (in red text) to your shop specific ones.

      define(IMAGE1,'http://creativsite.com/');// default width 550px height 300px

      define(IMAGE2,'http://creativsite.com/newsroom/tutorial/');

      define(IMAGE3,'https://creativsite.com/TheBridge/');

      define(IMAGE4,'http://www.facebook.com/CreativSite');

      define(IMAGE5,'http://creativsite.com/send-a-cup.html');

    • Change the descriptions (in red text) to your shop descriptions.

      // DEFINITIONS FOR HOMEPAGE SLIDER

      define('DESCRIPTION1', 'creativSITE presents complete solution of
      design and web hosting'
      );

      define('DESCRIPTION2', 'Read out tutorials');

      define('DESCRIPTION3', 'Visit our template section for more.');

      define('DESCRIPTION4', 'Increase your fan base by adding your story to your blog and facebook site.');

      define('DESCRIPTION5', 'Creating templates and tutorials are time consuming.
      Your help is appreciated.'
      );

    • If you want to include less than 5 images, only keep the slide images, urls and descriptions related to your number of images. For example if you want to include only 3 images, you will have:

      define(IMAGE1,'slide1.jpg');// default width 550px height 300px

      define(IMAGE2,'slide2.jpg');

      define(IMAGE3,'slide3.jpg');

      define(IMAGE1,'Your url 1');

      define(IMAGE2,'Your url 2/');

      define(IMAGE3,'Your url 3');

      // DEFINITIONS FOR HOMEPAGE SLIDER

      define('DESCRIPTION1', 'Your Description 1');

      define('DESCRIPTION2', 'Your Description 2');

      define('DESCRIPTION3', 'Your Description 3');

    • If you want to include more than 5 images, add image, urls and descriptions related to your number of images to the end of the groups for image, url and description. For example if you want to include 6th image, you will add:

      define(IMAGE6,'slide6.jpg');

      define(IMAGE6,'Your url 6');

      define('DESCRIPTION6', 'Your Description 6');

    • If you want to have image size other than 550px x 300px, find the following lines at around line 28,

      $('#coin-slider').coinslider({

      width: 550, // width of slider panel

      height: 300, // height of slider panel

      spw: 7, // squares per width

      replace the red text with your image width and height.

  4. Footer Menu Customization

    • Update your social media information

      Define('FACEBOOK','<li class="footer-menu"><a href="http://www.facebook.com/CreativSite" target="_blank><img src="includes/templates/biki_kini_green/images/facebook.png" alt="Facebook" class="footer-icon socialfooter-icon" /> Share </a></li>');

      Define('GOOGLEPLUS','<li class="footer-menu"><a href="https://plus.google.com/103999893072955905644/posts" target="_blank><img src="includes/templates/biki_kini_green/images/google+.png" alt="google+" class="footer-icon socialfooter-icon" alt="Facebook" class="footer-icon socialfooter-icon" /> Connect </a></li>');

      Define('TWITTER','<li class="footer-menu"><a href="https://plus.google.com/103999893072955905644/posts" target="_blank><img src="includes/templates/biki_kini_green/images/twitter.png" alt="google+" class="footer-icon socialfooter-icon" alt="twitter" class="footer-icon socialfooter-icon" /> Connect </a></li>');

      Define('PINTERUS','<li class="footer-menu"><a href="http://pinterest.com/creativsite" target="_blank><img src="includes/templates/biki_kini_green/images/pinterest.png" alt="Enjoy" class="footer-icon socialfooter-icon" alt="Facebook" class="footer-icon socialfooter-icon" /> Enjoy </a></li>');

      Define('BLOG','<li class="footer-menu"><a href="http://creativsite.com/newsroom" target="_blank><img src="includes/templates/biki_kini_green/images/blogger.png" alt="Enjoy" class="footer-icon socialfooter-icon" alt="Newsroom" class="footer-icon socialfooter-icon" /> Enjoy </a></li>');

  5. Header Menu Customization

    If you want to customize the header menu you can change any of the existing text and links in includes/languages/english/extra_definitions/biki_kini/headermenu.php

    Open includes/languages/english/extra_definitions/biki_kini/headermenu.php in a text editor.

    • Customize Contact us Text

      Find the following line on or around line 54 and replace the red text with your custom message and save the file.

      define('TEXT_CONTACT_US','Your short message goes here.');

    • Customize Shipping Info Text

      Find the following line on or around line 59 and replace the red text with your custom message and save the file.

      define('TEXT_SHIPPING_INFO','Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam interdum feugiat ipsum vehicula sollicitudin. Integer sed lacus eget risus consectetur ullamcorper. Pellentesque rutrum ullamcorper faucibus. Nam porttitor iaculis enim, mattis tristique velit tristique bibendum. ');

    • Customize Confidence Text

      Find the following line on or around line 61 and replace the red text with your custom message and save the file.

      define('TEXT_CONFIDENCE','Here you can write a few short sentences about why your customers can buy with conficence from your store. You might also want to outline your payment options here. ');

  6. Menu Dropdown Customization:

    To hide drop down menus, open includes/templates/biki_kini/css/stylesheet_mega_menu.css in a text editor. Add a display:none; to the class for the drop down you want to hide. For example, to hide quicklinks, the following class needed to be added to the bottom of the css file:

    .quicklinks-li{display:none;}

    The classes for the drop down menus are as follows:

    .quicklinks-li

    .categories-li

    .manufacturers-li

    .information-li

    .contactus-li

    .customerservice-li

To uninstall the template:

To uninstall the template:

Update History:

07/12/12 -- First Release 1.0

Bug Reports:

Please contact us at support@creativsite.com to report any problems with the template.

facebook google+