MAGENTO THEME SHOE STORE

Transcription

1 MAGENTO THEME SHOE STORE Developer: BSEtec Website: Facebook Profile: License: GPLv3 or later License URL:

2 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.

3 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

4 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.

5 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. Ex: skin/frontend/default/shoes_store/images/shoe_store/logo.png

6 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

7 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

8 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.

9 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

10 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"> </div> </li> <li class="item span3"><a class="product-image" title="product#002" href="{{store url="online-store/men/product 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 html"}}">product#002</a></h3> <div class="box-shadow"> </div> </li>

11 3 <li class="item span3"><a class="product-image" title="product#003" href="{{store url="online-store/men/product 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 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 url="online-store/men/product 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 html"}}">product#004</a></h3> <div class="box-shadow"> </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

12 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

13 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>

14 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>

15 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>

16 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>

17 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.

18 9 GENERAL FEATURES Supports Magento CE version 1.6.xx and , and ) 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.

19 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

20 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.

21 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.