3.1 Page Configuration

3.1.1 Layout Position

• Click here to view Home Style 2
• Click here to view Home Style 3
• Click here to view Home Style 4
• Click here to view Home Style 5
• Click here to view Home Style 6
• Click here to view Home Style 7
• Click here to view Home Style 8

3.1.2 Homepage Configuration

• How to create “CMS Page: Home” in homepage?

In the Admin Panel, please navigate to CMS >> Pages >> click “Add new page” button or edit page that you created. Here is the list of steps in this styleai??i??s configuration process:

Page Information Tab: Please click to see the Backend Settings.
Content Tab: Please click to see the Backend Settings.
Copy and paste the following code into the Content field::

<div class="home-page-1">
	<div class="row">
		<div class="col-lg-9 col-lg-offset-3">
			{{block type="searchboxpro/list" template="sm/searchboxpro/top-search.phtml"}}
			<div class="clearfix slidershow-banner">
				<div class="image-slider-home ">
					<div class="sm-imageslider">
						<div class="sm-imageslider-inner">
							<div class="sm-imageslider-content owl-carousel owl-theme">
								<div class="item"><a title="title" href="#"><img src="{{media url="wysiwyg/imageslider/image-banner-1.jpg"}}" alt="Slider Image" /></a></div>
								<div class="item"><a title="title" href="#"><img src="{{media url="wysiwyg/imageslider/image-banner-2.jpg"}}" alt="Slider Image" /></a></div>
								<div class="item"><a title="title" href="#"><img src="{{media url="wysiwyg/imageslider/image-banner-3.jpg"}}" alt="Slider Image" /></a></div>
							</div>
						</div>
					</div>
					<script type="text/javascript">
						jQuery(document).ready(function($) {
							$(".sm-imageslider-content").owlCarousel({
								items:1,
								autoplay:true,
								loop:true,
								nav : true, 
								dots: false,
								autoplaySpeed : 500,
								navSpeed : 500,
								dotsSpeed : 500,
								autoplayHoverPause: true,
								margin:1,
							});	  
						});			
					</script>
				</div>
				
				<div class="static-image-1">
					<ul class="static-image">
					<li><a title="Static Image" href="#"> <img src="{{media url="wysiwyg/banner/banner1-1.jpg"}}" alt="Static Image" /> </a></li>
					<li><a title="Static Image" href="#"> <img src="{{media url="wysiwyg/banner/banner1-2.jpg"}}" alt="Static Image" /> </a></li>
					<li><a title="Static Image" href="#"> <img src="{{media url="wysiwyg/banner/banner1-3.jpg"}}" alt="Static Image" /> </a></li>
					</ul>
				</div>
			</div>
			
			<div class="services-home clearfix">
				<div class="banner-policy">
				<div class="inner">
				<div class="policy"><a title="90 days money back" href="#"><em class="fa fa-truck"></em><span>FREE SHIPPING<br />ON ALL ORDER</span></a></div>
				<div class="policy"><a title="free shipping on all orders" href="#"><em class="fa fa-recycle"></em><span>Money Back<br />Guarantee</span></a></div>
				<div class="policy"><a title="lowest price guarantee" href="#"><em class="fa fa-umbrella"></em><span>SAFE SHOPPING<br />GUARANTEE</span></a></div>
				</div>
				</div>
			</div>
		</div>
	</div>
	
	{{block type="listingtabs/list" template="sm/listingtabs/default.phtml" listingtabs_title_text="Best sellers" show_loadmore_slider="slider" filter_type="categories" filter_order_by="" product_order_by="best_sales" category_preload="139" product_category="139,50,46" product_limitation="6" nbi_column1="4" nbi_column2="3" nbi_column3="2" nbi_column4="1"}}
	
	<div class="row">
		<div class="static-image-2">
			<div class="col-lg-4 col-md-4 col-sm-4 static-image"><a title="Static Image" href="#"><img src="{{media url="wysiwyg/banner/banner-4.jpg"}}" alt="Static Image" /></a></div>
			<div class="col-lg-4 col-md-4 col-sm-4 static-image"><a class="image-top" title="Static Image" href="#"><img src="{{media url="wysiwyg/banner/banner-5.jpg"}}" alt="Static Image" /></a> <a title="Static Image" href="#"><img src="{{media url="wysiwyg/banner/banner-6.jpg"}}" alt="Static Image" /></a></div>
			<div class="col-lg-4 col-md-4 col-sm-4 static-image"><a title="Static Image" href="#"><img src="{{media url="wysiwyg/banner/banner-7.jpg"}}" alt="Static Image" /></a></div>
		</div>
	</div>
	
	{{block type="listingtabs/list" template="sm/listingtabs/default.phtml" listingtabs_title_text="New Arrivals" show_loadmore_slider="slider" filter_type="categories" filter_order_by="" product_order_by="lastest_product" category_preload="4" product_category="4,50,46" product_limitation="6" nbi_column1="4" nbi_column2="3" nbi_column3="2" nbi_column4="1"}}

	<div class="home-collection">
		<div class="collections-wrap">
			<div class="title-home-page"><span>Collections</span></div>
			
			<div class="collections">
				<div class="owl-carousel">
					<div class="item"><a title="FURNITURE" href="#"> <img src="{{media url="wysiwyg/collection/item-1.png"}}" alt="Collection Image" /> <span>FURNITURE</span> </a></div>
					<div class="item"><a title="GIFT IDEA" href="#"> <img src="{{media url="wysiwyg/collection/item-2.png"}}" alt="Collection Image" /> <span>GIFT IDEA</span> </a></div>
					<div class="item"><a title="COOL GADGETS" href="#"> <img src="{{media url="wysiwyg/collection/item-3.png"}}" alt="Collection Image" /> <span>COOL GADGETS</span> </a></div>
					<div class="item"><a title="OUTDOOR" href="#"> <img src="{{media url="wysiwyg/collection/item-4.png"}}" alt="Collection Image" /> <span>OUTDOOR</span> </a></div>
					<div class="item"><a title="Jewelry" href="#"> <img src="{{media url="wysiwyg/collection/item-5.png"}}" alt="Collection Image" /> <span>Jewelry</span> </a></div>
					<div class="item"><a title="Men's Fashion" href="#"> <img src="{{media url="wysiwyg/collection/item-6.png"}}" alt="Collection Image" /> <span>Men's Fashion</span> </a></div>
					<div class="item"><a title="FURNITURE" href="#"> <img src="{{media url="wysiwyg/collection/item-1.png"}}" alt="Collection Image" /> <span>FURNITURE</span> </a></div>
				</div>
			</div>
			
			<script type="text/javascript">
				jQuery(document).ready(function($) {
					$(".home-collection .owl-carousel").owlCarousel({
						responsive:{
							0:{
								items:2
							},
							480:{
								items:3
							},
							768:{
								items:4
							},
							992:{
								items:5
							},
							1200:{
								items:6
							}
						},

						autoplay:false,
						loop:false,
						nav : true,
						dots: false,
						autoplaySpeed : 500,
						navSpeed : 500,
						dotsSpeed : 500,
						autoplayHoverPause: true,
						margin:0,
					});	  
				});	 
					
			</script>
		</div>
	</div>

	{{block type="categories/list" template="sm/categories/default.phtml"}}
