Top Banner
EM0006 - Magento Theme for Computer store Magento Theme EM0006 for Computer store Copyright © 2010 EMThemes. All rights reserved.
15
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Https Www.emthemes

EM0006 - Magento Theme for Computer store

Magento Theme EM0006 forComputer store

Copyright © 2010 EMThemes. All rights reserved.

Page 2: Https Www.emthemes

EM0006 - Magento Theme for Computer store

Table of contendsTable of contendsIntroductionFeatures

General FeaturesFlexible layoutsMain MenuStandard BlocksCategory Menu and Category Layered Menu.HTML blocks editable in CMSBanners & LogoModule categories slideshowHomepage Featured Products:

Usage GuideInstall the theme to your existing MagentoInstall the full package with sample dataUsing SlideshowChange Extra Links In FooterChange Free Shipping textDisplay payment accept iconsChange Footer linksChange Top BannerChange Logo CustimizeHomepage Featured ProductsInstall lightbox effect on product detail page

Copyright © 2010 EMThemes. All rights reserved.

Page 3: Https Www.emthemes

EM0006 - Magento Theme for Computer store

IntroductionThis Magento theme for Computer store is designed clean and high-tech. It shows off computer products cleanly, well design and attracts customers with the most powerful and unique products. The slideshow is amazing!

Features

General Features● Div/Tabless HTML mark-up.● XHTML 1.0 Strict valid.● CSS 2.0 and CSS 3.0 valid.● Cross-browser support. Compatible with all major browsers such as IE7+, Firefox 3, Safari 5, Chrome 5, Opera 10.● Prototype-based Javascript .● Support Magento CE version 1.4.0 and higher.● SEO (Search Engine Optimization)-orient in design and development, fast loading.● Full PSD files supplied, easy to edit.● Well-structured and commented HTML & CSS for easy customization.

Flexible layoutsSupport:● 1 column layout.● 2 columns with right sidebar layout.● 3 columns layout.

Main MenuHorizontal menu with drop-down submenus, support 3 submenu level.

Standard BlocksAll built-in Magento Blocks are designed and developed with every detail to create unique and perfect theme.

Category Menu and Category Layered Menu.

Copyright © 2010 EMThemes. All rights reserved.

Page 4: Https Www.emthemes

EM0006 - Magento Theme for Computer store

Category menu and category layered menu are designed to look elegant and ful-filled supports all layered items such as Category, Price, Color, and all other custom attributes...

HTML blocks editable in CMSSome area such as Change Extra Links, Free Shipping are editable in Magento CMS Static Blocks.

Banners & LogoAll banners and logo are designed by our artists to promote and decorate nicely on the products selling and targeted business.

Module categories slideshow

Display categories slideshow

Homepage Featured Products:Selected producst are displayed on homepage

Usage Guide

Install the theme to your existing MagentoIf you already had the magento store and want to apply the theme to your store, follow the

Copyright © 2010 EMThemes. All rights reserved.

Page 5: Https Www.emthemes

EM0006 - Magento Theme for Computer store

instruction below.Extract file em0006-full-package.zip and copy all files to your magento folder.The zip file contains:

● app/● skin/● install.lib.php● install-em0006.phps

After copied all files to your magento folder, rename file install-em0006.phps to install-em0006.php.Edit file install-em0006.php source code, find the section: ################################################################################### CONFIGURE HERE################################################################################ $dbhost = "localhost"; # Database host name$dbname = ""; # Database name$dbuser = ""; # Database username$dbpass = ""; # Database password$dbport = ""; # Database port$adminuser = 'admin'; // magento admin username$adminpass = ''; // magento admin password$prefix = ""; // Database prefix tables Enter all required info in order to run the install script:

● $dbhost is database hostname● $dbname is database name● $dbuser is database username● $dbpass is database password● $dbport is database port, usually you can leave it blank.● $adminuser is your magento admin username● $adminpass is your magento admin password● $prefix is prefix of tables in database. if table do not have prefix , you can leave it blank.

For example: name table pre_admin_assert , $prefix = "pre_"; Open this file on your web browser to install the theme to your Magento store.http://www.your-domain.com/install-em0006.phpThis script will generate all sample blocks and modify the homepage, set the store theme and

Copyright © 2010 EMThemes. All rights reserved.

Page 6: Https Www.emthemes

EM0006 - Magento Theme for Computer store

install all required extensions.After Site installed . You remove file install-em0006.php

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 em0006-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.After the installation completed, your Magento site should look exactly like our demo’s.Default admin account:

● Username: admin● Password: demo

Using Slideshow

Things you can change: ● The text over the image, i.e.Image name product , Business Destop PC, Combines a solid-

Copyright © 2010 EMThemes. All rights reserved.

