Grayscale Full-width Magento Template installation guide

You can now free install our themes automatically with Magenting.com - professional Magento hosting.

Initial installation

1. Copy files from the package theme/ dir to your Magento Directory

2. Navigate to Backend->System->Configuration->Design->Package Tab-> Current Package Name Field and set this field to default value

3. Navigate to Backend->System->Configuration->Design->Themes Tab and set all fields to grayscale2014 value.

4. Navigate to Backend->System->Configuration->Content Management Tab and set "Enable WYSIWYG Editor" to Disable by Default value.

Now do the following actions from the admin side.

Create category for main navigation menu

In order to get the main navigation visible, you need to create at least one active subcategory in the root folder. Category should be subcategory of the Root (default) category. Category must be active to be showing in the main navigation. How to create new categories in Magento

Create hidden categories

Create 2 categories as subcategories to your theme default category. They must be inactive to be hidden in the main navigation. These categories will be for "Home page products" and "Popular products". Remember the IDs of these categories. See the image below.

Once categories are created it is good to add several products to them.

Do not forget to keep indexes in touch. System->Index Management

Create Static Block left_info_block

Go to CMS->Static Block to add new static blocks.

Do not forget to replace "PopularProductsCategoryID" with the ID of one of the created categories.

Block Title*	left_info_block
Identifier*	left_info_block
Store View*	Select correct store view
Status	Enabled*
Content Do not forget to replace "PopularProductsID" with the ID of one of the created categories
<div></div> <div class="block block-service"> <div class="block-title"><strong><span>Customer Service</span></strong></div> <div class="block-content"> <dl> <dd>8AM-10PM ET, Mon - Fri <br /> 10AM-6PM ET, Sat</dd> <dt>Sales Assistance:</dt> <dd>8AM-11PM ET, Mon - Fri <br /> 9AM-11PM ET, Sat - Sun</dd> <dt>Call: <strong>000.000.2014</strong> </dt> </dl> </div> </div>

Create Static Block right_info_block

Go to CMS->Static Block to add new static blocks.

Block Title*	right_info_block
Identifier*	right_info_block
Store View*	Select correct store view
Status	Enabled*
Content
<div class="sidebar_banner"><img src="https://web-experiment.info/media/"template/grayscale_full_width_free_magento_theme.jpg"" alt="Grayscale Full-width Free Magento Template" /></div> <div class="block" id="facebook_likebox" style="border:none;"></div> <script> //<[CDATA[ jQuery(window).bind("load resize", function(){ var container_width = jQuery('#facebook_likebox').width(); jQuery('#facebook_likebox').html('<iframe src="https://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FMagento-themes-store%2F157897590908425&amp;colorscheme=light&amp;connections=10&amp;stream=false&amp;header=true&amp;height=280&amp;width=' + container_width + '" scrolling="no" frameborder="0" style="border:none; height:280px;width:' + container_width + 'px;" allowTransparency="true"></iframe>'); }); //]]> </script>

Create Static Block footer_links

Go to CMS->Static Block to add new static blocks.

Block Title*	footer_links
Identifier*	footer_links
Store View*	Select correct store view
Status	Enabled*
Content
<div class="footer_block"> <div class="links_block clearfix"> <div > <h4 class="title">Company Information</h4> <ul> <li><a href="/about-us">About Us</a></li> <li><a href="/contacts">Contact Us</a></li> <li><a href="/customer-service">Privacy Policy</a></li> </ul> </div> <div> <h4 class="title">Customer Service</h4> <ul> <li><a href="/customer-service">Ordering Information</a></li> <li><a href="/customer-service">Delivery &amp; Rates</a></li> <li><a href="/sales/guest/form/">Cancellations &amp; Returns</a></li> </ul> </div> <div class="last"> <h4 class="title">Useful Tips and Information</h4> <ul> <li><a href="/customer-service">Customer Testimonials</a></li> <li><a href="/blog">Our Blog</a></li> <li><a href="/catalog/seo_sitemap/category/">Site Map</a></li> </ul> </div> </div> <div class="seotext"> <p>Download our best free Magento themes at Web-Experiment.info</p> </div>

Create Static Block home_page_header_block

Go to CMS->Static Block to add new static blocks.

Block Title*	home_page_header_block
Identifier*	home_page_header_block
Store View*	Select correct store view
Status	Enabled*
Content
<div class="images"> <div id="slider-wrap" class="slider-wrap" style="width: 100%;"> <div id="slider_pager" class="stripNav"></div> <div id="slider-content" class="slider-wrap"> <a rel="nofollow" href="/free-magento-templates" title="Free Magento templates"><img src="https://web-experiment.info/media/"template/free_responsive_magento_template_grayscale_full_width.jpg"" alt="Free responsive Magento template Grayscale full-width" /></a> <a rel="nofollow" href="" title="Web-Experiment.info - Premium Magento templates"><img src="https://web-experiment.info/media/"template/web_experiment_premium_magento_templates.jpg"" alt="Web-Experiment.info - Premium Magento templates" /></a> </div> </div> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#slider-content').wpInitStandardSlider({baseWidth: 1900, baseHeight: 350}); }); </script> </div>

Edit home page

Go to CMS->Pages and Edit/Add home page

Page Title*	Place here anything you want
URL Key	home
Store View	Select correct store view
Status	Enabled*
Content Do not forget to replace "HomeProductsCategoryID" with the ID of one of the created categories
<div class="best_sellers">New Arrivals</div> <div></div> <div class="best_sellers">Best Sellers in <a href="#">Category &raquo;</a></div> <div></div>
Layout	3 columns
Layout Update XML
<reference name="header"> <block type="cms/block" name="home_page_header_block"> <action method="setBlockId"> <block_id>home_page_header_block</block_id> </action> </block> </reference> <reference name="head"> <action method="addItem"> <type>skin_js</type> <name>js/jquery-1.5.2.min.js</name> </action> <action method="addItem"> <type>skin_js</type> <name>js/noconflict.js</name> </action> <action method="addItem"> <type>skin_js</type> <name>js/cycle-fade-effect.js</name> </action> <action method="addItem"> <type>skin_js</type> <name>js/jquery.standardSlider.js</name> </action> <action method="addCss"> <stylesheet>css/slider.css</stylesheet> </action> </reference>

Our extensions

One Page Magento Checkout,Shipping Price Calculator, Smart Catalog, Stylish Store Switcher, Back to Top button

Included in the package.

• Smart Catalog
• Back to Top button

Custom Menu

Please load the extension here

• Custom Menu Guides
• Custom Menu settings for this template

Third-party extensions

We have tested extensions on various mobile devices. We highly recommend:

• Free extensions for any responsive theme - LightBox2, EasyTabs, AW Blog , ShareThis

Other guides

• Customize the display of categories
• How to manage "jQuery Cycle Plugin" effect, for templates without "Total Slider Manager"

Congratulations! Your magento theme is ready!

Thank you for using this theme.

---

This is a step-by-step guide on how to install Grayscale Responsive Free Magento Template 1.2.2. It has full-width responsive layout, free Magento Sample Data ans 8 most popular free Magento extensions included Suitable for any kind of Magento store on any device.

Back