Magento Full-width theme v1.x.x installation guide

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

Initial installation

1. Copy files from the package theme/ folder to your Magento Directory.
(PSD/ folder in the package holds PSD source files).

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 wp_full_width 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 a category for the main navigation menu

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

Create hidden categories

Create 3 categories as subcategories to the your theme default category. They must be inactive to be hidden in the main navigation. These categories will be for "Popular Products" and "Top Adv Category", "HomeProductsCategory". Remember the IDs of these categories. See the image below.

Video tutorial by Template-help.com: How to add a category

Add products

Once categories are created it is good to add several products to them. Video tutorial by Template-help.com: How to add a simple product

Note! Do not forget to keep indexes in touch: System->Index Management

Create the 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 category "Popular Products".

Block Title*	left_info_block
Identifier*	left_info_block
Store View*	Select correct store view
Status	Enabled*
Content	<div></div> <div class="block block-service"> <div class="block-title"><strong><span>Customer Service</span></strong></div> <div class="block-content"><dl> <dt>Customer Service:</dt> <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>253.243.2001</strong> </dt> </dl></div> </div> <div class="sidebar_banner"><img src="https://web-experiment.info/media/"template/magento_template.jpg"" alt="Magento Template" /></div> <div class="block testimonial"> <div class="block-title"><strong><span>Testimonials</span></strong></div> <div class="block-content"> <p><em>I am quite impressed with your level of customer service. I am really satisfied with Premium Magento Template. I will reccomend you to my collegues. I would just like to say a BIG thank you!</em></p> <p class="signt">Matthew Bailey</p> </div> </div>

You can replace a testimonials block with a slider. More info: How to create a testimonials slider

Create the 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/magento_template.jpg"" alt="" /></div> <p><a title="" href="/blog"><img src="https://web-experiment.info/media/"template/blog.png"" alt="" /></a></p> <div class="block news_left"> <div class="block-title"><strong><span>News and events</span></strong></div> <div class="block-content"><dl> <dt> <strong>Feb 08, 2012</strong><a href="#">- Bestsellers</a> </dt> <dd>The Full-width Theme (template) is a very modern, simple, and fresh theme, with a focus on usability and fast, clean code. </dd> </dl> <p><a class="more" href="#"><span>Read more</span></a></p> </div> </div> <div class="block-content"><img src="https://web-experiment.info/media/"template/paypal_accepted.jpg"" alt="" /></div>

Create the 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 class="clearfix"><a class="title" href="#">Company Information</a> <ul> <li><a href="/about-us">About Us</a></li> <li><a href="/customer-service">Our Store Hours</a></li> <li><a href="/customer-service">Directions</a></li> <li><a href="/customer-service">Privacy Policy</a></li> <li><a href="/customer-service">Legal Information</a></li> <li class="last privacy"><a href="https://web-experiment.info/"privacy-policy-cookie-restriction-mode"">Privacy Policy</a></li> </ul> </div> <div><a class="title" href="/customer-service">Customer Service</a> <ul> <li><a href="/customer-service">Ordering Information</a></li> <li><a href="/customer-service">Delivery &amp; Rates</a></li> <li><a href="/customer-service">Cancellations &amp; Returns</a></li> <li><a href="/customer-service">School &amp; Government</a></li> <li><a href="/customer-service">Contact Us</a></li> <li class="last privacy"><a href="https://web-experiment.info/"privacy-policy-cookie-restriction-mode"">Privacy Policy</a></li> </ul> </div> <div class="last"><a class="title" href="#">Useful Tips and Information</a> <ul> <li><a href="/customer-service">Product Measurements</a></li> <li><a href="/testimonials">Customer Testimonials</a></li> <li><a href="/customer-service">Our Blog</a></li> <li><a href="/catalog/seo_sitemap/category/">Site Map</a></li> <li class="last privacy"><a href="https://web-experiment.info/"privacy-policy-cookie-restriction-mode"">Privacy Policy</a></li> </ul> </div> </div> <div class="icons clearfix"> <div class="icons_left"><a href="#"><img src="https://web-experiment.info/media/"icons/authorize_net.gif"" alt="" /></a> <a href="#"><img src="https://web-experiment.info/media/"icons/visa.gif"" alt="" /></a> <a href="#"><img src="https://web-experiment.info/media/"icons/mastercard.gif"" alt="" /></a> <a href="#"><img src="https://web-experiment.info/media/"icons/discover.gif"" alt="" /></a> <a href="#"><img src="https://web-experiment.info/media/"icons/blue.gif"" alt="" /></a> <a href="#"><img src="https://web-experiment.info/media/"icons/paypal.gif"" alt="" /></a></div> <div class="share_this"><strong>Follow Us:</strong> <span class="st_twitter_large">&nbsp;</span><span class="st_facebook_large">&nbsp;</span><span class="st_google_large">&nbsp;</span><span class="st_delicious_large">&nbsp;</span><span class="st_sharethis_large">&nbsp;</span></div> </div> </div> <div class="seotext"> <p>SEO text goes here.</p> </div>

