Welcome to Coolbaby eCommerce!

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this documentation, please feel free to submit ticket to http://etheme.ticksy.com.

Thanks so much!

Compatible with Magento:

Coolbaby eCommerce is fully compatible with Magento Community Edition,,,,,,,


Coolbaby is theme for Magento ecommerce platform. Before you start working with theme you should be familiar with Magento. Please read following links:

Theme Installation

Before using Coolbaby theme you should have installed copy of Magento Community Edition open source e-commerce web application.

Warning! Before uploading theme files on a production environment, make sure you have tested it before on a development environment. Make sure to create a backup of your original files and database before uploading theme files.

To install Coolbaby theme, follow these steps:

  1. Disable compilation option if you use it (Admin Panel -> System -> Tools -> Compilation).
  2. Using an FTP client, upload all contents of 'Theme' folder in template package to the web root on your web server (usually public_html). Pay attention you should copy content of upload folder, it will overwrite some files.
  3. Go to System -> Cache management. Select all, choose refresh action and submit. After that you will see new menu item - Coolbaby, now log out and login again to refresh access control system.

  4. Go to Coolbaby -> Install -> Install Theme. Select Demo to install and click Submit Action.

  5. Clear Magento cache.

Theme Update

Backup all your data (files/database) before applying updates.

Variant 1 - with FTP UPLOAD:
If you do not change files, just download new version and copy it over old files. That's it. Important: If you use Compilation feature (System -> Tools -> Compilation) you should disable it before theme update. And enable it when update is completed. Note new updates will overwrite your slides to default values. You have to upload slides after updates.
Variant 2 - with DIFF FILE:
If you have made a lot of changes to your theme and want to upgrade, please check patch folder. It contain information in svn patch/diff format. For example check svn-diff-file-from-v1.0-to-v1.1.diff file. You will see list of changes. - width: 530, + width: 876, line with minus was deleted line with plus was added You can browse thru patch files manually or update it SVN utilities. Please note that patches should be applied version by version. I.e. if you have v1.0 and download v1.5 - you should first apply patches from v1.0-to-v1.1, after that from v1.1-to-v1.2 and so on.

Step by step update example:

  1. Upload patch files (svn-diff-file-from-v1.0-to-v1.1.diff, svn-diff-file-from-v1.1-to-v1.2.diff) to your web server’s root folder.
  2. Login to your server via SSH
  3. Change directory to your webserver root folder. “cd /u01/www/support.ethemeuk.com/svntest” – in my case.
  4. Run patch command to apply first patch. “patch -p7 < svn-diff-file-from-v1.0-to-v1.1.diff”
  5. Run patch command to apply second patch. “patch -p7 < svn-diff-file-from-v1.1-to-v1.2.diff”
  6. Check patch log.
  7. Clear Magento cache, clear browser cache.
Variant 3 - read Theme Customization

Theme Customization

    IF you want to do some template changes you need create subtheme in coolbaby design package.
    Default directory structure this

    + design
    + + frontend
    + + + coolbaby (package)
    + + + + default (theme in package)
    + + + + + layout/local.xml
    + + + + + template
    - - - - mysubtheme	(this subtheme you need create)
    - - - - - layout/local.xml (copy from default)
    - - - - - template (if you have to rewrite template files)

    Do not forget that you need write in System/Configuration/Design theme - mysubtheme

    For ex. you want modify view of some element on fronted. Turn on template path hints.

    How to turn on 'Template Path Hints'
    When viewing your theme, it's helpful to see which template file is being used for which part of the page. Magento has an excellent debugging tool called 'Template Path Hints'.
    1. Admin / System / Configuration.
    2. Select your store from the drop-down in the upper-left corner and wait for the page to reload. Note that you have to be on the website level or lower. The 'Template Path Hints' option will not be visible if you are at a higher level.
    3. Advanced / Developer (all the way at the bottom).
    4. Template Path Hints / Yes.
    5. Hit the orange Save Config button.

    Go to your store and reload.
    You will see path to template file. Copy this file from coolbaby/default/template to coolbaby/subtheme/template, or from base/default/template to coolbaby/subtheme/template

    How to turn off Magento's cache
    When developing a theme/package, it's helpful to not have to wait for your changes to expire the built-in cache. Here's how to disable Magento's cache so that you can see your changes right away:
    1. Admin / System / Cache Management
    2. In the Cache Control section, for the All Cache drop-down, select Disable.
    3. Click the orange Save Cache Settings button.

    Css changes you need write in file DELETE-PREFIXcustom_changes.css (here you need delete prefix and in coolbaby color setting set use custom css file enabled)

    Core files you need change only with extend tools (magento allows rewrite classes, helpers, models by extend methods)

    IF you will follow these steps you will not have problems with update theme.
    Update theme you can with simple reuploading of coolbaby files.