</div>

Design Tab: Please click to see the Backend Settings.

• How to create “CMS Block: Footer-1-Content” in homepage?

In the Admin Panel, please navigate to CMS >> Static Blocks >> click “Add new block” or edit blocks that you created.
Please try to use below example code in your cms contents.

<div class="footer-head">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4">{{block type="page/html" template="page/html/social.phtml"}}</div>
<div class="col-lg-8 col-md-8">{{block type="newsletter/subscribe" template="newsletter/subscribe-footer.phtml"}}</div>
</div>
</div>
</div>
<div class="footer-top">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4">
<div class="contact-col">
<div class="footer-block">
<div class="footer-block-title">
<h3>Contact Us</h3>
</div>
<div class="footer-block-content">
<ul class="links-contact">
<li class="add-icon">Address: No 40 Baria Sreet 133/2 NewYork<br />City, NY, United States</li>
<li class="email-icon middle-content">Email: contact@market.com</li>
<li class="phone-icon">Phone 1 : 0123456789<br />Phone 2 : 0123456789</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-8 col-md-8">
<div class="row">
<div class="col-lg-4 col-md-4">
<div class="footer-block">
<div class="footer-block-title">
<h3>About Market</h3>
</div>
<div class="footer-block-content">
<ul class="links-footer">
<li><a title="About Us" href="{{store url=""}}about-us.html">About Us</a></li>
<li><a title="Market Reviews" href="#">Market Reviews</a></li>
<li><a title="Terms of Use" href="#">Terms of Use</a></li>
<li><a title="Privacy Policy" href="#">Privacy Policy</a></li>
<li><a title="Site Map" href="#">Site Map</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="footer-block">
<div class="footer-block-title">
<h3>Customer Service</h3>
</div>
<div class="footer-block-content">
<ul class="links-footer">
<li><a title="Shipping Policy" href="#">Shipping Policy</a></li>
<li><a title="Compensation First" href="#">Compensation First</a></li>
<li><a title="My Account" href="{{store url=""}}customer/account">My Account</a></li>
<li><a title="Return Policy" href="#">Return Policy</a></li>
<li><a title="Contact Us" href="{{store url=""}}contact-us.html">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="footer-block">
<div class="footer-block-title">
<h3>Payment & Shipping</h3>
</div>
<div class="footer-block-content">
<ul class="links-footer">
<li><a title="Terms of Use" href="#">Terms of Use</a></li>
<li><a title="Payment Methods" href="#">Payment Methods</a></li>
<li><a title="Shipping Guide" href="#">Shipping Guide</a></li>
<li><a title="Locations We Ship To" href="#">Locations We Ship To</a></li>
<li><a title="Estimated Delivery Time" href="#">Estimated Delivery Time</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="categories-footer">
<div class="container">
<div class="footer-links-w">
<div class="label-link">Top Stores : Brand Directory | Store Directory</div>
<ul>
<li>
<h2>MOST SEARCHED KEYWORDS MARKET:</h2>
<a href="#">Xiaomi Mi3</a> | <a href="#">Digiflip Pro XT 712 Tablet</a> | <a href="#">Mi 3 Phones</a> | <a href="#">View all</a></li>
<li>
<h2>MOBILES:</h2>
<a href="#">Moto E</a> | <a href="#">Samsung Mobile</a> | <a href="#">Micromax Mobile</a> | <a href="#">Nokia Mobile</a> | <a href="#">HTC Mobile</a> | <a href="#">Sony Mobile</a> | <a href="#">Apple Mobile</a> | <a href="#">LG Mobile</a> | <a href="#">Karbonn Mobile</a> | <a href="#">View all</a></li>
<li>
<h2>CAMERA:</h2>
<a href="#">Nikon Camera</a> | <a href="#">Canon Camera</a> | <a href="#">Sony Camera</a> | <a href="#">Samsung Camera</a> | <a href="#">Point shoot camera</a> | <a href="#">Camera Lens</a> | <a href="#">Camera Tripod</a> | <a href="#">Camera Bag</a> | <a href="#">View all</a></li>
<li>
<h2>LAPTOPS:</h2>
<a href="#">Apple Laptop</a> | <a href="#">Acer Laptop</a> | <a href="#">Samsung Laptop</a> | <a href="#">Lenovo Laptop</a> | <a href="#">Sony Laptop</a> | <a href="#">Dell Laptop</a> | <a href="#">Asus Laptop</a> | <a href="#">Toshiba Laptop</a> | <a href="#">LG Laptop</a> | <a href="#">HP Laptop</a> | <a href="#">Notebook</a> | <a href="#">View all</a></li>
<li>
<h2>TVS:</h2>
<a href="#">Sony TV</a> | <a href="#">Samsung TV</a> | <a href="#">LG TV</a> | <a href="#">Panasonic TV</a> | <a href="#">Onida TV</a> | <a href="#">Toshiba TV</a> | <a href="#">Philips TV</a> | <a href="#">Micromax TV</a> | <a href="#">LED TV</a> | <a href="#">LCD TV</a> | <a href="#">Plasma TV</a> | <a href="#">3D TV</a> | <a href="#">Smart TV</a> | <a href="#">View all</a></li>
<li>
<h2>TABLETS:</h2>
<a href="#">Micromax Tablets</a> | <a href="#">HCL Tablets</a> | <a href="#">Samsung Tablets</a> | <a href="#">Lenovo Tablets</a> | <a href="#">Karbonn Tablets</a> | <a href="#">Asus Tablets</a> | <a href="#">Apple Tablets</a> | <a href="#">View all</a></li>
<li>
<h2>WATCHES:</h2>
<a href="#">FCUK Watches</a> | <a href="#">Titan Watches</a> | <a href="#">Casio Watches</a> | <a href="#">Fastrack Watches</a> | <a href="#">Timex Watches</a> | <a href="#">Fossil Watches</a> | <a href="#">Diesel Watches</a> | <a href="#">Luxury Watches</a> | <a href="#">View all</a></li>
<li>
<h2>CLOTHING:</h2>
<a href="#">Shirts</a> | <a href="#">Jeans</a> | <a href="#">T shirts</a> | <a href="#">Kurtis</a> | <a href="#">Sarees</a> | <a href="#">Levis Jeans</a> | <a href="#">Killer Jeans</a> | <a href="#">Pepe Jeans</a> | <a href="#">Arrow Shirts</a> | <a href="#">Ethnic Wear</a> | <a href="#">Formal Shirts</a> | <a href="#">Peter England Shirts</a> | <a href="#">View all</a></li>
<li>
<h2>FOOTWEAR:</h2>
<a href="#">Shoes</a> | <a href="#">Casual Shoes</a> | <a href="#">Sports Shoes</a> | <a href="#">Formal Shoes</a> | <a href="#">Adidas Shoes</a> | <a href="#">Gas Shoes</a> | <a href="#">Puma Shoes</a> | <a href="#">Reebok Shoes</a> | <a href="#">Woodland Shoes</a> | <a href="#">Red tape Shoes</a> | <a href="#">Nike Shoes</a> | <a href="#">View all</a></li>
</ul>
</div>
</div>
</div>

