Welcome to Welldone 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:

Welldone eCommerce is fully compatible with Magento Community Edition 1.7.0.0, 1.7.0.1, 1.7.0.2, 1.8.0.0, 1.8.1.0, 1.9.0.0, 1.9.0.1, 1.9.1.0, 1.9.2.0, 1.9.2.2



MAGENTO HELP

Welldone 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 Welldone 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 Welldone 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 - Welldone, now log out and login again to refresh access control system.


  4. Go to Welldone -> 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 welldone design package.
    Default directory structure this

    app
    + design
    + + frontend
    + + + welldone (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 welldone/default/template to welldone/subtheme/template, or from base/default/template to welldone/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 welldone 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 welldone 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. Click Tab 'Release Archive' and find Sample Data - 1.x.

Topline

Enable/Disable admin/welldone/layout 'Header Topline'



Cms/blocks Identifiers: wd_header_social_links, wd_header_topline_right_links

Header file app/design/frontend/welldone/default/template/page/html/header.phtml
Cms/blocks you can change in admin/cms/static blocks or get backup code in file app/code/local/Etheme/Welldone/etc/import/cms_blocks.xml

Header

1.Default admin/welldone/layout/Header 'Header variant - Type 1(Default)'


Header file app/design/frontend/welldone/default/template/page/html/header.phtml

2.Short admin/welldone/layout/Header 'Type 2 (Short+Hidden Menu)'


Short Header file app/design/frontend/welldone/default/template/page/html/header_type_2.phtml

3.Transparent admin/welldone/layout/Header 'Type 3 (Transparent+Slider Required)'


Transparent Header file app/design/frontend/welldone/default/template/page/html/header_type_3.phtml

4.Maximum admin/welldone/layout/Header 'Type 4 (Maximum)'


Maximum Header file app/design/frontend/welldone/default/template/page/html/header_type_4.phtml

Megamenu

Settings: admin/welldone/settings/megamenu

1.Horizontal


Cms/blocks Identifiers: wd_megamenu_links_left, wd_megamenu_title, wd_megamenu_html_right, wd_megamenu_html_top, wd_megamenu_html_btm, wd_megamenu_html_right

Cms/blocks you can change in admin/cms/static blocks or get backup code in file app/code/local/Etheme/Welldone/etc/import/cms_blocks.xml

2.Vertical

Vertical megamenu visible only In Left Column on Home page (if you use left column home page layout)


1 - This area you can edit in admin->catalog->manage categories->choose any 1st level category->choose tab Welldone Menu->Html block above menu (for Vertical Megamenu)

Example Code:

<ul>
<li><span class="icon icon-box icon--lg"></span><a href="#">GIFTS EXCLUSIVE</a></li>
<li><span class="icon icon-sales-alt icon--lg"></span><a href="#">OFFERS</a></li>
</ul>


2 - This area you can edit in admin->catalog->manage categories->choose any 1st level category->choose tab Welldone Menu->Html block under menu (for Vertical Megamenu)

Example Code:

<ul>
<li><span class="icon icon-bag icon--lg"></span><a href="#">SPECIAL OFFER</a></li>
<li><span class="icon icon-shop-label icon--lg"></span><a href="#">UP TO 50% OFF DISCOUNTS</a></li>
</ul>


3 - Megamenu Vertical Right Html

Example Code:

<img src='{{media url=wysiwyg/welldone/img-megamenu.jpg}}' alt='Megamenu Image'> <

<b>1 - This label you can add in admin->catalog->manage categories->choose any 1st level category->choose tab Welldone Menu->Category label, for ex. "Hot!"

2 - If you want just simple tree of categories set in admin->catalog->manage categories->choose any 1st level category->choose tab Welldone Navigation->Apply simple mode (shows only tree) ->yes

Sliders


All sliders can be pasted in any cms/block or cms/page, because all sliders are cms/blocks

For ex., Main slider on default layout pasted in content area as {{block type="cms/block" block_id="wd_slider"}}

You can edit/add/remove/update slides in this cms/block: Find in admin/cms/static blocks/block by indentefire wd_slider

You will see such code:

<section class="content" id="slider">
<div class="tp-banner-container">
<div class="tp-banner" >
<ul>
{{block type="cms/block" block_id="wd_slider_slide_1"}}
{{block type="cms/block" block_id="wd_slider_slide_2"}}
</ul>
</div>
<div class="scroll-to-content"> <a href="#" class="btn btn--round btn--round--lg"><span class="icon icon-arrow-down"></span></a></div>
</div>
</section>

where you can see slides cms/blocks {{block type="cms/block" block_id="wd_slider_slide_1"}} and {{block type="cms/block" block_id="wd_slider_slide_2"}}

For ex., add 3rd slide{{block type="cms/block" block_id="wd_slider_slide_3"}}, create cms/static block with identefire wd_slider_slide_3, and copy in it content (copy from wd_slider_slide_1)

Slider with banners:


Example code for such slider to paste in cms/page content area (here used default bootstrap grid html wrapper)

<div class="row">
<div class="col-md-8">
{{block type="cms/block" block_id="wd_small_slider"}}
</div>
<div class="col-md-4">
{{block type="cms/block" block_id="wd_shipping_returns_links"}}
</div>
</div>

Footer


footer file app/design/frontend/welldone/default/template/page/html/footer.phtml
Cms/blocks you can change in admin/cms/static blocks or get backup code in file app/code/local/Etheme/Welldone/etc/import/cms_blocks.xml

1 - This section you can enable/disable in admin/welldone/layout/footer/Show Toplinks yes/no

2 - This section you can enable/disable in admin/welldone/layout/footer/Show Footer Info Links yes/no

3 - This section you can enable/disable in admin/welldone/layout/footer/Show Footer Subscribe and Socials yes/no

4 - This section you can enable/disable in admin/welldone/layout/footer/Show only copyright line yes/no


1 - topLinks - default magento module app/design/frontend/welldone/default/template/page/template/links.phtml

2 - Back To Top Button - enable/disable in admin/welldone/settings/general/Show Back To Top Button yes/no

3 - cms/block wd_footer_custom_links edit in admin/cms/static blocks/find by identefire wd_footer_custom_links

4 - footer logo upload in admin/welldone/settings/general/Logo (footer) browse image

5 - cms/blocks: wd_footer_column_1_html, wd_footer_column_2_html, wd_footer_column_3_html, wd_footer_contacts

6 - newsletter subscribe - default magento module app/design/frontend/welldone/default/template/newsletter/subscribe.phtml

7 - cms/block wd_header_social_links edit in admin/cms/static blocks/find by identefire wd_header_social_links

8 - default magento copyright edit in admin/system/configuration/design/header/copyright

9 - store selector - default magento module app/design/frontend/welldone/default/template/page/switch/stores.phtml

10 - cms/block wd_footer_bottom_text edit in admin/cms/static blocks/find by identefire wd_footer_bottom_text

Product's carousels

All carousels you can add in any cms page(in content area) with shortcodes


{{block type="catalog/product_list" category_id="18" column_count="4" block_name="Featured" template="carousel/products_horizontal.phtml"}}

,where block_name=Carousel title, category_id=Category Id

You can create any Carousel types. For ex., create inactive Categories Top Rated, Bestseller, Sales, New Products and assign any products you want. Paste shortcodes to cms/home page content area to output products in carousel view.

But if you want new products automatically loaded to carousel use such shortcode
{{block type="catalog/product_new" cache_lifetime="1" column_count="4" products_count="10" template="carousel/products_new_horizontal.phtml" block_name="New Products"}}

How Set 3-4-5 products in row

Simply change column_count="3 or 4 or 5"



Vertical shortcode you can paste by changing template name in shortcode

{{block type="catalog/product_list" category_id="18" block_name="Sale" template="carousel/products_vertical.phtml"}} - assigning to inactive category

{{block type="catalog/product_list" category_id="19" block_name="New Products" template="carousel/products_vertical.phtml"}} - assigning to inactive category

{{block type="catalog/product_new" cache_lifetime="1" products_count="10" template="carousel/products_new_vertical.phtml" block_name="New Arrivals"}} - automatically loaded new products

Blog

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 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 wd_megamenu_links_left code <li> <a href="{{store url='blog'}}?___store=default"> <span class="link-name">BLOG</span> </a> </li>

Product


template file app/design/frontend/welldone/default/template/catalog/product/view.phtml

1 - cloudzoom media type. You can change it to scroll type in admin/welldone/layout/product/Media

2 - custom html block. You can add this block by adding static block identefire (for ex. wd_product_right_column_custom_html) in admin/catalog/manage products/product/choose tab Custom Tab/Product Custom Html

3 - addthis extention. Enable/disable module you can set here admin/system/sharing tool/


Also there 2 types of product tabs - Default and Sticky:



1 - default magento tabs

2 - custom tab. You can add content in admin/catalog/manage products/choose product/choose custom tab/

Category page

In top of every category you can insert any cms static block admin/catalog/manage categories/tab display settings/display mode - static block and products, CMS Block - choose static block



1 - toolbar file (ajax on/off in admin/system/ajax shop) file app/design/frontend/welldone/default/template/catalog/product/list/toolbar.phtml

2 - product thumb (all settings in admin/welldone/settings/Products) file app/design/frontend/welldone/default/template/catalog/product/list.phtml


You can set 2-8 products per row. 6-7-8 per row only in full_width mode site.

admin/welldone/layout/category/Products in row - 2 per row


admin/welldone/layout/category/Products in row - 3 per row


admin/welldone/layout/category/Products in row - 4 per row


admin/welldone/layout/category/Products in row - 5 per row


Default page

All pages content created by using html wrapper and shortcodes.

You can create you own page in admin/cms/pages (for ex. set this page as home in admin/system/configuration/web/default pages/choose your created page as home page).

Welldone has 10 predefined layouts:default, boxed, fullwidth, landing content, landing banners, landing category, left column, art catalogue, intro, lookbook.

Predefined layouts are simple pages with html wrappers and shortcodes.

Predefined layout you can choose by changing home page in admin/system/configuration/web/default pages:

  1. Welldone Home Page - Default
  2. Welldone Home Page - Art Catalogue
  3. Welldone Home Page - Landing Banners
  4. Welldone Home Page - Landing Categories
  5. Welldone Home Page - Landing Content
  6. Welldone Home Page - Intro
  7. Welldone Home Page - Left column
  8. Welldone Home Page - Lookbook

How enable Default layout:

  1. admin/system/configuration/web/default pages - choose Welldone Home Page - Default *
  2. admin/welldone/settings/site_width - default
  3. admin/welldone/layout/header variant - type 1(default)
  4. admin/welldone/layout/Header Topline - enable

* mandatory requirement

Example Content area from cms page Welldone Home Page - Default:

<!--admin/cms/static block wd_slider-->
{{block type="cms/block" block_id="wd_slider"}}
<!--shortcode products carousel (products from category 18, 4 products visible in row)-->
{{block type="catalog/product_list" category_id="18" block_name="Eyewear" template="carousel/products_horizontal.phtml" column_count="4"}}
<!--wordpress blog shortcode, visible only if wordpress fishpig module installed-->
{{widget type="wordpress/sidebar_widget_posts" title="From The Blog" number="3" template="wordpress/sidebar/widget/posts_home.phtml"}}
<!--admin/cms/static block wd_categories-->
{{block type="cms/block" block_id="wd_categories"}}
<!-- html wrapper site container (for normal blocks width) admin/cms/static blocks wd_brands and wd_banners-->
<section class="content content--fill">
<div class="container">
{{block type="cms/block" block_id="wd_brands"}}
<div class="divider"></div>
{{block type="cms/block" block_id="wd_banners"}}
</div>
</section>
<!--admin/cms/static block wd_bottom_products-->
{{block type="cms/block" block_id="wd_bottom_products"}}

For ex. last static block wd_bottom_products has next code (bootstrap 3 resposive html and shortcodes):

<section class="content">
<div class="container">
<div class="row staggered-animation-container">
<div class="col-sm-6 col-md-3 animation" data-animation="fadeInUp" data-animation-delay="0.3s">
<!--admin/cms/static block wd_new_arrivals_banner-->
{{block type="cms/block" block_id="wd_new_arrivals_banner"}}
</div>
<div class="divider divider--sm visible-xs"></div>
<div class="col-sm-6 col-md-3 animation" data-animation="fadeInUp" data-animation-delay="0.6s">
<!--admin/cms/static block wd_testimonials-->
{{block type="cms/block" block_id="wd_testimonials"}}
</div>
<div class="divider divider--sm visible-sm visible-xs"></div>
<div class="col-sm-6 col-md-3 animation" data-animation="fadeInUp" data-animation-delay="0.9s">
<!--shortcode products vertical carousel (only new products, count of products 10, title new Arrivals)-->
{{block type="catalog/product_new" cache_lifetime="1" products_count="10" template="carousel/products_new_vertical.phtml" block_name="New Arrivals"}}
</div>
<div class="divider divider--sm visible-xs"></div>
<div class="col-sm-6 col-md-3 animation" data-animation="fadeInUp" data-animation-delay="1.2s">
<!--shortcode vertical products carousel (products from category 18, title Sale)-->
{{block type="catalog/product_list" category_id="18" block_name="Sale" template="carousel/products_vertical.phtml"}}
</div>
</div>
</div>
</section>

Boxed page

How enable Boxed layout:
  • admin/welldone/settings/site_width - boxed

Fullwidth

How enable Boxed layout:
  • admin/welldone/settings/site_width - fullwidth

Landing banners

How enable Landing banners layout:
  1. admin/system/configuration/web/default pages - choose Welldone Home Page - Landing Banners *
  2. admin/welldone/settings/site_width - default
  3. admin/welldone/layout/header variant - type 2(short)
  4. admin/welldone/layout/Header Topline - disable
  5. admin/welldone/layout/Footer - Show only copyright

* mandatory requirement

Landing category

How enable Landing category layout:
  1. admin/system/configuration/web/default pages - choose Welldone Home Page - Landing Categories *
  2. admin/welldone/settings/site_width - default
  3. admin/welldone/layout/header variant - type 4(max)

* mandatory requirement

Landing content

How enable Landing content layout:
  1. admin/system/configuration/web/default pages - choose Welldone Home Page - Landing Content *
  2. admin/welldone/settings/site_width - default
  3. admin/welldone/layout/header variant - type 3(transparent)

* mandatory requirement

Left column

How enable Left column layout:
  • admin/system/configuration/web/default pages - choose Welldone Home Page - Left column *

* mandatory requirement

Art Catalogue

How enable Art Catalogue layout:
  1. admin/system/configuration/web/default pages - choose Welldone Home Page - Art Catalogue *
  2. admin/welldone/layout/header variant - type 2(short)

* mandatory requirement

Intro

How enable Intro layout:
  1. admin/system/configuration/web/default pages - choose Welldone Home Page - Intro *
  2. admin/welldone/layout/header variant - type 2(short) *
  3. admin/welldone/layout/Header Topline - disable *
  4. admin/welldone/layout/Footer - Show only copyright *

* mandatory requirement

Lookbook

How enable Intro layout:
  • admin/system/configuration/web/default pages - choose Welldone Home Page - Lookbook *

* mandatory requirement

FAQ

  • 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 8 Layouts/Skins
  • Update 1.1