Magento Theme EM0018 EM Watch Store

EM0018 – Watch Store Magento Theme EMThemes.com

Magento Theme EM0018 EM Watch

Store

Copyright © 2011 EMThemes.com. All rights reserved.




Table of Contents

Table of ContentsUsage Guide

Extension built-in supportInstall the theme to your existing MagentoInstall the full package with sample dataSub themesLatest Reviews extensionShop by Brand extensionMenu Widget extensionInstall PLH Website Chat extensionSlideshow on Homepage

Custom block shop now:Popular Brands sliderNews & Events content blockStore Information content blockTop Brands content blockPayment Methods content blockLeft bannerRight bannerShow products on homepageInstall lightbox effect on product detail page

Usage Guide

Extension built-in supportThe theme is built with extensions supported and included:

● EM Catalog Menu Widget: allow to show categories menu in a static block. http://www.magentocommerce.com/magento-connect/EMThemes.com/extension/5163/em_catalogmenuwidget

● EM Brand: allow to show “Shop by Brands”. Download EM_Brandproduct.zip included in your purchase.

● Morningtime_LatestReviews: Show latest reviews. Download from magento connect, Key: magento-community/Morningtime_LatestReviews


http://www.google.com/url?q=http%3A%2F%2Fwww.magentocommerce.com%2Fmagento-connect%2FEMThemes.com%2Fextension%2F5163%2Fem_catalogmenuwidget&sa=D&sntz=1&usg=AFQjCNEdhmslBgNW6wXiezW1I3otkYCoQA
























● Provide Web Chat: allow live chat. Download from http://providelivehelp.com/en/3rd-party● Social Bookmarking: show social bookmarking icons. Download from magento connect: http://

www.magentocommerce.com/magento-connect/_Fluxe/extension/2333/magento-social-bookmarking● Product Bestseller module: Show bestselling products. Download ActiveCodeline_Bestseller.zip

included in your purchase. If you install the full demo site package, all extension are included, no need to install each one by hand.

Install the theme to your existing MagentoThis guide will show you how to install the theme to your existing magento theme.Download em0018-theme-package.zip and extract to a folder such as em0018-theme-package/, if your Magento site locates in public_html/, you should copy:

● em0018-theme-package/app/design/frontend/em0018 to public_html/app/design/frontend/em0018

● em0018-theme-package/skin/frontend/em0018 to public_html/skin/frontend/em0018Now login to the backend, go to System > Configuration, click on Design tab, set Current Package Name to em0018. Save it and we are done.

Note: Make sure to clean cache if it is enabled. To check it go to System > Cache Management. Click Flush Magento Cache.

Install the full package with sample dataIf you’ve just started building your Magento site from the scratch, we recommend following this guide to install the entire site comes with sample data.Download em0018-full-package.zip and extract all contents to your public_html/ folder.Find sample-database.sql and import the sql file your database.Copy public_html/app/etc/local.xml.default to public_html/app/etc/local.xml and configure this file:<connection> <host><![CDATA[localhost]]></host> <username><![CDATA[dbuser]]></username> <password><![CDATA[dbpass]]></password> <dbname><![CDATA[dbname]]></dbname> <active>1</active></connection>Where localhost is your database server, dbuser is your database username, dbpass is your database password and dbname is your database name.Now you can access to the site from your web browser to continue installing Magento as usual.


http://www.google.com/url?q=http%3A%2F%2Fprovidelivehelp.com%2Fen%2F3rd-party&sa=D&sntz=1&usg=AFQjCNGDVA8xxXRUFtkaG7P4LcEsD9Z-dg











http://www.google.com/url?q=http%3A%2F%2Fwww.magentocommerce.com%2Fmagento-connect%2F_Fluxe%2Fextension%2F2333%2Fmagento-social-bookmarking&sa=D&sntz=1&usg=AFQjCNGVQCgqaTVdRuK0bWIz2f1dTLsQYA























After the installation completed, your Magento site should look exactly like our demo’s.Default admin account:● Username: admin● Password: demo

Sub themesThis magento theme comes with 3 sub themes (sub colors): default, brown and pink.To apply the sub theme, go to System > Configuration, at Design tab, enter the sub theme’s name into Default field.

