EM Casual Clothing

13
Magento Theme EM0015 for Gift Shop Em0015 - Magento Theme for Clothing Shop EMThemes™ Copyright © 2010 EMThemes. All rights reserved. 1

Transcript of EM Casual Clothing

Page 1: EM Casual Clothing

Magento Theme EM0015 for Gift Shop

Em0015 - Magento Theme for Clothing Shop ! EMThemes™

Copyright © 2010 EMThemes. All rights reserved.! 1

Page 2: EM Casual Clothing

Table of Contents................................................................................................Introduction! 4

.....................................................................................................Features ! 4

......................................................................................................General Features! 4

......................................................2 themes light and dark version in a package! 4

........................................................................................................Flexible layouts! 4

.................................................................................................................Main Menu! 5

...........................................................................................................Products Grid! 5

.....................................................................................................................Widgets! 5

.......................................................................................................Standard Blocks! 5

.......................................................Category Menu and Category Layered Menu.! 5

........................................................................................................Banners & Logo! 5

......................................................................Homepage slideshow new products! 5

..............................................................................................Usage Guide ! 6

...........................................................Install the theme to your existing Magento! 6

.......................................................................Install the advance menu extension! 6

..............................................................Install the full package with sample data! 6

...............................................................................Flash slideshow on homepage! 7

................................................................................Display payment accept icons! 9

...............................................................................................Change Footer Menu! 9

......................................................................................Change Extra Footer Menu! 9

...............................................................................Change banner did you know! 10

................................................................................The banner on right column:! 11

.........................................................................................Popular category block! 11

Theme switcher on frontend! 11

..........................................“New arrivals product in this month” on homepage! 11

.......................................................................................................The main menu! 12

Em0015 - Magento Theme for Clothing Shop ! EMThemes™

Copyright © 2010 EMThemes. All rights reserved.! 2

Page 3: EM Casual Clothing

Install lightbox effect on product detail page! 12

Em0015 - Magento Theme for Clothing Shop ! EMThemes™

Copyright © 2010 EMThemes. All rights reserved.! 3

Page 4: EM Casual Clothing

IntroductionWe honor to introduce to everyone a new professional Clothing Magento Template. This is a fashion shop template be integrated online payment gateway.

You will love this theme immediately. Specially, highlights of this unique flash banner is a flexible and lively, perfect color combination, it attracts attention and interest of customers. Besides, using color effect creates a very luxurious look and visually rich for this casual clothing shop template. Background color is simple to emphasize originality of flash banner. Furthermore, the drop-down menu is really fancy with transparency effects, customer can easy to find brand of items they want to buy.

Spend more time and effort to design, we want our customers feel satisfied about their investment.

The template is fully compatible with heavy stores which have a variety of languages and currencies to create convenience for customers around the world. Customers can easily contact the customer support department if they have a question about products or check out. And, this is really an outstanding Magento template for anyone who loves fashion to begin with their business online.

FeaturesGeneral 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 (avoid javascript confliction).• 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.

2 themes light and dark version in a packageLight and dark background, easy to customize, available for user changing in the front-end as well as configuring in the backend.Visitor can change white or black themes by click your icons:

Flexible layoutsSupport:• 1 column layout.• 2 columns with left sidebar layout.

Em0015 - Magento Theme for Clothing Shop ! EMThemes™

Copyright © 2010 EMThemes. All rights reserved.! 4

Page 5: EM Casual Clothing

• 2 columns with right sidebar layout.• 3 columns layout

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

Products GridAll products grid such as the product grids on category page, the products grid on widgets are designed to show:• 2 products per row on 2-column layout.

WidgetsSupport all built-in Magento widgets:• New products listing.• New products grid.• Recent viewed products listing.• Recent viewed products grid.• Last compared products listing.• Last compared product grid.• Recent viewed products grid.• Last compared products listing.• Last compared product grid.• Plus, all widgets are designed to fit all 1 and 2 columns layout.

Standard Blocks• All built-in Magento Blocks are designed and developed with every detail to create

unique and perfect theme.

Category Menu and Category Layered Menu.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...

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

Homepage slideshow new productsShowing new products on homepage by using new product widget.

Em0015 - Magento Theme for Clothing Shop ! EMThemes™

Copyright © 2010 EMThemes. All rights reserved.! 5

Page 6: EM Casual Clothing