Edit the 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", "Top Adv Category" with the ID of the created categories.	<div class="fw"> <script type="text/javascript">// <![CDATA[ jQuery(document).ready(function() { jQuery('#slider-content') .before('<div id="stripNav0" class="stripNav">') .cycle({ fx: 'scrollRight', timeout: 4000, speed: 1000, next: '.stripNavL', prev: '.stripNavR', pager:'#stripNav0' }); jQuery('#slider-wrap').css("visibility",'visible'); }); // ]]></script> <div id="slider-wrap" style="visibility: hidden; width="520px; height: 300px; "> <div id="slider-content" class="slider-wrap"><img src="https://web-experiment.info/media/"/template/home_banner01.jpg"" alt="" /> <img src="https://web-experiment.info/media/"/template/home_banner02.jpg"" alt="" /> <img src="https://web-experiment.info/media/"/template/home_banner03.jpg"" alt="" /></div> </div> </div> <div class="right_cat"></div> <div class="smart-columns-light"> <ul class="smart categories_list"> <li> <div><img src="https://web-experiment.info/media/"template/cat01.jpg"" alt="" /> <a href="/clothing.html"> <h3>Clothing</h3> </a> </div> </li> <li> <div><img src="https://web-experiment.info/media/"template/cat02.jpg"" alt="" /> <a href="/clothing/watches.html"> <h3>Jewelry and Watches</h3> </a> </div> </li> <li> <div><img src="https://web-experiment.info/media/"template/cat03.jpg"" alt="" /> <a href="/clothing/accessories.html"> <h3>Accessories</h3> </a> </div> </li> <li> <div><img src="https://web-experiment.info/media/"template/cat04.jpg"" alt="" /> <a href="#"> <h3>Health and Beauty</h3> </a> </div> </li> <li> <div><img src="https://web-experiment.info/media/"template/cat05.jpg"" alt="" /> <a href="/magento-template-features/test-category/kids-magento-template.html"> <h3>Kids</h3> </a> </div> </li> <li> <div><img src="https://web-experiment.info/media/"template/cat06.jpg"" alt="" /> <a href="/magento-template-features/test-category/modern-art-furniture-magento-template.html"> <h3>Furniture</h3> </a> </div> </li> <li> <div><img src="https://web-experiment.info/media/"template/cat07.jpg"" alt="" /> <a href="/summer-sale.html"> <h3>Summer Sale</h3> </a> </div> </li> </ul> </div> <script type="text/javascript"> jqSmartCatalog(window).load(function() { jqSmartCatalog('div.smart-columns-light').wpSmartColumns({columnWidth: 200, addListCssClass: 'categories_list'}); }); </script> <div class="best_sellers_title">Latest Fashion Trends</div> <a href="/clothing/women.html" class="all">more</a> <div class="cat_promo"></div> <hr> <a href="/clothing/handbag.html" class="all">more</a> <div class="cat_promo"></div> <hr> <div class="four_banners"> <div class="four_banners_bt clearfix"> <div class="b01"><a class="title" href="#">Home Textile</a> </a> <ul> <li><a href="#">Living room</a></li> <li><a href="#">Kitchen</a></li> <li><a href="#">Bathroom</a></li> <li><a href="#">Bedroom</a></li> </ul> </div> <div class="b02"><a class="title" href="#">Clothing</a> <ul> <li><a href="#">Rugs and Accessories</a></li> <li><a href="#">Candles and Holders</a></li> <li><a href="#">Pillows</a></li> <li><a href="#">Clocks</a></li> </ul> </div> <div class="b03"><a class="title" href="#">Beauty Trends</a> <ul> <li><a href="#">Fragrance</a></li> <li><a href="#">Bath and Body</a></li> <li><a href="#">Hair Care</a></li> <li><a href="#">Makeup</a></li> </ul> </div> <div class="b04"><a class="title" href="#">Clearance</a> <ul> <li><a href="#">Clothing and Shoes</a></li> <li><a href="#">Jewelry and Watches</a></li> <li><a href="#">Home and Garden</a></li> </ul> </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="footer"> <block type="cms/block" name="home_page_footer_block"> <action method="setBlockId"><block_id>home_page_footer_block</block_id></action> </block> </reference> <reference name="head"> <action method="addItem"><type>skin_css</type><name>css/slider.css</name><params/></action> <action method="addItem"><type>skin_js</type><name>js/cycle-fade-effect.js</name></action> </reference>
If you have Total Slider Manager, Content Do not forget to replace "Top Adv Category", "HomeProductsCategoryID" with the ID of the created categories	<div class="fw">SLIDER CODE</div> <div class="right_cat"></div> <div class="smart-columns-light"> <ul class="smart categories_list"> <li> <div><img src="https://web-experiment.info/media/"template/cat01.jpg"" alt="" /> <a href="/clothing.html"> <h3>Clothing</h3> </a> </div> </li> <li> <div><img src="https://web-experiment.info/media/"template/cat02.jpg"" alt="" /> <a href="/clothing/watches.html"> <h3>Jewelry and Watches</h3> </a> </div> </li> <li> <div><img src="https://web-experiment.info/media/"template/cat03.jpg"" alt="" /> <a href="/clothing/accessories.html"> <h3>Accessories</h3> </a> </div> </li> <li> <div><img src="https://web-experiment.info/media/"template/cat04.jpg"" alt="" /> <a href="#"> <h3>Health and Beauty</h3> </a> </div> </li> <li> <div><img src="https://web-experiment.info/media/"template/cat05.jpg"" alt="" /> <a href="/magento-template-features/test-category/kids-magento-template.html"> <h3>Kids</h3> </a> </div> </li> <li> <div><img src="https://web-experiment.info/media/"template/cat06.jpg"" alt="" /> <a href="/magento-template-features/test-category/modern-art-furniture-magento-template.html"> <h3>Furniture</h3> </a> </div> </li> <li> <div><img src="https://web-experiment.info/media/"template/cat07.jpg"" alt="" /> <a href="/summer-sale.html"> <h3>Summer Sale</h3> </a> </div> </li> </ul> </div> <script type="text/javascript"> jqSmartCatalog(window).load(function() { jqSmartCatalog('div.smart-columns-light').wpSmartColumns({columnWidth: 200, addListCssClass: 'categories_list'}); }); </script> <div class="best_sellers_title">Latest Fashion Trends</div> <a href="/clothing/women.html" class="all">more</a> <div class="cat_promo"></div> <hr> <a href="/clothing/handbag.html" class="all">more</a> <div class="cat_promo"></div> TRISHA SLIDER CODE <hr> <div class="four_banners"> <div class="four_banners_bt clearfix"> <div class="b01"><a class="title" href="#">Home Textile</a> </a> <ul> <li><a href="#">Living room</a></li> <li><a href="#">Kitchen</a></li> <li><a href="#">Bathroom</a></li> <li><a href="#">Bedroom</a></li> </ul> </div> <div class="b02"><a class="title" href="#">Clothing</a> <ul> <li><a href="#">Rugs and Accessories</a></li> <li><a href="#">Candles and Holders</a></li> <li><a href="#">Pillows</a></li> <li><a href="#">Clocks</a></li> </ul> </div> <div class="b03"><a class="title" href="#">Beauty Trends</a> <ul> <li><a href="#">Fragrance</a></li> <li><a href="#">Bath and Body</a></li> <li><a href="#">Hair Care</a></li> <li><a href="#">Makeup</a></li> </ul> </div> <div class="b04"><a class="title" href="#">Clearance</a> <ul> <li><a href="#">Clothing and Shoes</a></li> <li><a href="#">Jewelry and Watches</a></li> <li><a href="#">Home and Garden</a></li> </ul> </div> </div> </div>
If you have Total Slider Manager, 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="footer"> <block type="cms/block" name="home_page_footer_block"> <action method="setBlockId"><block_id>home_page_footer_block</block_id></action> </block> </reference>
If you have Total Slider Manager, home_page_header_block	You would need to create a home_page_header_block static block and place a slider code inside it. Go to CMS->Static Block to add new static blocks.

 