Page 7: Https Www.emthemes

EM0006 - Magento Theme for Computer store

state hard drive, a smaller ...● The heading banner for every slideshow column.● You can custom html structure in slideshow In the backend, go to CMS -> Static Blocks

You will see a block with Identifier named slideshow. Now click on slideshow to edit. Toggle toplain text edit mode by click on the button “Show/Hide Editor” <div class="main-banner"><div id="my-glider"><div class="scroller"><div class="content"><div id="section1" class="section"><div class="banned_slide"><img src="{{skin url='images/pic-1.png}}" alt="" align="right" /><div class="banned_slide_content"><img src="{{skin url='images/proname.png}}" alt="" /><p class="title">Business Destop PC</p><div class="cls_desc">Combines a solid-state hard drive, a smaller footprint and energy-efficient features with a long lifecycle and image stability for up to 15 months. Show here with an optional integrated work center...<div class="cls_btn"><a href="#"><img src="{{skin url='images/ btn_prodetail.png}}" border="0" alt="" /></a> <a href="#"><img src="{{skin url='images/btn_buynow.png}}" border="0" alt=""/></a></div></div><div class="cls_current"><img src="{{skin url='images/i_current1.jpg}}" alt="" / ></div></div>

Copyright © 2010 EMThemes. All rights reserved.

Page 8: Https Www.emthemes

EM0006 - Magento Theme for Computer store

</div></div><div id="section2" class="section"><div class="banned_slide"><img src="{{skin url='images/pic-2.png}}" alt="" align="right" /><div class="banned_slide_content"><img src="{{skin url='images/proname.png}}" alt="" /><p class="title">Business Destop PC</p><div class="cls_desc">Combines a solid-state hard drive, a smaller footprint and energy-efficient features with a long lifecycle and image stability for up to 15 months. Show here with an optional integrated work center...<div class="cls_btn"><a href="#"><img src="{{skin url='images/btn_prodetail.png}}" border="0" alt="" /></a> <a href="#"><img src="{{skin url='images/btn_buynow.png}}" border="0" alt="" /></a></div></div><div class="cls_current"><img src="{{skin url='images/i_current2.jpg}}" alt="" / ></div></div></div></div><div id="section3" class="section"><div class="banned_slide"><img src="{{skin url='images/pic-3.png}}" alt="" align="right" /><div class="banned_slide_content"><img src="{{skin url='images/proname.png}}"alt="" /><p class="title">Business Destop PC</p><div class="cls_desc">Combines a solid-state hard drive, a smaller footprint and energy-efficient features with a long lifecycle and image stability for up to 15 months. Show here with an optional integrated work center...<div class="cls_btn"><a href="#"><img src="{{skin url='images/btn_prodetail.png}}" border="0" alt="" /></a> <a href="#"><img src="{{skin url='images/btn_buynow.png}}" border="0" alt="" /></a></div></div><div class="cls_current"><img src="{{skin url='images/i_current3.jpg}}" alt="" / ></div></div></div></div><div id="section4" class="section"><div class="banned_slide"><img src="{{skin url='images/pic-4.png}}"

Copyright © 2010 EMThemes. All rights reserved.

Page 9: Https Www.emthemes

EM0006 - Magento Theme for Computer store

alt="" align="right" /><div class="banned_slide_content"><img src="{{skin url='images/proname.png}}" alt="" /><p class="title">Business Destop PC</p><div class="cls_desc">Combines a solid-state hard drive, a smaller footprint and energy-efficient features with a long lifecycle and image stability for up to 15 months. Show here with an optional integrated work center...<div class="cls_btn"><a href="#"><img src="{{skin url='images/btn_prodetail.png}}" border="0" alt="" /></a> <a href="#"><img src="{{skinurl='images/btn_buynow.png}}" border="0" alt="" /></a></div></div><div class="cls_current"><img src="{{skin url='images/i_current4.jpg}}" alt="" / ></div></div></div></div></div></div></div></div> As you see, each slide is put in a <div id="section(n)" class="section"></div>You can change or custom html each slide if you want.

Change Extra Links In Footer

This theme comes with an extra menu. You can edit from the backend -> CMS -> Static Blocks, edit Extra Links: <ul class="cms_footer_links"><li><a href="{{store direct_url="about-magento-demo-store"}}">About Us</a></li><li><a href="{{store direct_url="customer-service"}}">Customer Service</a></li></ul>

Copyright © 2010 EMThemes. All rights reserved.

Page 10: Https Www.emthemes

EM0006 - Magento Theme for Computer store

Change Free Shipping text