Latest Reviews extension

Latest Reviews showed up on category page.Install the extension from Magento Connect.

● Key: magento-community/Morningtime_LatestReviewsConfigure this extension from: System > Configuration > Morning Time > Latest Review.

Shop by Brand extension



Download and extract EM_brandproduct.zip into your Magento root folder.

Menu Widget extension

Install EM Catalog Menu Widget extension from Magento Connect: http://www.magentocommerce.com/magento-connect/EMThemes.com/extension/5163/em_catalogmenuwidgetThis menu is loaded from a static block:

● Identifier: mainmenu ● Content:

<ul id="nav"> <li class="level0 level-top first parent"><a href="#">Shop By Brand</a> <ul id="brand" class="level0"> <li> {{block type="brandproduct/brand" name="brand.list.widget" template="brandproduct/brand_list.phtml" ul_class="root" level_class="1"

























ul_class="level0" none_ul_root="1" height_column="11"}}</li> </ul> </li> {{widget type="catalogmenuwidget/catalogmenu" none_li_last_class="0" none_ul_root="1" none_li_first_class="1" level_class="0" category="3" template="em_catalogmenuwidget/menu.phtml"}}</ul> You should create a static block with same identifer and content if it doesn’t exist.Notice the text: {{block type=”brandproduct/brand” …}} it loads the brand menu as the first item.The text {{widget type=”catalogmenuwidget/catalogmenu” …}} it loads all categories as the rest items.

Install PLH Website Chat extensionDownload and install the Live Chat extension from:http://providelivehelp.com/en/3rd-partyFollow the instruction at http://providelivehelp.com/en/3rd-party/magento to install the module to your magento store. After installed, You’ll see the chat button appears on the header:

Log into admin, go to System > Configuration. Choose Live Support Chat Settings tab. If you have had account on provide live help server, click Customer Portal button to login to your account page on provide live help ,copy html for chat button and paste it to Chat Button HTML code field. If not, click Register button to register an account.

Slideshow on Homepage


http://www.google.com/url?q=http%3A%2F%2Fprovidelivehelp.com%2Fen%2F3rd-party%2Fmagento&sa=D&sntz=1&usg=AFQjCNEf0RkClEpabGdLpJB92GysjEDiKg














Create or edit a static block:● Identifier: slideshow● Content:

<ul><li> <img src="{{skin url="images/media/slideshow/1.png"}}" alt="" /><p><img src="{{skin url="images/logo_banner.png"}}" alt="" /> <br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit, nunc in semper tincidunt, enim orci scelerisque turpis, a condimentum augue nunc id mi.</p></li><li> <img src="{{skin url="images/media/slideshow/2.png"}}" alt="" /><p><img src="{{skin url="images/logo_banner.png"}}" alt="" /> <br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit, nunc in semper tincidunt, enim orci scelerisque turpis, a condimentum augue nunc id mi.</p></li><li> <img src="{{skin url="images/media/slideshow/1.png"}}" alt="" /><p><img src="{{skin url="images/logo_banner.png"}}" alt="" /> <br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit, nunc in semper tincidunt, enim orci scelerisque turpis, a condimentum augue nunc id mi.</p></li><li> <img src="{{skin url="images/media/slideshow/2.png"}}" alt="" /><p><img src="{{skin url="images/logo_banner.png"}}" alt="" /> <br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit, nunc in semper tincidunt, enim orci scelerisque turpis, a condimentum augue nunc id mi.</p></li></ul> The slideshow images and slideshow logo can be found in skin/frontend/em0018/default/images/media/

slideshow/ and skin/frontend/em0018/default/images/logo_banner.png



Custom block shop now:

To show this block, create or edit a static block:● Identifier: slideshow_shopnow● Content:

<div class="cls_btn"><span><a href="#">shop now</a></span></div> The background image locates in skin/frontend/em0018/default/images/sale.gif

Popular Brands slider

To show this block, edit or create a static block:● Identifier: popular_brands_slider● Content:

