Installation

Marvelous Watches Template

This Magento template, sold exclusively by Magentist, is clean, modern, and subtle. A template with such a widespread appeal is perfect for selling a diverse range of consumer goods including fashion and accessories, technology, and virtual products.

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

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 "watches" (without quotes).

Step 4: Set Up Your Homepage

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 Left Column-->
<div class="col-left-home">

	<!--Begin Links Group 1-->
	<h2 class="blue-head">Popuplar Brands</h2>
	<div class="rounded-corners-top"><div></div></div>
	<div class="list-home">
		<ul class="home-list">
			<li><a href="#">Prada</a></li>
			<li><a href="#">Gucci</a></li>
			<li><a href="#">Louis Vuitton</a></li>
			<li><a href="#">Versace</a></li>
			<li><a href="#">Fendi</a></li>
			<li><a href="#">Chanel</a></li>
			<li><a href="#">Coach</a></li>
		</ul>
	</div>
	<div class="rounded-corners-bottom" style="margin-bottom:15px;"><div></div></div>
	<!--End Links Group 1-->
	
	<!--Begin Links Group 2-->
	<h2 class="blue-head">Popuplar Products</h2>
	<div class="rounded-corners-top"><div></div></div>
	<div class="list-home">
		<ul class="home-list">
			<li><a href="#">Milagro Clutch</a></li>
			<li><a href="#">Wichita Handbag</a></li>
			<li><a href="#">Snake Skin Messenger</a></li>
			<li><a href="#">Orpheo Ring</a></li>
			<li><a href="#">Inmedio Cross Pendant</a></li>
			<li><a href="#">Black Onyx Watch</a></li>
			<li><a href="#">Checker Carry-On</a></li>
		</ul>
	</div>
	<div class="rounded-corners-bottom"><div></div></div>
	<!--End Links Group 2-->
	
</div>
<!--End Left Column-->

<!--Begin Right Column-->
<div class="col-right-home">

	<!--Begin Slider-->
	<div id="slider">
		<!--Begin Slider Controls-->
		<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>
		<!--End Slider Controls-->
		
		<!--Begin Slider Content-->
		<div class="scroller">
			<div class="slider-content">
			
				<!--Begin Slide 1-->
				<div class="section" id="section1">
					<div style="background:url({{skin url=""}}images/slider1.jpg) 0 0 no-repeat; display:block; width:745px; height:235px;"><a class="shop-now shop-now-dark" style="position:relative; top:148px; left:40px;" href="#">Show Now</a></div>
				</div>
				<!--End Slide 1-->
				
				<!--Begin Slide 2-->
				<div class="section" id="section2">
					<div style="background:url({{skin url=""}}images/slider2.jpg) 0 0 no-repeat; display:block; width:745px; height:235px;"><a class="shop-now shop-now-dark" style="position:relative; top:148px; left:40px;" href="#">Show Now</a></div>
				</div>
				<!--End Slide 2-->
				
				<!--Begin Slide 3-->
				<div class="section" id="section3">
					<div style="background:url({{skin url=""}}images/slider1.jpg) 0 0 no-repeat; display:block; width:745px; height:235px;"><a class="shop-now shop-now-dark" style="position:relative; top:148px; left:40px;" href="#">Show Now</a></div>
				</div>
				<!--End Slide 3-->
				
				<!--Begin Slide 4-->
				<div class="section" id="section4">
					<div style="background:url({{skin url=""}}images/slider2.jpg) 0 0 no-repeat; display:block; width:745px; height:235px;"><a class="shop-now shop-now-dark" style="position:relative; top:148px; left:40px;" href="#">Show Now</a></div>
				</div>
				<!--End Slide 4-->
			</div>
		</div>
		<!--End Slider Content-->
	</div>
	<!--End Slider-->
		<!--Begin Script for Slider DO NOT REMOVE-->
		<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>
		<!--End Script for Slider DO NOT REMOVE-->

	<!--Begin New Products-->		
	<h2 class="blue-head">New Arrivals</h2>
	
	<div class="rounded-corners-top"><div></div></div>
	<div class="list-home">
	{{block type="catalog/product_new" name="home.catalog.product.new" alias="product_homepage" template="catalog/product/new.phtml"}}
	</div>
	<div class="rounded-corners-bottom" style="margin-bottom:15px;"><div></div></div>
	<!--End New Products-->

</div>
<!--End Right Column-->

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

That's it! Congratulations

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