Usage GuideInstall the theme to your existing MagentoThis guide will show you how to install the theme to your existing magento theme.Download em0015-theme-package.zip and extract to a folder such as em0015-theme-package/, if you Magento site locates in public_html/, you should copy:• em0015-theme-package/app/design/frontend/em0015 to public_html/app/design/frontend/em0015

• em0015-theme-package/skin/frontend/em0015 to public_html/skin/frontend/em0015

Now login to the backend, go to System > Configuration, click on Design tab, set Current Package Name to em0015. 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 em0015-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.

Em0015 - Magento Theme for Clothing Shop ! EMThemes™

Copyright © 2010 EMThemes. All rights reserved.! 6

Page 7: EM Casual Clothing

Default admin account:• Username: admin• Password: demo

Flash slideshow on homepageTo show the slideshow on homepage, edit or create a new block with identifier is flash if it doesnʼt exist, enter the html code below in the Content field:<div class="flash"><object width="950" height="450" data="{{store direct_url="clothing-flash/Casual_Wear.swf"}}" type="application/x-shockwave-flash"><param name="data" value="{{store direct_url="clothing-flash/Casual_Wear.swf"}}" /><param name="src" value="{{store direct_url="clothing-flash/Casual_Wear.swf"}}" /><param name="wmode" value="transparent" /><param name="quality" value="high" /><param name="FlashVars" value="host=config path=" /></object></div>

Next, edit the Homepage page by go to CMS > Pages, click on the homepage article, select Design tab, enter the code below in field Layout Update XML:<reference name="header"><block type="cms/block" name="cms_flash" ><action method="setBlockId"><block_id>flash</block_id></action></block></reference>

This will force the homepage to show the flash static block show up.

Em0015 - Magento Theme for Clothing Shop ! EMThemes™

Copyright © 2010 EMThemes. All rights reserved.! 7

Page 8: EM Casual Clothing

edit file imagelist.xml in the root folder:<images> <girls> <girl> <name>Image Title</name> <path>image/girl1.jpg</path> </girl> ... </girls> <boys> <boy>...</boy> ... </boys> <anothers> <another>...</another> ... </anothers> <shoe> <name>Shoes</name> <path>media/slideshow/shoesImg.png</path> </shoe> <texts> <shoesTEXT> <content><![CDATA[<font color="#FFFFFF" size="36" face="Arial">a classic <b>remix</b><br><font color="#b7b7b7" size="11"> the poorman weapon</font></font>]]></content> <link>#</link> </shoesTEXT>

<saveTEXT> <content><![CDATA[<font color="#FFFFFF" face="Arial"><font size="66"><b>save</b></font><br><font size="36">up to<b> 75%</b> off</font></font>]]></content> <link>#</link> </saveTEXT>

<forHerTEXT> <content><![CDATA[<font color="#FFFFFF" face="Arial"><font size="66" color="#00ACDA">for<b> HER</b></font><br><font size="36">shop now</font></font>]]></content> <link>#</link> </forHerTEXT>

<forHimTEXT> <content><![CDATA[<font color="#FFFFFF" face="Arial"><font size="66" color="#00ACDA">for<b> HIM</b></font><br><font size="36">shop now</font></font>]]></content> <link>#</link> </forHimTEXT> </texts></images>

Em0015 - Magento Theme for Clothing Shop ! EMThemes™

Copyright © 2010 EMThemes. All rights reserved.! 8

Page 9: EM Casual Clothing

each <girl>...</girl> contains an image on the center, <boy>...</boy> contains an image on the right, <another>...</another> contains an image on the bottom left.<shoe>...</shoe> contains image on the top left corner.You can also edit text and links on these images by edit <texts>...</texts>. All images are placed in the folder media/slideshow/ of root folder.

Display payment accept icons

To change this block, go to the backend CMS -> Static Blocks, edit payment_accept or create new with the content:<div>accept <img src="{{skin url='images/payment-1.jpg}}" alt="" /></div>

Change Footer Menu

This footer links can be changed in the backend. Go to CMS -> Static Blocks, edit footer_links or create new if it doesn’t exist:<ul><li class="first"><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><li><a href="{{store direct_url="catalog/seo_sitemap/category/"}}">Site Map</a></li><li><a href="{{store direct_url="catalogsearch/term/popular/"}}">Search Term</a></li><li><a href="{{store direct_url="catalogsearch/advanced/"}}">Advanced Search</a></li><li class="last"><a href="{{store direct_url="contacts"}}">Contact Us</a></li></ul>