<div class="popular">Popular brands</div><div class="popular-slideshow"><ul><li><a href="#"><img src="{{skin url='images/media/slideshow/casio.png'}}" alt="Casio" /></a></li><li><a href="#"><img src="{{skin url='images/media/slideshow/diesel.png'}}" alt="Diesel" /></a></li><li><a href="#"><img src="{{skin url='images/media/slideshow/zen.png'}}" alt="Citizen" /></a></li><li><a href="#"><img src="{{skin url='images/media/slideshow/dkny.png'}}" alt="Dkny" /></a></li><li><a href="#"><img src="{{skin url='images/media/slideshow/seiko.png'}}" alt="Seiko" /></a></li><li><a href="#"><img src="{{skin url='images/media/slideshow/gucci.png'}}" alt="Gucci" /></a></li><li><a href="#"><img src="{{skin url='images/media/slideshow/casio.png'}}" alt="Casio" /></a></li><li><a href="#"><img src="{{skin url='images/media/slideshow/diesel.png'}}" alt="Diesel" /></a></li>



<li><a href="#"><img src="{{skin url='images/media/slideshow/seiko.png'}}" alt="Seiko" /></a></li></ul></div>

Add slideshow & popular brands on home pageEdit the homepage design(CMS > Page > Home), add design below:Layout : 1columnLayout Update XML : <reference name="slideshow"><block type="cms/block" name="cms_slideshow"><action method="setBlockId"><block_id>popular_brands_slider</block_id></action></block></reference> <reference name="slideshow2"><block type="cms/block" name="cms_slideshow2"><action method="setBlockId"><block_id>slideshow</block_id></action></block><block type="cms/block" name="slideshow.half"> <action method="setBlockId"><block_id>slideshow_shopnow</block_id></action>

</block></reference>

News & Events content block

To show is block, create or edit a static block:● Identifer: news_and_events● Content:

<ul><li><span>News & Events</span></li><li><p>Cras molestie erat eget tristique tincidunt neque turpis consectetur libero...</p></li></ul>

Store Information content block



To show is block, create or edit a static block:● Identifer: store_info● Content:

<ul class="first"> <li> <span>Store Information</span> </li> <li> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut tortor sed mi bibendum lobortis vitae vel diam. Morbi mollis mauris id arcu dignissim sollicitudin...</p> </li> <li class="last"> <ul> <li> <ul> <li> <span>Store localtion </span></li> <li>6689 lorem ipsum dolor consectetur adipiscing NN 12345</li> <li class="seemap"><a>See map</a></li> </ul> </li> <li> <ul> <li> <span>Follow us on </span></li> <li>{{block type="socialbookmarking/bookmarks" name="bookmarks" template="bookmarks/bookmarks.phtml"}} </li> </ul> </li> </ul> </li></ul> You should install the extension Social Network in order to show the bookmark icons. Install the extension from: http://www.magentocommerce.com/magento-connect/_Fluxe/extension/2333/magento-social-bookmarking

























To manage the social icons, go to backend > CMS > Social Bookmarking

Top Brands content block

To show is block, create or edit a static block:● Identifer: top_brands● Content:

<ul class="brand-footer"> <li> <span>Top Brands</span> </li> <li> <ul> <li> <span><a title="AMD" href="your_link">Movado Watches</a></span> </li> <li> <span><a title="Acco" href="your_link">Hamilton Watches</a> </span> </li> <li> <span><a title="Acer" href="your_link">Omega Watches</a> </span> </li> <li> <span><a title="Aiwa" href="your_link">Bulova Watches</a> </span> </li> <li> <span><a title="Anashria" href="your_link">Golana Swiss Watches</a> </span> </li>



<li> <span><a title="Apple" href="your_link">Breitling Watches</a> </span> </li> <li> <span><a title="Apple" href="your_link">Gucci Watches</a> </span> </li> </ul> <ul> <li> <span><a title="AMD" href="your_link">Ebel Watches</a> </span> </li> <li> <span><a title="Acco" href="your_link">ESQ by Movado Watches</a> </span> </li> <li> <span><a title="Acer" href="your_link">Tag Heuer Watches</a> </span> </li> <li> <span><a title="Aiwa" href="your_link">Concord Watches</a> </span> </li> <li> <span><a title="Anashria" href="your_link">Cartier Watches</a> </span> </li> <li> <span><a title="Anashria" href="your_link">Dior Watches</a> </span> </li> <li> <span><a class="link-more" title="Apple" href="your_link">+ More</a> </span> </li> </ul> </li></ul>