Theme with Demo

Magento has a sample data archive available that contains sample products and CMS pages to allow you to explore your new Magento installation without having to create everything from scratch. The sample data archive contains a dump of the Magento sample SQL database that should be imported to an empty database using your database management tool (phpMyAdmin or whatever you use) and folder with sample product images that should be copied to your Magento media folder.

These instructions assume you are in the installation phase with your Magento store and that you have not created your own products and pages. If you already have a working Magento store and database, do NOT install the sample data. Following these steps will wipe out your existing database.

When you're ready to set up your own store, you should re-install Magento without the sample data in order to start clean.

Important: The sample data must be imported before running the Magento Setup Wizard in the basic Magento installation process. (Among other things the Setup Wizard upgrades the Magento database to the Magento version being installed and the sample data, which is generic, cannot be imported after that conversion takes place.)

Download sample data you can here in section sample data.


Our megamenu has two variants - classic megamenu and advanced megamenu.

Default type of Megamenu

Example code for field 'Html block above menu':

<ul class="exclusive top"> <li><span class="icon flaticon-gift1"></span> <a href="#">Gifts exclusive</a></li> <li><span class="icon flaticon-coin11"></span> <a href="#">Offers</a></li> </ul>

Example code for field 'Html block under menu':

<ul class="exclusive bottom"> <li><span class="icon flaticon-like"></span> <a href="#">SPECIAL OFFER</a></li> <li><span class="icon flaticon-outlined3"></span> <a href="#">UP TO 50% OFF DISCOUNTS</a></li> </ul>

Example code for field 'Topmenu description':

<div class='img-fullheight'> <img class='img-responsiv' src='{{media url=wysiwyg/menu-img-right-1.png}}' alt=''></div>

Choose 1st level category and enable Advanced type of megamenu in Megamenu tab/Advanced mode - Choose Yes

Example code for field 'Topmenu description':

<a href="#"><img src="{{media url=wysiwyg/banner.jpg}}" class="img-responsive" alt=""></a>

Example code for field 'Html block above menu':

Maecenas eu enim in lorem scelerisq ue auctor. Ut non erat. Suspendisse tesque sagittis. Morbi quam. Nullam ac nisi non eros gravida venenatis. Ut eu dictum justo urna et mi. Integer dictum est vitae sem. <br /><br /><br />

Example code for field 'Html block under menu':

<div class="row col-divider"> <div class="col-xs-3"><img src="{{media url=wysiwyg/logo-light.png}}" class="img-responsive" alt=""></div> <div class="col-xs-9"> <h5>ABOUT US</h5> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eu enim in lorem scelerisque auctor. Ut non erat. Suspendisse fermentum posuere lectus. Fusce vulputate nibh egestas orci. Aliquam lectus. Morbi eget dolor ullamcorper massa pellentesque sagittis. Morbi sit amet quam labore diam nonumy. Nullam ac nisi non eros gravida venenatis. Ut eu dictum justo urna et mi. Integer dictum est vitae sem.</p> </div> </div>

Example value for field 'Static block id (with product carousel)':


Html code of static block 'man_carousel' you can find in admin/cms/static blocks - choose man_carousel

