Tecknica Template

Installing Your Theme

Step 1: Install Magento

Complete an installation of Magento on your site and create a Website, Store, and Store View.

Step 2: Upload Your Theme

After installing Magento on your site, upload your theme files to the appropriate folders, following the folder structure in which the theme is provided.

Step 3: Activate Your Theme

1. Access the Admin Panel and navigate to System > Configuration.

2. Select your Store View from the Current Configuration Scope drop-down menu in the upper left corner.

3. Click on "Design" under the "General" section of the left side navigation.

4. Under the "Themes" section, uncheck all of the check boxes titled "Use website."

5. In each text field, enter the name of the folders containing the theme you wish to use.

   In this case, enter "tecknica" (without quotes).

Setting Up Your Pages

Step 1: Install Homepage

1. From the top navigation, navigate to CMS > Pages.

2. Click on the "+ Add New Page" button.

3. Enter your desired page title.

4. For the home page, be sure to set your URL Key as "home" and select your store view.

5. Select "Design" from the left side navigation and set Layout to "3 columns."

6. Enter the following code in the text area labeled "Layout Update XML."

   <reference name="left">
     <block type="catalog/navigation" before="-" name="catalog.sidebar" template="catalog/navigation/sidebar.phtml"/>
   </reference>
   <reference name="content">
     <block type="catalog/product_new" name="home.product.new" alias="product_new" template="catalog/product/new.phtml">
   	 <action method="addPriceBlockType">
   		<type>bundle</type>
   		<block>bundle/catalog_product_price</block>
   		<template>bundle/catalog/product/price.phtml</template>
   	 </action>
     </block>
   </reference>
   <reference name="top_slider">
     <block type="cms/block"  name="showcase">
   	 <action method="setBlockId">
   		<block_id>showcase</block_id>
   	 </action>
     </block> 
   </reference>
   <remove name="right.newsletter"/>

7. Select "Content" from the left side navigation, click the "Show/Hide Editor" button and enter the following code:

   <!-- content -->

8. Set the Status to "Enabled" and click on the "Save Page" button in the upper right corner to save and activate your homepage.

Step 2: CMS > Static Blocks

1. Navigate to CMS > Static Blocks.

2. Click the + Add New Block button.

3. Create the block "showcase" with the following code for content:

   <div id="slider">
   	<div class="slidercontrolwr">
   		<div class="slidercontrol">
   		<a href="#" class="aprev" title="Previous" onclick="my_glider.previous();return false;">Previous</a>
   		<a href="#" class="astop" title="Stop" onclick="my_glider.stop();return false">Stop</a>
   		<a href="#" class="aplay" title="Play" onclick="my_glider.start();return false">Start</a>
   		<a href="#" class="anext" title="Next" onclick="my_glider.next();return false">next</a>
   		</div>
   	</div>
   	<div class="scroller">
   		<div class="content">
   			<div class="section" id="section1">
   				<a href="#" title=""><img src="{{skin url=""}}images/slider1.jpg" alt="" /></a>
   			</div>
   			<div class="section" id="section2">
   				<a href="#" title=""><img src="{{skin url=""}}images/slider2.jpg" alt="" /></a>
   			</div>
   			<div class="section" id="section3">
   				<a href="#" title=""><img src="{{skin url=""}}images/slider3.jpg" alt="" /></a>
   			</div>
   			<div class="section" id="section4">
   				<a href="#" title=""><img src="{{skin url=""}}images/slider4.jpg" alt="" /></a>
   			</div>
   		</div>
   	</div>
   </div>
   
   <script src="{{skin url=""}}js/glider.js" type="text/javascript"></script>
   
   <script type="text/javascript" charset="utf-8">
   	var my_glider = new Glider('slider', {duration:0.5, autoGlide: false, frequency: 4, initialSection: 'section1'});
   </script>

4. Create the block "menu" with the following code for content:

   <li><a href="{{store url=""}}about"><span>About Us</span></a></li>
   <li><a href="{{store url=""}}testimonials"><span>Testimonials</span></a></li>
   <li><a href="{{store url=""}}contacts"><span>Contact Us</span></a></li>

5. Create the block "payments" with the following code for content:

   <img src="{{skin url=""}}images/payments.gif" alt="payments" />

Step 3: Change Number of New Products on Front Page

1. Open the file app\code\core\Mage\Catalog\Block\Product\New.php

2. Locate the code const DEFAULT_PRODUCTS_COUNT = 5;

3. Change the "5" to a "6" or to whatever number of products you desire to have displayed on your homepage.

That's it! Congratulations

Just set up your categories and products, and you now have a beautiful, fully functioning ecommerce website!