To change this promotion text, go to the backend CMS -> Static Blocks, edit col_ship: <p><img style="vertical-align: middle;" src="{{skin url='images/icons/ i_ship.gif}}" alt="" /><label> free shipping on order over $799.00</label></p>

Display payment accept icons

To change this promotion text, go to the backend CMS -> Static Blocks, edit payment_footerAdd:<img src="{{skin url='images/payment_accept.gif}}" alt=""

width="86" height="14" /><div><img class="hand" title="PayPal" src="{{skin url='images/icon_paypal.gif}}" alt="" width="50" height="30" /><img class="hand" title="VISA"src="{{skin url='images/icon_visa.gif}}"alt="" width="50" height="30" /><img class="hand" title="MasterCard" src="{{skin url='images/icon_mastercard.gif}}" alt="" width="50" height="30" /><img class="hand" title="Cirrus" src="{{skin url='images/icon_cirrus.gif}}" alt="" width="50" height="30" /><img class="hand" title="AmericanExpress"

Copyright © 2010 EMThemes. All rights reserved.

Page 11: Https Www.emthemes

EM0006 - Magento Theme for Computer store

src="{{skin url='images/icon_americanexpress.gif}} alt="" width="50" height="30" /></div>

Change Footer links

This footer links can be changed in the backend. Go to CMS -> Static Blocks, edit cms_footer_link_top or create new if it doesn’t exist:<div class="col col-1"><ul><li><a href="#">Careers</a></li><li><a href="#">Investor Relations</a></li></ul></div><div class="col col-1"><ul><li><a href="#">Nordstrom Rack</a></li><li><a href="#">Store Locations &amp; Events</a></li></ul></div><div class="col col-1"><ul><li><a href="#">Check Order Status</a></li><li><a href="#">Returns &amp; Exchanges</a></li></ul></div><div class="col col-1"><ul><li><a href="#">Shipping Options &amp; Charges</a></li><li><a href="#">Product Recall</a></li></ul></div> Each <ul> markup is a menu column, you can add up to 4 <ul>.

Change Top Banner

Copyright © 2010 EMThemes. All rights reserved.

Page 12: Https Www.emthemes

EM0006 - Magento Theme for Computer store

This footer links can be changed in the backend. Go to CMS -> Static Blocks, edit top_image or create new if it doesn’t exist:<div><img src="{{skin url='images/img_new1.gif}}" alt="" width="311" height="147" /><img src="{{skin url='images/img_new2.gif}}" alt="" width="319" height="147" /><img src="{{skin url='images/img_new3.gif}}" alt="" width="319" height="147" /></div>

Change Logo Custimize

This footer links can be changed in the backend. Go to CMS -> Static Blocks, editcustomize_right or create new if it doesn’t exist:<div><img src="{{skin url='images/img_new1.gif}}" alt="" width="311" height="147" /><img src="{{skin url='images/img_new2.gif}}" alt="" width="319" height="147" /><img src="{{skin url='images/img_new3.gif}}" alt="" width="319" height="147" /></div>

Homepage Featured ProductsCatalog > Featured Products:

Copyright © 2010 EMThemes. All rights reserved.

Page 13: Https Www.emthemes

EM0006 - Magento Theme for Computer store

Check products you want to display and press “save featured products”

Configure featured product :Go to the backend -> System-> Configuration -> Catalog-> Select tab “Featured Products”

Copyright © 2010 EMThemes. All rights reserved.

Page 14: Https Www.emthemes

EM0006 - Magento Theme for Computer store

Config for homepage: ● Number Of Items in Main Block.● Number Of Items per row in Main Block.

Install lightbox effect on product detail pageStep 1: Download and extract em0006-lightbox.zip to em0006-lightbox/.You should see these files in the directory:app/design/frontend/em0006/default/template/catalog/product/view/media_lightbox.phtmlapp/design/frontend/em0006/default/template/page/html/head.phtmlskin/frontend/em0006/default/css/lightbox.cssskin/frontend/em0006/default/js/lightbox.jsskin/frontend/em0006/default/images/bullet.gifskin/frontend/em0006/default/images/close.gif

Copyright © 2010 EMThemes. All rights reserved.

Page 15: Https Www.emthemes

EM0006 - Magento Theme for Computer store

skin/frontend/em0006/default/images/closelabel.gifskin/frontend/em0006/default/images/loading.gifskin/frontend/em0006/default/images/nextlabel.gifskin/frontend/em0006/default/images/prevlabel.gif Step 2: Copy all files from em0006-lightbox/* to your web public directory (public_html, www, or htdocs...).Step 3: Edit app/design/frontend/em0006/default/layout/catalog.xml. Search and replace media.phtml by media_lightbox.phtml.Edit app/design/frontend/em0006/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>

Copyright © 2010 EMThemes. All rights reserved.