Payment Methods content block

To show is block, create or edit a static block:● Identifer: payment_methods● Content:

<ul class="last"><li class="first"><span>Payment Method</span></li><li><img src="{{skin url='images/paupal.gif'}}" alt="" /></li><li><img src="{{skin url='images/free_shipping.jpg'}}" alt="" /></li><li class="last">Secured by <img src="{{skin url='images/secured.gif'}}" alt="" /></li></ul> The images locate in skin/frontend/em0018/default/images/

Left banner



To show is block, create or edit a static block:

● Identifer: left_callout ● Content:

<div class="block block-banner"><div class="block-content"><a title="Our customer service is available 24/7. Call us at (555) 555-0123." href="{{store direct_url='checkout/cart/'}}"> <img src="{{skin url='images/media/col_left_callout.jpg'}}" alt="Our customer service is available 24/7. Call us at (555) 555-0123." /> </a></div></div> The image locates in skin/frontend/em0018/default/images/media/col_left_callout.jpg

Right banner

To show is block, create or edit a static block:● Identifer: right_callout● Content:



<div class="block block-banner"><div class="block-content"><a title="Our customer service is available 24/7. Call us at (555) 555-0123." href="{{store direct_url='checkout/cart/'}}"> <img src="{{skin url='images/media/col_right_callout.jpg'}}" alt="Our customer service is available 24/7. Call us at (555) 555-0123." /> </a></div></div> The image locates in skin/frontend/em0018/default/images/media/col_right_callout.jpg

Show products on homepage

Edit the homepage content (CMS > Page > Home), add content below:<p>{{widget type="catalog/product_widget_new" products_count="5" column_count="5" show_title="true" show_addtolinks="false" template="catalog/product/widget/new/content/new_grid.phtml"}}</p> <p>{{block type="bestseller/bestseller" name="bestseller" template="activecodeline/bestseller.phtml" column_count="5" products_count="5"



title="Best Selling"}}</p> The first line {{widget …}} shows New Arrivals products block. The second line {{block type=”bestseller/bestseller” …}} shows Bestselling product block. You must install the Bestseller module in order to show bestselling product. Install as below: Download the package ActiveCodeline_Bestseller.zip extract all files your magento root folder.

Install lightbox effect on product detail pageNote: the lightbox package is sold separately. Step 1: Download and extract em0018-lightbox.zip to em0018-lightbox/.You should see these files in the directory:

● app/design/frontend/em0018/default/template/catalog/product/view/media_lightbox.phtml● app/design/frontend/em0018/default/template/page/html/head.phtml● skin/frontend/em0018/default/css/lightbox.css● skin/frontend/em0018/default/js/lightbox.js● skin/frontend/em0018/default/images/bullet.gif● skin/frontend/em0018/default/images/close.gif● skin/frontend/em0018/default/images/closelabel.gif● skin/frontend/em0018/default/images/loading.gif● skin/frontend/em0018/default/images/nextlabel.gif● skin/frontend/em0018/default/images/prevlabel.gif

Step 2: Copy all files from em0018-lightbox/* to your web public directory (public_html, www, or htdocs...).Step 3: Edit app/design/frontend/em0018/default/layout/catalog.xml. Search and replace media.phtml by media_lightbox.phtml.Edit app/design/frontend/em0018/default/layout/page.xml. Find:<block type="page/html_head" name="head" as="head">...</block>Insert the code below before </block><action method="addItem"> <type>skin_js</type><name>js/lightbox.js</name></action><action method="addItem"><type>skin_css</type><name>css/lightbox.css</name></action>The complete code will look like:<block type="page/html_head" name="head" as="head"> ... <action method="addItem"><type>skin_js</type><name>js/lightbox.js</name></action> <action method="addItem"><type>skin_css</type><name>css/lightbox.css</name></action>



</block>


Documents

Magento Theme EM0018 EM Watch Store