magento theme shoe store

MAGENTO THEME
SHOE STORE
Developer: BSEtec
Email: [email protected]
Website: www.bsetec.com
Facebook Profile:
License: GPLv3 or later
License URL: http://www.gnu.org/licenses/gpl-3.0-standalone.html
STEP
1
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.
•
Navigate to the Magento Connect Manager via main administration
menu, System » Magento Connect » Magento Connect Manager.
STEP
1
•
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.
Upload your files
STEP
1
Manual Installation
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
CONFIGURATION
•
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.
STEP
1
CHANGE LOGO
•
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.
Note : you can change logo according to your need, use images folder to
upload
images.
skin/frontend/default/shoes_store/images/shoe_store/logo.png
Ex:
STEP
1
Enter your
theme name
like "store" in
all text fields
You can change logo
according to your need, use
images folder to upload
images.
Ex:
skin/frontend/default/shoes_s
tore/
images/theme_name/logo.pn
g
STEP
2
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>
•
Select ‘Save Page’ button
STEP
2
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.
Note: Here New Products are displayed in category wise such as men,
women and kids. So you need to set your category id.
STEP
3
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">
<li class="item first span3"><a class="product-image" title="PRODUCT#001" href="{{store
STEP
3
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">&nbsp;</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>
<h3 class="product-name"><a title="PRODUCT#002" href="{{store
url="onlinestore/
men/product-001-2.html"}}">PRODUCT#002</a></h3>
<div class="box-shadow">&nbsp;</div>
</li>
STEP
3
<li class="item span3"><a class="product-image" title="PRODUCT#003"
href="{{store
url="online-store/men/product-001-2.html"}}"><img src="{{media
url="shoe_store/product5.jpg"}}" alt="PRODUCT#003" width="170"
height="120" /></a>
<h3 class="product-name"><a title="PRODUCT#003" href="{{store
url="onlinestore/
men/product-001-2.html"}}">PRODUCT#003</a></h3>
<div class="box-shadow">&nbsp;</div>
</li>
<li class="item last span3"><a class="product-image" title="PRODUCT#004"
href="{{store
url="online-store/men/product-001-2.html"}}"><img src="{{media
url="shoe_store/product6.jpg"}}" alt="PRODUCT#004" width="170"
height="120" /></a>
<h3 class="product-name"><a title="PRODUCT#004" href="{{store
url="onlinestore/
men/product-001-2.html"}}">PRODUCT#004</a></h3>
<div class="box-shadow">&nbsp;</div></li></ul></div>
</div>
Note : you can change image name, brands and URL according to your need
and use images folder to upload images
STEP
4
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="onlinestore/men.html"}}"><img src="{{media
url="shoe_store/banner1.jpg"}}" alt="Men Shoes" /></a></div>
Note : you can change image and URL according to your need and use
images folder to upload images
STEP
5
NAVIGATION MENU LINKS
•
Block Title: Navigation Menu Links
•
Identifier: menu_links
•
Status: Enabled
CONTENT
<ul>
<li class="level0"><a class="level-top" href="{{store direct_url="about-magento-demostore"}}">
<span>About Us</span> </a></li>
<li class="level0"><a class="level-top" href="{{store direct_url="delivery"}}">
<span>Delivery</span> </a></li>
<li class="level0"><a class="level-top" href="{{store direct_url="faqs"}}">
<span>FAQs</span>
</a></li>
<li class="level0"><a class="level-top" href="{{store direct_url="contacts"}}">
<span>Contacts</span> </a></li>
</ul>
STEP
6
HEADER TOP LINKS
•
Block Title: Header Top Links
•
Identifier: top_links
•
Status: Enabled
CONTENT
<ul class="links bscclearfix">
<li><a href="{{store direct_url=""}}">Home</a></li>
<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>
</ul>
STEP
7
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="sharelinks span4">
<div class="content">
<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
src="{{media url="shoe_store/rss.png"}}" alt="rss" /></a></div></div>
STEP
8
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>
<li><a href="{{store direct_url=""}}"><img src="{{media
url="shoe_store/share/in.png"}}" alt="in" /></a></li>
<li><a href="{{store direct_url=""}}"><img src="{{media
url="shoe_store/share/p.png"}}" alt="p" /></a></li>
STEP
8
<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>
Note : you can add URL according to your need.
STEP
9
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
Among all the products, there are certain products that repeatedly make
the customers to open their wallets and they are presented on this panel.
system » General features configuration » Vs Extensions under the Best
seller Products, In settings group set Enabled left and right columns for best
seller products.
STEP
9
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?
While creating category, Magento automatically creates a special category
ID. Use Default Category to create your category
STEP
9
Category id
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.
Cascading Style Sheets (CSS) offer increased flexibility in the presentation
of website content.CSS3 isn’t supported by all browsers yet, it’s becoming
increasingly popular because it makes these changes so much easier than
trying to get the same effect using something like a Javascript plugin or
creating slightly different versions of the exact same image.
STEP
9
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
Bsetec embeds Google Web Fonts, as there are around 500 optimised fonts
available in the cloud and can be used on the sites so that images scale up
well; readable to the screen readers; highlight text; search engines easily
read the images; and for faster loading.
STEP
9
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/
http://bsetec.com/support/categories/magento
Best Regards,
BSEtec Team
Copyright © 2013-2015, BSEtec. All Rights
Reserved.