This crisp, modern Magento theme is packed with great features like CMS page links in the navigation, callouts in the header that can be seen on every page, and an exploded category listing on the homepage which is editable with simple HTML.
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 "active" (without quotes).
From the top navigation, navigate to CMS > Static Blocks.
Click the + Add New Block button.
Enter a Title for the block, enter "nav_links" (without quotes) as the Identifier, select your Store View, and set the Status to Enabled.
Click the "Show/Hide Editor" button to disable the editor and enter code mode. Then, enter the following code to make your links appear exactly as it does on our demo store:
<li><a href="{{store url=''}}about-magento-demo-store"><span>About Us</span></a></li>
<li><a href="{{store url=''}}about-magento-demo-store"><span>Store Locator</span></a></li>
<li><a href="{{store url=''}}catalogsearch/advanced"><span>Advanced Search</span></a></li>
<li><a href="{{store url=''}}customer-service"><span>Help</span></a></li>
<li><a href="{{store url=''}}contacts"><span>Contact Us</span></a></li>
Note: This code is provided as an example and may be edited to suit your needs. Each time that this static block is resaved, Magento's cache must be refreshed via System > Cache Management for the changes to take effect.
From the top navigation, navigate to CMS > Static Blocks.
Click the + Add New Block button.
Enter a Title for the block, enter "top_promo" (without quotes) as the Identifier, select your Store View, and set the Status to Enabled.
Click the "Show/Hide Editor" button to disable the editor and enter code mode. Then, enter the following code to make your links appear exactly as it does on our demo store:
<ul>
<li>
<img src="{{skin url=''}}images/media/top-promo-01.png" style="float:left;" />
<div style="float:right; width:110px; padding-top:10px;">
<h3>Activewear At Great Prices!</h3>
<button onClick="location.href='{{store url=''}}active-tops/'" class="button small"><span><span>Shop Now</span></span></button>
</div>
</li>
<li>
<img src="{{skin url=''}}images/media/top-promo-02.png" style="float:left;" />
<div style="float:right; width:110px; padding-top:10px;">
<h3>Get The Best Equipment!</h3>
<button onClick="location.href='{{store url=''}}equipment/'" class="button small"><span><span>Shop Now</span></span></button>
</div>
</li>
<li>
<img src="{{skin url=''}}images/media/top-promo-03.png" style="float:left;" />
<div style="float:right; width:110px; padding-top:10px;">
<h3>Gear Up For Any Sport!</h3>
<button onClick="location.href='{{store url=''}}equipment/gear/'" class="button small"><span><span>Shop Now</span></span></button>
</div>
</li>
</ul>
Note: This code is provided as an example and may be edited to suit your needs. Each time that this static block is resaved, Magento's cache must be refreshed via System > Cache Management for the changes to take effect.
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:
<!-- Begin Slider -->
<div style="height:311px; margin-bottom:15px;">
<div id="slideshow1" class="slide"><div>
<a href="{{store url=''}}footwear/running"><img src="{{skin url=''}}images/media/main-graphic.jpg" border="0" /></a>
</div></div>
<div id="slideshow2" class="slide" style="display: none"><div>
<a href="{{store url=''}}swimwear"><img src="{{skin url=''}}images/media/slide-2.jpg" border="0" /></a>
</div></div>
<div id="slideshow3" class="slide" style="display:none;"><div>
<a href="{{store url=''}}about-magento-demo-store"><img src="{{skin url=''}}images/media/slide-3.jpg" border="0" /></a>
</div></div>
<script type="text/javascript">
start_slideshow(1, 3, 2000);
function start_slideshow(start_frame, end_frame, delay) {
setTimeout(switch_slides(start_frame,start_frame,end_frame, delay), delay);
}
function switch_slides(frame, start_frame, end_frame, delay) {
return (function() {
Effect.Fade('slideshow' + frame);
if (frame == end_frame) { frame = start_frame; } else { frame = frame + 1; }
setTimeout("Effect.Appear('slideshow" + frame + "');", 850);
setTimeout(switch_slides(frame, start_frame, end_frame, delay), delay + 850);
})
}
</script>
</div>
<!-- End Of Slider -->
<div class="home-content categories">
<h2>Categories</h2>
<div class="category first">
<a href="{{store url=''}}active-tops"><img src="{{skin url=''}}images/media/category-active-tops.png" /></a>
<h3><a href="{{store url=''}}active-tops">Active Tops</a></h3>
<ul>
<li><a href="{{store url=''}}active-tops/running-tops">Running Tops</a></li>
<li><a href="{{store url=''}}active-tops/basketball">Basketball</a></li>
<li><a href="{{store url=''}}active-tops/tshirts">T-Shirts</a></li>
<li><a href="{{store url=''}}active-tops/sweats">Sweats</a></li>
<li><a href="{{store url=''}}active-tops/track-jackets">Track Jackets</a></li>
</ul>
<a href="{{store url=''}}active-tops" class="view-all">All Active Tops</a>
</div>
<div class="category">
<a href="{{store url=''}}bottoms"><img src="{{skin url=''}}images/media/category-bottoms.png" /></a>
<h3><a href="{{store url=''}}bottoms">Bottoms</a></h3>
<ul>
<li><a href="{{store url=''}}bottoms/track-pants">Track Pants</a></li>
<li><a href="{{store url=''}}bottoms/cycling-shorts">Cycling Shorts</a></li>
<li><a href="{{store url=''}}bottoms/basketball">Basketball</a></li>
<li><a href="{{store url=''}}bottoms/sweats">Sweats</a></li>
</ul>
<a href="{{store url=''}}bottoms" class="view-all">All Bottoms</a>
</div>
<div class="category">
<a href="{{store url=''}}footwear"><img src="{{skin url=''}}images/media/category-footwear.png" /></a>
<h3><a href="{{store url=''}}footwear">Footwear</a></h3>
<ul>
<li><a href="{{store url=''}}footwear/running">Running</a></li>
<li><a href="{{store url=''}}footwear/basketball">Basketball</a></li>
<li><a href="{{store url=''}}footwear/football">Football</a></li>
<li><a href="{{store url=''}}footwear/golf">Golf</a></li>
<li><a href="{{store url=''}}footwear/hiking">Hiking</a></li>
</ul>
<a href="{{store url=''}}footwear" class="view-all">All Footwear</a>
</div>
<div class="category">
<a href="{{store url=''}}swimwear"><img src="{{skin url=''}}images/media/category-swimwear.png" /></a>
<h3><a href="{{store url=''}}swimwear">Swimwear</a></h3>
<ul>
<li><a href="{{store url=''}}swimwear/mens-swim-trunks">Men's Swim Trunks</a></li>
<li><a href="{{store url=''}}swimwear/mens-swim-briefs">Men's Swim Briefs</a></li>
<li><a href="{{store url=''}}swimwear/womens-one-piece">Women's 1-Piece</a></li>
<li><a href="{{store url=''}}swimwear/womens-two-piece">Women's 2-Piece</a></li>
<li><a href="{{store url=''}}swimwear/wet-suits">Wet Suits</a></li>
</ul>
<a href="{{store url=''}}swimwear" class="view-all">All Swimwear</a>
</div>
<div class="category">
<a href="{{store url=''}}equipment"><img src="{{skin url=''}}images/media/category-equipment.png" /></a>
<h3><a href="{{store url=''}}equipment">Equipment</a></h3>
<ul>
<li><a href="{{store url=''}}equipment/sports-balls">Sports Balls</a></li>
<li><a href="{{store url=''}}equipment/nets-raquets">Nets/Raquets</a></li>
<li><a href="{{store url=''}}equipment/pumps-repair">Pumps/Repair</a></li>
<li><a href="{{store url=''}}equipment/safety">Safety</a></li>
</ul>
<a href="{{store url=''}}equipment" class="view-all">All Equipment</a>
</div>
<div class="category">
<a href="{{store url=''}}gadgets"><img src="{{skin url=''}}images/media/category-gadgets.png" /></a>
<h3><a href="{{store url=''}}gadgets">Gadgets</a></h3>
<ul>
<li><a href="{{store url=''}}gadgets/pedometers">Pedometers</a></li>
<li><a href="{{store url=''}}gadgets/nets-raquets">Heart-Rate Monitors</a></li>
<li><a href="{{store url=''}}gadgets/calorie-diet-monitors">Calorie/Diet Monitors</a></li>
<li><a href="{{store url=''}}gadgets/watches-timers">Watches/Timers</a></li>
<li><a href="{{store url=''}}gadgets/performance">Performance</a></li>
</ul>
<a href="{{store url=''}}gadgets" class="view-all">All Gadgets</a>
</div>
<div class="category last">
<a href="{{store url=''}}accessories"><img src="{{skin url=''}}images/media/category-accessories.png" /></a>
<h3><a href="{{store url=''}}accessories">Accessories</a></h3>
<ul>
<li><a href="{{store url=''}}accessories/head-wrist-bands">Head/Wrist Bands</a></li>
<li><a href="{{store url=''}}accessories/safety-guards-pads">Safety Guards/Pads</a></li>
<li><a href="{{store url=''}}accessories/suppliments">Suppliments</a></li>
<li><a href="{{store url=''}}accessories/nutrition">Nutrition</a></li>
</ul>
<a href="{{store url=''}}accessories" class="view-all">All Accessories</a>
</div>
<div style="clear:both;"></div>
</div>
{{widget type="catalog/product_widget_new" products_count="4" template="catalog/product/widget/new/content/new_grid.phtml"}}
<div class="home-content home-callouts">
<h2>Bonus Features</h2>
<div style="height:111px; padding-bottom:8px;">
<img src="{{skin url=''}}images/media/home-bottom-promo-01.png" style="float:left; margin-right:8px;" />
<h4>Weight Lifting</h4>
<p>Get great tips for gaining that bulk you crave, without the fat!</p>
<p><a href="http://www.twitter.com/example" target="_blank">Follow us on Twitter!</a></p>
</div>
<div style="height:111px; padding-bottom:8px;">
<img src="{{skin url=''}}images/media/home-bottom-promo-02.png" style="float:left; margin-right:8px;" />
<h4>Aerobics Classes</h4>
<p>Find a class that's right for you, in your area!</p>
<p><a href="{{store url=''}}about-magento-demo-store">Find Yours Today!</a></p>
</div>
<div style="height:111px;">
<img src="{{skin url=''}}images/media/home-bottom-promo-03.png" style="float:left; margin-right:8px;" />
<h4>Mountain Biking</h4>
<p>Find great trails in your area, recommended by users like you!</p>
<p><a href="{{store url=''}}about-magento-demo-store">Let's Go!</a></p>
</div>
</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!