Extensions

Custom Menu

Please load the extension here

• Custom Menu Guides
• Custom Menu settings for this template

Shipping price calculator and One page checkout

Included in the package.

• Shipping Price Calculator Installation Guide
• OnePage Magento Checkout Installation Guide

Total Slider Manager

• Total Slider Manager User Guide
• Total Slider Manager Settings

Other extensions

• Extension which might be used with this theme: EM Quickshop, AW blog, EasyTabs, Quick Feedback, ShareThis.

Other guides

• Color Changer
• Customize the display of categories
• Smart Product Image
• Smart Columns
• Static Content (includes the news, testimonials, brands)
• How to change "jQuery Cycle Plugin" effect, for templates without "Total Slider Manager"

Congratulations! Your magento theme is ready!

Thank you for using this theme.

Magento How Toes

Useful video tutorials powered by Template-help.com

• How to remove the warning message about {{base url}}
• How to add a category
• How to add a simple product
• How to create a configurable product
• How to create an attribute
• How to create an attribute set
• How to configure tier pricing
• How to configure a product listing layout
• How to add a static page
• How to manage html pages content

Magento template customization

Video tutorials powered by Template-help.com

• How to change the logo
• How to change the welcome message
• How to disable side-boxes
• How to edit the footer copyright notification
• How to change the home page banner links
• How to disable blocks on the home page

Go to contentsBack to previous page