Thank you for purchasing

Onlinesale Theme Documentation

This document covers the installation and use of this theme and reveals answers to common problems and issues - I encourage you to read this document thoroughly if you are experiencing any difficulties.

Disclaimer

We offer limited support. We only provide support for our themes and their core features and functionality. We cannot guarantee our themes will function with all third party components, plugins, web browsers, and server environments. If you plan on adding numerous plugins or scripts to this theme, please note we can not facilitate support of any conflicts they might cause with the default related template functionality. This item is presented AS IS.

Fresh install


To install Onlinesale theme you need to take a few steps:
  1. In case you use Magento compilation feature, please open menu System -> Tools -> Compilation. In Compilation page, press Disable button.
  2. Do not skip this step
    Log out from magento admin panel ( if you logged in ). This step is required to reset magento access control cache
  3. Using your FTP client go to your magento root directory and delete all files inside var/cache directory. Do NOT delete var/cache folder
  4. Delete all cookies for your store domain in your browser.
  5. IMPORTANT!!! BACKUP database and files
  6. Upload content of Theme/[your version] folder to your magento root. Onlinesale theme do not overwrite any files, just add the theme
  7. Clear and disable magento cache - Caching System. It is recommended to not enable cache until you finish store setup
  8. Activate Onlinesale theme - Activate theme
  9. If you see some elements of Onlinesale and some elements of other design - try to check following:
    - all theme files upload correctly
    - theme files has same permission as other magento files
    - check that design is not overrided ( System > Design )
    - check that design is not overrided for cms home page
    - check that design is not overrided in configuration ( System > configuration > design ). It could be overrided on lower configuration scope ( you can switch scope it top left corner )
  10. Please check our ticksy if you have any questions

Video guide


Theme Setting


Go to System - Configuration - Design

Configure the new template

Configure the new color skin

All color skins

Please do not forget to off or update the cache

All modules are located in the left panel System > Configuration > Onlinesale

Easy Tabs

With this module, you can create new tabs on the product page as well as customize existing

Enable appropriate tabs

Possible to set up Custom tabs

You can add Additional CMS tabs

Category Sidebar Navigation

Enable module and specify the position

Slider

Enable slider

Add news slide

You can specify a position in the field

X position : 300
Y position : 400

And Type: expandLeft

Type expandDown only position bottom

 

Html code that we use on a demo

<h3>AWESOME FURNITURE</h3><h5><strong>50%</strong> OFF<br> TRENDY <strong>DESIGNS</strong></h5>
Blog

Create new articles and categories

Create statics block and connect the new blog widget



Go to Catalog - Categories and include static block


jQuery LightBoxes

Specify the width and height of your images

The height of your image should be proportional to the width


Lightbox Type recommended prettyPhoto

Quick View

In module settings also specify the width and height of images in the catalog

Statick block


Static blocks are the basic blocks of your store, most of the information is edited using them. You can view the entire list of statics blocks for template Onlinesale

go to CMS > Statick Block and creat new block

When you insert the html code switch to Show / Hide editor

Identifier: footer-blocks

Footer links

<div class="block">
<h4>Customer Service</h4>
<div class="block_content">
<ul>
<li class="first_item"><a title="Specials" href="http://templines.com/demo/magento/onlinesale/index.php/">Specials</a></li>
<li class="item"><a title="New products" href="http://templines.com/demo/magento/onlinesale/index.php/">New products</a></li>
<li class="item"><a title="Best sellers" href="http://templines.com/demo/magento/onlinesale/index.php/">Best sellers</a></li>
<li class="item"><a title="Our stores" href="http://templines.com/demo/magento/onlinesale/index.php/">Our stores</a></li>
<li class="item"><a title="Contact us" href="http://templines.com/demo/magento/onlinesale/index.php/">Contact us</a></li>
</ul>
</div>
</div>
<div class="block">
<h4>Information</h4>
<div class="block_content">
<ul>
<li class="item"><a title="Delivery" href="http://templines.com/demo/magento/onlinesale/index.php/">Delivery</a></li>
<li class="item"><a title="Legal Notice" href="http://templines.com/demo/magento/onlinesale/index.php/">Legal Notice</a></li>
<li class="item"><a title="About us" href="http://templines.com/demo/magento/onlinesale/index.php/">About us</a></li>
<li><a title="Sitemap" href="http://templines.com/demo/magento/onlinesale/index.php/">Sitemap</a></li>
</ul>
</div>
</div>
<div class="block">
<h4>My account</h4>
<div class="block_content">
<ul>
<li><a href="http://templines.com/demo/magento/onlinesale/index.php/">My orders</a></li>
<li><a href="http://templines.com/demo/magento/onlinesale/index.php/">My credit slips</a></li>
<li><a href="http://templines.com/demo/magento/onlinesale/index.php/">My addresses</a></li>
<li><a href="http://templines.com/demo/magento/onlinesale/index.php/">My personal info</a></li>
</ul>
</div>
</div>
<div class="block last">
<h4>Contact us</h4>
<div class="block_content">
<p><a href="mailto:prestazilla@gmail.com">prestazilla@gmail.com</a> <br /> +38649 123 456 789 00<br /> Lorem ipsum address street no 24 b41</p>
</div>
</div>


Identifier: home-category

Pictures of categories on the Home page