Q: I do'nt see Megamenu tab!

A: Seems like Magento system not wrote required attributes from \app\code\local\Etheme\Coolbabyconfig\sql\Coolbabyconfig_setup\mysql4-install-0.1.0.php
You need open your MySql database with PhpMyAdmin -> find table core_resource -> find line with code coolbabyconfig_setup and delete it.
Goto magento admin panel -> system ->Index Management -> Reindex all
Goto magento admin panel -> system ->Cache Management -> Flush Cache

Static Menu Items


Our theme use most popular blog extention http://www.magentocommerce.com/magento-connect/magento-wordpress-integration.html

Steps how integrate blog in theme:

  1. Install extention http://www.magentocommerce.com/magento-connect/magento-wordpress-integration.html (get code and paste it in admin/system/magento connect/magento connect manager)
  2. Download Wordpress cms from https://wordpress.org/download/
  3. Install Wordpress in corner of your site in folder wp/
  4. In Magento Admin / Wordpress / Settings / Database - configure your access
  5. In Magento Admin / Wordpress / Settings / Template - set 'Default' - 2 columns with right bar
  6. In Wordpress add new posts

Recent posts on home page

Such block you can insert on cms home page by adding shortcode in content area {{widget type="wordpress/sidebar_widget_posts" title="Recent Posts" number="10" template="wordpress/sidebar/widget/posts_home.phtml"}}

Q: How add Blog menu item in megamenu?

A: Add in cms static block cb_topmenu_megamenu_left code <dt class="item"> <a href="{{store direct_url='blog'}}" class="btn-main">Blog</a> </dt>


Default product type

Enable such type of product in Coolbaby/Layout/Product - choose type 2

Important! Such type of product view requires minimum 3 product images


Default category type

Enable Isotop listing in Coolbaby/Layout/Category/Isotop Mode - set Yes (Global option for all categories)

If you want set only some categories for example in isotop mode enable this mode only for selected categories.

Isotop category with some banners insted of products.


Codes for CMS Pages/Static blocks

Wide products carousel in 2 rows

    <section class="container content">
        <div class="subtitle right-space">
            <div><span>FEATURED PRODUCTS</span></div>
        <div class="slick-arrows">
            <button type="button" class="slick-prev" id="prevSlick" style="display: block;">Previous</button>
            <button type="button" class="slick-next" id="nextSlick" style="display: block;">Next</button>
        <div class="products-nospace-outer row1">
            {{block type="catalog/product_list" category_id="N1"  template="carousel/products_2_rows.phtml"}}
        <div class="products-nospace-outer row2">
            {{block type="catalog/product_list" category_id="N2"  template="carousel/products_2_rows.phtml"}}

, where N1,N2 - categories IDs (you can create inactive category for 1st row and inactive category for 2nd row)

Horizontal product carousel

This code outputs only new products:

{{block type="catalog/product_new" cache_lifetime="1" products_count="10" template="carousel/products_new_horizontal.phtml" block_name="New Products"}}

This code outputs any category products:

{{block type="catalog/product_list" category_id="N" block_name="Title" template="carousel/products_horizontal.phtml"}}

Vertical product carousel

This code outputs only new products:

{{block type="catalog/product_new" cache_lifetime="1" products_count="10" template="carousel/products_new_vertical.phtml" block_name="New Products"}}

This code outputs any category products:

{{block type="catalog/product_list" category_id="N" block_name="Title" template="carousel/products_vertical.phtml"}}

How to put any cms static block in cms page

{{block type="cms/block" block_id="static_block_identifier" template="cms/content.phtml"}}

, where block_id - unique static block identifier, for ex. cb_brands

Static pages

You can create page in CMS / Pages

Content for needed page you can get in template file /app/code/local/Etheme/Coolbabyconfig/Model/data_resources_pages.xml

Html Responsive Grid