Change Extra Footer Menu

This footer links can be changed in the backend. Go to CMS -> Static Blocks, edit footer_links_2 or create new if it doesn’t exist:<div><h3>company</h3><ul><li> <a href="#">careers</a> </li><li> <a href="#">nordstrom rack</a> </li></ul>

Em0015 - Magento Theme for Clothing Shop ! EMThemes™

Copyright © 2010 EMThemes. All rights reserved.! 9

Page 10: EM Casual Clothing

<ul><li> <a title=" href=">investor relations</a> </li><li> <a href="#">store location &amp; events</a> </li></ul></div><div><h3>customer services</h3><ul><li> <a href="#">check order status</a> </li><li> <a title=" href=">shipping options &amp; changes</a> </li></ul><ul><li> <a href="#">returns &amp; exchanges</a> </li><li> <a href="#">product recall</a> </li></ul></div><div><h3>fashion rewards</h3><ul><li> <a href="#">apply for a card</a> </li><li> <a title=" href=">pay bill online</a> </li></ul></div>

Change banner did you know

You can change in the backend. Go to CMS -> Static Blocks, edit callouts or create new if it doesn’t exist:<p><img src="{{skin url='images/media/slideshow/col_left_callout.jpg'}}" alt="" /></p>

Em0015 - Magento Theme for Clothing Shop ! EMThemes™

Copyright © 2010 EMThemes. All rights reserved.! 10

Page 11: EM Casual Clothing

The banner on right column:

this banner is located in skin/frontend/em0015/default/images/media/col_right_callout.jpg

Popular category blockEdit the static block subheader or create a new if it doesnʼt exist, with content below:<span>popular category</span><ul><li><a href=”#”><img src="{{skin url='images/i_tshirt.png'}}" alt="" /></a></li><li><a href=”#”><img src="{{skin url='images/i_shoes.png'}}" alt="" /></a></li></ul>

Theme switcher on frontend

Create a new static block with identifier is select_theme, with content showed below:<p><a onclick="chooseStyle('white', 60);return false;" href="#"> <img title="white background" src="{{skin url="images/white-bg.gif"}}" alt="white background" /></a><a onclick="chooseStyle('black', 60);return false;" href="#"><img title="black background" src="{{skin url="images/black-bg.gif"}}" alt="black background" /> </a></p>

if you want the dark theme shows by default, go to System > Configuration, click on Design tab, set Skin (Images / CSS) to blacktheme.Delete or unpublish this static block if you donʼt want to show it.

“New arrivals product in this month” on homepage Edit a product and set certain value for attributes Set Product as New from Date and Set Product as New to Date.

Em0015 - Magento Theme for Clothing Shop ! EMThemes™

Copyright © 2010 EMThemes. All rights reserved.! 11

Page 12: EM Casual Clothing

Edit the page Homepage with content below:

<div>{{widget type="catalog/product_widget_new" products_count="16" column_count="4" show_title="false" show_addtolinks="false" template="catalog/product/widget/new/content/new_grid.phtml"}}</div>

The main menuThe main menu shows up published all categories.

Content Heading:new arrivals this month

Install lightbox effect on product detail pageStep 1: Download and extract em0015-lightbox.zip to em0015-lightbox/.

You should see these files in the directory:

app/design/frontend/em0015/default/template/catalog/product/view/media_lightbox.phtmlapp/design/frontend/em0015/default/template/page/html/head.phtmlskin/frontend/em0015/default/css/lightbox.cssskin/frontend/em0015/default/js/lightbox.jsskin/frontend/em0015/default/images/bullet.gifskin/frontend/em0015/default/images/close.gifskin/frontend/em0015/default/images/closelabel.gifskin/frontend/em0015/default/images/loading.gifskin/frontend/em0015/default/images/nextlabel.gifskin/frontend/em0015/default/images/prevlabel.gif

Step 2: Copy all files from em0015-lightbox/* to your web public directory (public_html, www, or htdocs...).

Step 3: Edit app/design/frontend/em0015/default/layout/catalog.xml. Search and replace media.phtml by media_lightbox.phtml.

Em0015 - Magento Theme for Clothing Shop ! EMThemes™

Copyright © 2010 EMThemes. All rights reserved.! 12

Page 13: EM Casual Clothing

Edit app/design/frontend/em0015/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>

Em0015 - Magento Theme for Clothing Shop ! EMThemes™

Copyright © 2010 EMThemes. All rights reserved.! 13