This Magento template is sleek and modern, great for selling media or electronics. The homepage features a display of new products as sorted by category! This will improve conversion rates as customers are allowed to reduce the number of clicks required to find what they need.
Complete an installation of Magento on your site and create a Website, Store, and Store View.
After installing Magento on your site, upload your theme files to the appropriate folders, following the folder structure in which the theme is provided.
Access the Admin Panel and navigate to System > Configuration.
Select your Store View from the Current Configuration Scope drop-down menu in the upper left corner.
Click on "Design" under the "General" section of the left side navigation.
Under the "Themes" section, uncheck all of the check boxes titled "Use website."
In each text field, enter the name of the folders containing the theme you wish to use.
In this case, enter "media" (without quotes).
From the top navigation, navigate to CMS > Pages.
Click on the "+ Add New Page" button.
Enter your desired page title.
For the home page, be sure to set your URL Key as "home" and select your store view.
Select "Design" from the left side navigation and set Layout to "1 column."
Select "Content" from the left side navigation and enter the content for your home page in the text area.
To make your homepage appear as the example on our site, click the "Show/Hide Editor" button and enter the following code:
<!--Main Graphic-->
<div style="background:url({{skin url=""}}images/media/home-main.gif) 0 0 no-repeat #f7f7f7; display:block; width:190px; height:102px; border:none; float:left; padding:108px 0 0 770px;">
<a href="/music.html" class="bttn-css" style="display:block; width:133px; height:39px; background:url({{skin url=""}}images/media/bttn-learn-more.gif) 0 0 no-repeat; text-indent:9999px; overflow:hidden;">Learn_More</a>
</div>
<!--Quick Links-->
<div style="clear:both; float:left; width:220px; padding-right:15px; background:#f7f7f7;">
<div class="category-head"><h2>Quick Links</h2></div>
<ul class="quicklinks">
<li><a href="/music.html">Browse All Music</a></li>
<li><a href="/videos.html">Browse All Videos</a></li>
<li><a href="/ebooks.html">Browse All eBooks</a></li>
<li><a href="/about-magento-demo-store">About Videamus</a></li>
<li class="last-child"><a href="/contacts">Contact Us</a></li>
</ul>
</div>
<!--Category 1-->
<div style="float:left; width:725px;">
<div class="category-head">
<h2 style="width:50%; float:left;">New Music</h2>
<div style="float:right; padding-right:15px; line-height:38px;"><a href="/music.html" title="See Category">View More</a></div>
<div class="clear"></div>
</div>
{{block type="catalog/product_list" category_id="10" name="home.catalog.product.new" alias="product_homepage" template="catalog/product/featured.phtml"}}
</div>
<div class="clear"></div>
<!--Callout 1-->
<div style="clear:both; float:left; width:220px; padding:15px 15px 1px 0; background:#f7f7f7;">
<a href="/music.html" style="border:none; text-decoration:none; display:block; width:220px; height:225px;"><img src="{{skin url=""}}images/media/50off.gif" border="0" /></a>
</div>
<!--Category 2-->
<div style="float:left; width:725px; padding-top:15px;">
<div class="category-head">
<h2 style="width:50%; float:left;">New Videos</h2>
<div style="float:right; padding-right:15px; line-height:38px;"><a href="/videos.html" title="See Category">View More</a></div>
<div class="clear"></div>
</div>
{{block type="catalog/product_list" category_id="11" name="home.catalog.product.new" alias="product_homepage" template="catalog/product/featured.phtml"}}
</div>
<div class="clear"></div>
<!--Callout 2-->
<div style="clear:both; float:left; width:220px; padding:15px 15px 0px 0; background:#f7f7f7;">
<a href="/ebooks.html" style="border:none; text-decoration:none; display:block; width:220px; height:224px;"><img src="{{skin url=""}}images/media/eBooks.gif" border="0" /></a>
</div>
<!--Category 3-->
<div style="float:left; width:725px; padding-top:15px;">
<div class="category-head">
<h2 style="width:50%; float:left;">New eBooks</h2>
<div style="float:right; padding-right:15px; line-height:38px;"><a href="/ebooks.html" title="See Category">View More</a></div>
<div class="clear"></div>
</div>
{{block type="catalog/product_list" category_id="12" name="home.catalog.product.new" alias="product_homepage" template="catalog/product/featured.phtml"}}
</div>
<div class="clear"></div>
Set the Status to "Enabled" and click on the "Save Page" button in the upper right corner to save and activate your homepage.
Just set up your categories and products, and you now have a beautiful, fully functioning ecommerce website!