Our theme uses 12-column grid system. This means that for every element you can specify width in grid: from 1 column to 12 columns. These are available grid classes

    .col-md-1, .col-sm-1, .col-lg-1, .col-xs-1
    .col-md-2, .col-sm-2, .col-lg-2, .col-xs-2
    .col-md-3, .col-sm-3, .col-lg-3, .col-xs-3
    .col-md-4, .col-sm-4, .col-lg-4, .col-xs-4
    .col-md-5, .col-sm-5, .col-lg-5, .col-xs-5
    .col-md-6, .col-sm-6, .col-lg-6, .col-xs-6
    .col-md-7, .col-sm-7, .col-lg-7, .col-xs-7
    .col-md-8, .col-sm-8, .col-lg-8, .col-xs-8
    .col-md-9, .col-sm-9, .col-lg-9, .col-xs-9
    .col-md-10, .col-sm-10, .col-lg-10, .col-xs-10
    .col-md-11, .col-sm-11, .col-lg-11, .col-xs-11
    .col-md-12, .col-sm-12, .col-lg-12, .col-xs-12

2 columns

For example, if you want to show content on your page in two equal columns, use grid classes like this:

    <div class="row">
        <div class="col-md-6 col-sm-6 col-lg-6 col-xs-6">COL-1</div>
        <div class="col-md-6 col-sm-6 col-lg-6 col-xs-6">COL-2</div>

3 columns

For example, if you want to show content on your page in three equal columns, use grid classes like this:

    <div class="row">
        <div class="col-md-4 col-sm-4 col-lg-4 col-xs-4">COL-1</div>
        <div class="col-md-4 col-sm-4 col-lg-4 col-xs-4">COL-2</div>
        <div class="col-md-4 col-sm-4 col-lg-4 col-xs-4">COL-3</div>

4 columns

For example, if you want to show content on your page in four equal columns, use grid classes like this:

    <div class="row">
        <div class="col-md-3 col-sm-3 col-lg-3 col-xs-3">COL-1</div>
        <div class="col-md-3 col-sm-3 col-lg-3 col-xs-3">COL-2</div>
        <div class="col-md-3 col-sm-3 col-lg-3 col-xs-3">COL-3</div>
        <div class="col-md-3 col-sm-3 col-lg-3 col-xs-3">COL-4</div>

    where -md -sm -lg -xs suffixes for different resolutions

more info about bootstrap grid you can read here http://getbootstrap.com/css/#grid

Coolbaby Home Page structure


Every skin has own slider content (get content in file):

  • default - \app\code\local\Etheme\Coolbabyrevolution\Model\data_slides.xml
  • art - \app\code\local\Etheme\Coolbabyrevolution\Model\data_art.xml
  • bio - \app\code\local\Etheme\Coolbabyrevolution\Model\data_bio.xml
  • kids - \app\code\local\Etheme\Coolbabyrevolution\Model\data_kids.xml
  • lingerie - \app\code\local\Etheme\Coolbabyrevolution\Model\data_lingerie.xml
  • tools - \app\code\local\Etheme\Coolbabyrevolution\Model\data_tools.xml
  • Enable Flat Categories and Products (In Magento admin, (top menu) System > Configuration, (left nav) Catalog > Catalog, (main page) Frontend. Set “Use Flat Catalog Category” and “Use Flat Catalog Product” to “Yes“.)
  • Merge CSS and JS Files (In Magento admin, (top menu) System > Configuration, (left nav) Advanced > Developer, (main page) JavaScript Settings, CSS Settings. Set “Merge Javascript” Files and “Merge CSS” Files to “Yes”.)
  • Enable Compilation (In Magento admin, (top menu) System > Tools > Compilation, click Enable. This will take all the active scripts in Magento’s core structure and bring them to the front for faster website speed. If updates, code modifications, extension installations are needed, Compilation needs to be disabled first. If not, there will be errors.)
  • Caching Magento (When all other settings are in place and the site is ready to go live, go to System > Cache Management. Select all items, set the Action dropdown to “Enable” then hit Submit)

Coming soon features

  • New Layouts/Skins
  • Update 1.4