<div class="category-list">
<ul class="products-grid first ">
<li class="fadeIn animated"><span class="overlay first-bg"> </span>
<h3><a href="#">Category Name 01</a></h3>
<a href="#"> <img src="{{media url="wysiwyg/cat.jpg"}}" alt="" width="369" height="133" /></a></li>
<li class="fadeIn animated"><span class="overlay first-bg"> </span>
<h3><a href="#">Category Name 02</a></h3>
<a href="#"> <img src="{{media url="wysiwyg/cat.jpg"}}" alt="" width="369" height="133" /></a></li>
<li class="fadeIn animated last"><span class="overlay first-bg"> </span>
<h3><a href="#">Category Name 03</a></h3>
<a href="#"> <img src="{{media url="wysiwyg/cat.jpg"}}" alt="" width="369" height="133" /></a></li>
</ul>
</div>

Identifier: promo-home

Promo banners

<ul>
<li class="first-bg"><a href="/"><img src="{{media url="wysiwyg/promo1.png"}}" alt="" /></a></li>
<li class="first-bg"><a href="/"><img src="{{media url="wysiwyg/promo2.png"}}" alt="" /></a></li>
<li class="first-bg last"><a href="/"><img src="{{media url="wysiwyg/promo3.png"}}" alt="" /></a></li>
</ul>

Identifier: title-bg

Slides in titles

<ul>
<li><a href="/"><img src="{{media url="wysiwyg/page-title-bg.jpg"}}" alt="" /></a></li>
<li><a href="/"><img src="{{media url="wysiwyg/page-title-bg.jpg"}}" alt="" /></a></li>
<li><a href="/"><img src="{{media url="wysiwyg/page-title-bg.jpg"}}" alt="" /></a></li>
</ul>

Identifier: footer-carousel

Brands in carousel

<ul class="products-grid first odd bxslider2">
<li class="item first fadeIn animated"><a href="#"><img src="{{media url="wysiwyg/5.jpg"}}" alt="" /></a></li>
<li class="item first fadeIn animated"><a href="#"><img src="{{media url="wysiwyg/6.jpg"}}" alt="" /></a></li>
<li class="item first fadeIn animated"><a href="#"><img src="{{media url="wysiwyg/7.jpg"}}" alt="" /></a></li>
<li class="item first fadeIn animated"><a href="#"><img src="{{media url="wysiwyg/8.jpg"}}" alt="" /></a></li>
<li class="item first fadeIn animated"><a href="#"><img src="{{media url="wysiwyg/5.jpg"}}" alt="" /></a></li>
<li class="item first fadeIn animated"><a href="#"><img src="{{media url="wysiwyg/6.jpg"}}" alt="" /></a></li>
<li class="item first fadeIn animated"><a href="#"><img src="{{media url="wysiwyg/7.jpg"}}" alt="" /></a></li>
<li class="item first fadeIn animated"><a href="#"><img src="{{media url="wysiwyg/8.jpg"}}" alt="" /></a></li>
<li class="item first fadeIn animated"><a href="#"><img src="{{media url="wysiwyg/5.jpg"}}" alt="" /></a></li>
<li class="item first fadeIn animated"><a href="#"><img src="{{media url="wysiwyg/6.jpg"}}" alt="" /></a></li>
<li class="item first fadeIn animated"><a href="#"><img src="{{media url="wysiwyg/7.jpg"}}" alt="" /></a></li>
<li class="item first fadeIn animated"><a href="#"><img src="{{media url="wysiwyg/8.jpg"}}" alt="" /></a></li>
</ul>

Identifier: social-footer

Font Awesome Icons

<p><a href="#"> <em class="icon-facebook"><span>icon</span></em></a> <a href="#"><em class="icon-twitter"><span>icon</span></em></a> <a href="#"><em class="icon-rss"><span>icon</span></em></a></p>

Identifier: Copyright

© 2013 Onlinesale , All Rights Reserved

Home page blocks


Go to CMS > Pages > Home pages and add new code

{{block type="core/template" name="home-category.phtml" as="home-page" template="page/html/home-category.phtml"}}
{{block type="core/template" name="new-product.phtml" as="home-page" template="page/html/new-product.phtml"}}
{{block type="core/template" name="promo-home.phtml" as="home-page" template="page/html/promo-home.phtml"}}
{{block type="core/template" name="footer-carousel.phtml" as="footer-carousel" template="page/html/footer-carousel.phtml"}}

New, Sale, Bestseller block code


{{block type="core/template" name="new-product.phtml" as="home-page" template="page/html/new-product.phtml"}}
{{block type="core/template" name="best-product.phtml" as="home-page" template="page/html/best-product.phtml"}}
{{block type="core/template" name="sale-product.phtml" as="home-page" template="page/html/sale-product.phtml"}}

Select 1 column design

 

 

Congratulations!!! Onlinesale template to ready !

Now all you have to add your categories and products

Now do not forget to enable cache

Have a good sales with Onlinesale!!!

Credits


jQuery
Bootstrap v2.3.2
960grid
jQuery BxSlider http://bxslider.com/
Icon fonts used http://fortawesome.github.io/Font-Awesome/
Iview slider http://iprodev.com/2012/07/iview/
Free magento extension:Ahead Works - Blog, MageBass - LightBox, Creativecommons - EasyTabs
The images used in the preview are not part of the actual download due to licensing restrictions