MAGENTO THEME SHOE STORE

(1)

MAGENTO THEME

SHOE STORE

Developer: BSEtec Email: [email protected] Website: www.bsetec.com Facebook Profile: License: GPLv3 or later

(2)

1

S

T

E

_{THEME INSTALLATION}

There are two main methods of installation:

• Magento Connect Manager

• Manually placing the files in the correct location.

If you are using Fresh magento Installation, We'd recommend the Magento Connect Manager method as it's the easiest.

In This Theme we install a Three Extensions thus, VS Best Seller, Magic Cloud Zoom, Easy Tabs. If you already installed any one of the above extensions, we'd recommend the manually placing the files in the correct location.

MAGENTO CONNECT MANAGER

Installation via the Magento Connect Manager is as simple as uploading a file.

• Disable Magento Compilation, System » Tools » Compilation, click "Disable". If there's no "Disable" button, then it's already disabled!

• Disable the Magento Cache, System » Cache Management, disable everything.

(3)

1

S

T

E

• Once you have logged into the Magento Connect Manager, upload our file using the Choose File dialogue under the Direct package file upload section and hit Upload. Magento will now upload and install the

package for you.

• After the process have been completed, logout from your administration area and log back in.

(4)

1

S

T

E

A manual installation of any Magento Extension should typically be avoided, but instructions are provided here for completeness.

• Unzip the archive

• Move appropriate Files and folders to your magento Folder (ie) app, Media, js, skin files move to correct folders

Manual Installation

• Once you set-up the installation you need to apply the theme. In Admin panel Go to system » configuration.

• In left column General Tab, click Design link and then choose Themes section Enter your theme name “Shoes_store” in all text filelds.

• Then click “save cofig” button.

• Refresh Magento Cache, System » Cache Management, Refresh everything.

(5)

1

S

T

E

• Once you set-up the installation you need to apply the theme. In Admin panel Go to system » configuration.

• In left column General Tab, click Design link and then choose Header section Logo Image src field add “images/shoe_store/logo.png”.

• Then click “save cofig” button.

CHANGE LOGO

Note : you can change logo according to your need, use images folder to

upload images. Ex:

(6)

1

S

T

E

Enter your theme name like "store" in all text fields

You can change logo

(7)

2

S

T

E

_{SETTING UP HOMEPAGE LAYOUT}

• Go to CMS » Pages and choose Home Page

• Click enabled in Status Drop-down menu

• From the Left hand menu, select Design to get the right page

• Click “ 2 Columns with right bar” from the Layout drop-down menu

• Click Content on the left-hand menu

• Select Show/Hide Editor button leave WYSIWYG mode to open the content

• Copy and paste the given code in the content editor and build the home page

<p>{{block type="catalog/product_list" name=home.catalog.product.new

alias="product_homepage" template="catalog/product/new_products.phtml" }}</p>

(8)

2

S

T

E

_{FILE PATH}

app/design/frontend/default/shoes_store/catalog/product/new_products.pht ml

In this file, you need to replace following..

• addAttributeToFilter('category_id', array( array('finset' => '8')) // Replace '8' into your category ID.

• addAttributeToFilter('category_id', array( array('finset' => '5'))// Replace '5' into your category ID.

• addAttributeToFilter('category_id', array( array('finset' => '6')) // Replace '6' into your category ID.

(9)

3

S

T

E

_{BRANDED PRODUCTS ON HOMEPAGE}

• Click CMS » Static Blocks

• Click ‘Add New Block’ button

• Enter brands for the block title and brands for the identifier

• Choose Enabled from the Status Drop-down menu

• Choose the Show/Hide Editor button to leave it in WYSIWYG MODE

• Go to content editor

• Copy and paste following code in content editor

• Block Title: Branded Products on Home page

• Block Identifier: brands

• Status: Enabled

CONTENT

<div class="featured_brands_container"> <h2 class="subtitle">Featured Brands</h2> <div class="featured_brands row-fluid"> <ul class="products-grid-brand">

(10)

3

S

T

E

url="online-store/men/product-001.html"}}"><img src="{{media url="shoe_store/product2.jpg"}}"

alt="PRODUCT#001" width="170" height="120" /></a>

<h3 class="product-name"><a title="PRODUCT#001" href="{{store url="onlinestore/

men/product-001.html"}}">PRODUCT#001</a></h3> <div class="box-shadow"> </div>

</li>

<li class="item span3"><a class="product-image" title="PRODUCT#002" href="{{store

url="online-store/men/product-001-2.html"}}"><img src="{{media url="shoe_store/product3.jpg"}}" alt="PRODUCT#002" width="170" height="120" /></a>

men/product-001-2.html"}}">PRODUCT#002</a></h3> <div class="box-shadow"> </div>

(11)

3

S

T

E

<li class="item span3"><a class="product-image" title="PRODUCT#003" href="{{store

men/product-001-2.html"}}">PRODUCT#003</a></h3> <div class="box-shadow"> </div>

</li>

<li class="item last span3"><a class="product-image" title="PRODUCT#004" href="{{store

men/product-001-2.html"}}">PRODUCT#004</a></h3> <div class="box-shadow"> </div></li></ul></div> </div>

(12)

4

S

T

E

_{BANNER ON HOMEPAGE}

• Click CMS » Static Blocks

• Click ‘Add New Block’ button

• Enter brands for the block title and brands for the identifier

• Choose Enabled from the Status Drop-down menu

• Choose the Show/Hide Editor button to leave it in WYSIWYG MODE

• Go to content editor

• Copy and paste following code in content editor

• Block Title: banner

• Identifier: banner

• Status: Enabled