3.2 Configure Megamenu

• Step 1: You need to create Menu group. In Admin Panel, navigate to SM Megamenu >> Menu Manager >> Add group (add 2 groups: “Group: Horizontal” and “Group: Vertical” ). Two ID of these groups will be shown in Configuration of SM Megamenu.

• Step 2: Navigate to SM Megamenu >> Configuration & fill the ID number for two above groups in step 1

• Step 3: In order to add menu items, go to SM Megamenu >> Menu Items Manager to add items as you want.

Note: In the next steps, when editing items in the menus, the items (in a menu) having same level could have same configuration. Therefore, we encourage you read throughtly and find out the item’s level to configure it without any errors.

For example about megamenu:

• Sortable Categories Items: Please click Here to view.
• Backend Settings: Please click Here to view.

Note:

• To enable Horizontal Megamenu on the frontend, please go to CMS >> Static Blocks >> and create a static block with Identifier: “horizontal-megamenu” Please click Here to view the configuration of this static block.

{{block type="megamenu/list"  template="sm/megamenu/megamenu2.phtml" theme="1" group_id="1" group_id_h="2"}}

• To enable Vertical Megamenu on the frontend, please go to CMS >> Static Blocks >> and create a static block with Identifier: “vertical-megamenu” Please click Here to view the configuration of this static block.

{{block type="megamenu/list"  template="sm/megamenu/megamenu.phtml" theme="2" group_id="1" group_id_h="2"}}

3.3 Configure Extensions

The SM Market front-page has been integrated with the extensions in the following list:

• SM Search Box Pro
• SM CartPro
• SM MegaMenu
• SM Listing Tabs
• SM Categories
• SM Deal
• SM Basic Products
• SM Listing Extend
• SM Listing Deals
• SM Quickview
• SM Shop By

In SM Market Administration Page, please navigate to SM Market Setting field (in the right hand column, below the General and Catalog fields) to configure extensions as you want.

3.4 Blog

Configure Blog

We are using Aheadworks Blog free extension from Aheadworks, so that it is not including in the quickstart package. You can download free version of Aheadworks Blog Here and follow Its Guide to install. After installing this extension, please go to the admin of blog, navigate to Blog >> Settings to configure it like our configuration and your desire.