Mobile Shoppe – A Responsive Theme

1) Create cms page (home page) step bellow:

Add/Edit your homepage from CMS->pages menu from magento admin control panel and Paste below code

{{block type="cms/block" block_id="flexislider"}}
<h2>Featured Product</h2>
{{block type="catalog/product_list" category_id="YOUR_CATEGORY_ID" template="catalog/product/list_tabs.phtml"}}
<h2>Latest Product</h2>
{{block type="catalog/product_list" category_id="YOUR_CATEGORY_ID" template="catalog/product/list_tabs.phtml"}}
<h2>On Sale</h2>
{{block type="catalog/product_list" category_id="YOUR_CATEGORY_ID" template="catalog/product/list_tabs.phtml"}}
{{block type="cms/block" block_id="clients-logo"}}

* Do not forget to replace YOUR_CATEGORY_ID with your real category ID value

* Keep layout style to 1 column

Create new static block with identifier as "clients-logo" and paste following code. You can keep any name for Block Title

<div class="clients-logo">
<a href="#"><img src="{{skin url='images/f_logo1.jpg'}}"></a>
<a href="#"><img src="{{skin url='images/f_logo2.jpg'}}"></a>
<a href="#"><img src="{{skin url='images/f_logo3.jpg'}}"></a>
<a href="#"><img src="{{skin url='images/f_logo4.jpg'}}"></a>
<a href="#"><img src="{{skin url='images/f_logo5.jpg'}}"></a>
<a href="#"><img src="{{skin url='images/f_logo6.jpg'}}"></a>
<a href="#"><img src="{{skin url='images/f_logo7.jpg'}}"></a>
<a href="#"><img src="{{skin url='images/f_logo8.jpg'}}"></a>
<a href="#"><img src="{{skin url='images/f_logo9.jpg'}}"></a>
</div>

2) Create static block for slider

Create new static block for homepage slider. keep any name for Block Title i.e. flexislider and use "flexislider" as identifier. Paste below code in that block. You can keep any name for Block Title.


<!-- Markup for Slide animation -->
<script type="text/javascript">
//<![CDATA[
$j(window).load(function() {
$j('.flexslider').flexslider({
animation: "slide",
controlsContainer: ".flexslider-container"
});
});
//]]>
</script>
<div class="flexslider-container">
<div class="flexslider">
<ul class="slides">
<li> <a href="{{store direct_url="electronics/cameras/olympus-stylus-750-7-1mp-digital-camera.html"}}"> <img src="{{skin url='images/slider/mcpro.jpg'}}" alt=""/> </a>
<p class="flex-caption"><span class="prod-name">MacBook Pro</span> - High-performance computing has reached a new level with super fast graphics and an i7 processor</p>
</li>
<li> <a href="{{store direct_url="electronics/cameras/olympus-stylus-750-7-1mp-digital-camera.html"}}"> <img src="{{skin url='images/slider/iphone.jpg'}}" alt=""/> </a>
<p class="flex-caption"><span class="prod-name">iPhones</span> - Great Prices On The World's Most Indemand Smartphones</p>
</li>
</ul>
</div>
</div>

2) Create static block for footer links and logo

Create new static block for footer links and logo. keep any name for Block Title i.e. Footer Links and use "footer_block" as identifier. Paste below code in that block.


<ul class="f-gray-links grid_3">
<h3>Company Info</h3>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Affililate Program</a></li>
<li><a href="#">Press Links</a></li>
<li><a href="#">Security &amp; Privacy Policy</a></li>
<li><a href="#">Account Agreement</a></li>
<li><a href="#">Terms of Use</a></li>
</ul>
<ul class="f-gray-links grid_3">
<h3>Top Categories</h3>
<li><a href="#">iPhone 4G</a></li>
<li><a href="#">Accessories</a></li>
<li><a href="#">iPhone</a></li>
<li><a href="#">iPod</a></li>
<li><a href="#">Touch Mobiles</a></li>
<li><a href="#">iGPS360</a></li>
<li><a href="#">Apple</a></li>
<li><a href="#">Nano</a></li>
<li><a href="#">3G iPhone</a></li>
</ul>
<ul class="f-gray-links grid_3">
<h3>Help &amp; Support</h3>
<li><a href="#">Help &amp; F.A.Q.s</a></li>
<li><a href="#">Referral Program</a></li>
<li><a href="#">Coupons</a></li>
<li><a href="#">Gift Certificates</a></li>
<li><a href="#">Shipping Policies</a></li>
<li><a href="#">Return Policy</a></li>
<li><a href="#">Estimate Delivery Date</a></li>
</ul>
<ul class="f-gray-links1 grid_3">
<li><a target="_blank" href="http://facebook.com"><img src="{{skin url='images/bg_footer_social_2.png'}}" alt="" /> </a></li>
<li><a target="_blank" href="http://twitter.com"><img src="{{skin url='images/Find-Us-twitter.png'}}" alt="Twitter" /></a></li>
<li><a target="_blank" href="http://linkedin.com"><img src="{{skin url='images/linkdin.png'}}" alt="" /></a></li>
</ul>
<div class="clear"></div>

Support

If you have any suggestion or request, contact our magento developer or email us at info@creativeglance.com


Visit us at http://www.creativeglance.com for more responsive theme and magento theme.