CONTENT

<div class="item"><a href="{{store direct_url="online-store/men.html"}}"><img src="{{media

url="shoe_store/banner1.jpg"}}" alt="Men Shoes" /></a></div>

(13)

5

S

T

E

_{NAVIGATION MENU LINKS}

• Block Title: Navigation Menu Links

• Identifier: menu_links

• Status: Enabled

CONTENT

<ul>

<span>About Us</span> </a></li>

<li class="level0"><a class="level-top" href="{{store direct_url="delivery"}}"> <span>Delivery</span> </a></li>

</a></li>

<li class="level0"><a class="level-top" href="{{store direct_url="contacts"}}"> <span>Contacts</span> </a></li>

(14)

6

S

T

E

_{HEADER TOP LINKS}

• Block Title: Header Top Links

• Identifier: top_links

• Status: Enabled

CONTENT

<li><a href="{{store direct_url="about-magento-demo-store"}}">About us</a></li>

<li class="last"><a href="{{store direct_url="cotacts"}}">Contact us</a></li>

(15)

7

S

T

E

_{FOOTER BOTTOM LINKS}

• Block Title: Footer Bottom Links

• Identifier: bottom_links

• Status: Enabled

CONTENT

<div class="freeshipping foot_pipe span4"><a href="{{store direct_url="checkout/cart/"}}"><img

src="{{media url="shoe_store/free_shipping.png"}}" alt="Free shipping" /></a></div>

<div class="block-title"><strong><span>Follow Us</span></strong></div>

<a href="#"><img src="{{media url="shoe_store/facebook.png"}}" alt="facebook" /></a><a

href="#"><img src="{{media url="shoe_store/twitter.png"}}" alt="twitter" /></a><a href="#"><img src="{{media url="shoe_store/in.png"}}" alt="in" /></a><a

href="#"><img

(16)

8

S

T

E

_{PRODUCT VIEW PAGE SHARE LINKS}

• Block Title: view_share

• Identifier: view_share

• Status: Enabled

CONTENT

<ul>

<li><a href="{{store direct_url=""}}"><img src="{{media

url="shoe_store/share/facebook.png"}}" alt="facebook" /></a></li> <li><a href="{{store direct_url=""}}"><img src="{{media

url="shoe_store/share/twitter.png"}}" alt="twitter" /></a></li> <li><a href="{{store direct_url=""}}"><img src="{{media url="shoe_store/share/g.png"}}" alt="g" /></a></li>

(17)

8

S

T

E

<li><a href="{{store direct_url=""}}"><img src="{{media url="shoe_store/share/rss.png"}}" alt="rss" /></a></li> <li><a href="{{store direct_url=""}}"><img src="{{media url="shoe_store/share/skype.png"}}" alt="skype" /></a></li> <li><a href="{{store direct_url=""}}"><img src="{{media

url="shoe_store/share/you_tube.png"}}" alt="you tube" /></a></li> <li><a href="{{store direct_url=""}}"><img src="{{media

url="shoe_store/share/digg.png"}}" alt="digg" /></a></li> <li><a href="{{store direct_url=""}}"><img src="{{media url="shoe_store/share/cir.png"}}" alt="cir" /></a></li>

(18)

9

S

T

E

_{GENERAL FEATURES}

• Supports Magento CE version 1.6.xx and 1.7.0.0, 1.7.0.1 and 1.7.0.2)

• Full Responsive which adapting display to all devices.

• Easy customization with well structured and explained CSS3 & HTML5.

• Template files were re-coded using grid Bootstrap principles.

• Product Zoom with Backend Settings.

• Back to top button.

• Product Next & Previous View.

• Supports Cross-browser and compatible with major browsers like Firefox 3, IE7+, Chrome 5 and Safari 5

• Easy editing & complete PSD fies supplied

BEST SELLER PRODUCTS

(19)

9

S

T

E

EASY TAB

In product view page product description, up-sell products, related products, product tags and reviews are displayed in a tabs formatted. Add and remove the tabs using admin settings. Thus system » configuration » Templates master under the Easy tabs.

PRODUCT CLOUD ZOOM

In Product view page zooming option of the product image and click more views to change the product-image. Admin Setting is system » configuration left column catalog under the Mdi product zoom. Here you can change according to your need product-image with, height and zooming image width, height and position.

WHAT IS CATEGORY ID?

(20)

9

S

T

E

HTML5 & CSS3

HTML5 and CSS3 bring loads of new features and functionality to the modern web. The audio and visual support in HTML5 is outstanding. As soon as it’s fully running and all browsers support HTML5, you will find it easy to add audio and video to websites without the need for outside plugins.

(21)

9

S

T

E

_{RESPONSIVE LAYOUT}

Responsive Layout is a approach aimed at crafting sites to provide an best viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling -across a wide range of devices (from desktop computer monitors to mobile phones)

BOOTSTRAP TECHNIQUE

We use Bootstrap techniques to have responsive layout and compatibility with all major browsers and devices or viewport like desktop, laptop, mobile, ipad, iphone, tab screen. Bsetec is the pioneer in merging Bootstrap techniques with Dolphin themes. It has variable-width layout to customise the site. It offers a pack of stylesheets with basic style definitions for every main HTML component to have uniform, contemporary appearance for tables, text and to form elements. Besides HTML components, Bootstrap includes other regularly used interface components with advanced features.

GOOGLE FONTS

(22)

9

S

T

E

_CREDITS

• Bootstrap • Cloud Zoom • TM Tabs • Vs Best sellers • Images

SUPPORT

We're always here to help in the forums:

http://www.studiopress.com/support/

Best Regards,

BSEtec Team