How can I adjust number of products on every page in Product list?

March 14, 2016, 10:09 pm

≫ Next: Why doesn’t my email have the cupon code when submit newsletter?

≪ Previous: Opencart: error 404 in Simple Blog when enable Use SEO URLs

If you want to change the number of products that display on every page in Product list, example from 8 products in every page to 12 products in every page, please following our guide:

Please go to the file wp-content\themes\OUR_THEME\lib\woocoommerce-hook.php and find:

function ya_woocommerce_catalog_ordering() {
global $data;

parse_str($_SERVER['QUERY_STRING'], $params);

$query_string = ‘?’.$_SERVER['QUERY_STRING'];

// replace it with theme option
if($data['woo_items']) {
$per_page = $data['woo_items'];
} else {
$per_page = 8;
}

=> Edit $per_page = 8; to your number

and find:

$html .= ‘<span><a>’.esc_html__(’8′, ‘shoppystore’).’</a></span>’;

=> Edit 8 to your number

and find:

function ya_loop_shop_per_page()
{
global $data;

parse_str($_SERVER['QUERY_STRING'], $params);

if($data['woo_items']) {
$per_page = $data['woo_items'];
} else {
$per_page = 8;
}

=> Edit $per_page = 8; to to your number

Hope this help.

Thanks

↧

Why doesn’t my email have the cupon code when submit newsletter?

March 15, 2016, 12:37 am

≫ Next: How to use Google Analytics on SW theme

≪ Previous: How can I adjust number of products on every page in Product list?

If you submit a newsletter in the site and the confirm email have been sent. If you check in this email, you don’t see the cupon code. Don’t worry, because you need click on the link to confirm in your … Readmore

↧

How to use Google Analytics on SW theme

March 17, 2016, 2:29 am

≫ Next: SM Maxshop

≪ Previous: Why doesn’t my email have the cupon code when submit newsletter?

Google Analytics is a popular site users stats and analytics solution. This service lets you in on a set of stats and data regarding the web traffic your site is getting, including things like: the exact number of visitors (daily, monthly, and so on), traffic sources, your most popular content, and a myriad of other statistics that can help you maximize your site’s reach identify weak points in your structure.

If you want to enable Google Analytics on your WordPress site, please follow these steps:

Step 1: Sign up Google Analytics first.

Step 2: Enable Analytics, add your site URL in the control panel and then take the tracking ID code that Google gives you and login it in your WP site.

Step3: Please negative to WP Admin –> Theme options –> Advanced and then find the “Google Analytics ID” field – add the “UA-…” code here.

↧

SM Maxshop

March 23, 2016, 3:05 am

≫ Next: Why are products in cart updated only when refresh your site?

≪ Previous: How to use Google Analytics on SW theme

View demo More detail

Firstly, a huge thanks for purchasing this theme, your support is truly appreciated!

This document covers the installation and use of this theme, reveals some answers to common problems and issues. We encourage you to read this document throughtly if you are experiencing any difficulties. If you have any questions that are beyond the scope of document, please feel free to contact us via our Support Tickets System.

1 SYSTEM REQUIREMENT

At the basic level, this theme will require the following conditions:

Compatible with Magento Community Edition 1.7.x; 1.8.x and 1.9.x (require: php 5.4 and Memory_limit no less than 256Mb)

2INSTALLATION

There are two ways to install a Magento Theme:

Quickstart Installation: By using this package, you will set the theme exactly like our Demo with sample data.
Manual Installation (including Theme Installation).

2.1 Quickstart Installation:

Magentech provides SM Quickstart package for each theme which aims to ease the installation for users. If you plan to start your site from the beginning, It will help you save much time of installing and configuring.

Please follow steps below:

Step 1: Download the quickstart package
Step 2: Extract and Upload the whole Quickstart package to your server. In Quickstart folder you will see the extracted folder that include all sample data
Step 3: Create a Database for your Magento site

Note: You need to remember the database name to use in the next steps

Step 4: Start installation by opening browser and navigate to your URL (where the Quickstart uploaded) to load default Magento installer. Please follow each step of the Installer so that the installation process can be set.

Step 5: Locale Settings. Please fill fully into Required Fields (“Locale; Time Zone and Default Currency”.)

Step 6: In the Configuration step, input the required fields as below.
- Database Name : sm-maxshop-quickstart( It must be the exact name of database you have just created)
- User name : root
- User password : no need to fill
- Do not use "localhost" in the URL path, otherwise you could not log in to your Admin area (you should use your local IP when setting up your website hosted entirely on your own computer).

Step 7: Create Admin Account. Please fill out Required Fields (“First Name; Last Name; Email; Username; password and confirm password” completely.)

Step 8: Finish Installation and now you you can click Go to Frontend to open Homepage or click Go to Backend to open Admin Panel.

2.2 Manual Installation

Step 1: Please unzip “sm_maxshop_theme.zip” file and upload folders skin; media;lib;js;app from the theme package to the root of your Magento site folder on your server.

Note: You could change the name of this folder. However, if you want your website run correctly, it need to have the same name as the database you choose.
Step 2: Log in to your Admin Panel (e.g. http://yourdomain/index.php/admin/)

Note: If you are using the Admin Panel when copying folders in step 1, you need to log out and log in back.
Step 3: Disable Cache: Go to System >> Cache Management, click ‘Sellect All’ button, then choose ‘Disable’ and click ‘Submit’ button to complete the action.

Step 4: Navigate to System >> Configuration >> Design.

Step 5: In Package tab of Design Section, input the parameter Current Package Name with the actual theme name.

Step 6: You can also change the settings for Header.

Note: After configuring in each steps( for example: Step 4, Step 5, Step6), you need to click “Save Config” button to save your changes

2.3 Theme Setting

Configure SM Maxshop General Setting Theme In Magento admin panel, navigate to SM Maxshop Setting and configure theme as you want.

Configure General with Layout, Font size, color for the link, hover buttons, page, text, title, background … for any store.

Configure the Product Style To zoom image of product, adjust Zoom Mode, Custom tab, and content, etc.

Note:
Copy and paste the following Elements into “Custom Tab Content ”:

<table class="data-table" style="width: 100%;" border="1">
<tbody>
<tr>
<td>Brand</td>
<td><img title="brand" src="{{media url="wysiwyg/logo-client.png"}}" alt="brand" /></td>
</tr>
<tr>
<td>History</td>
<td>Color sit amet, consectetur adipiscing elit. In gravida pellentesque ligula, vel eleifend turpis blandit vel. Nam quis lorem ut mi mattis ullamcorper ac quis dui. Vestibulum et scelerisque ante, eu sodales mi. Nunc tincidunt tempus varius. Integer ante dolor, suscipit non faucibus a, scelerisque vitae sapien.</td>
</tr>
</tbody>
</table>

Configure Rich Snippets
Configure Socials Style: To connect with social networks such as Facebook, Twitter, Google Plus, Linkedin
Configure Advanced Style: To show popup, Cpanel, use “Add to cart, Add to wishlist, Add to Compare

2.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.

3CONFIGURATION

Set Default Page

To set a default page for your Magento Site, in the Admin Panel you go to System>>Configuration>>Web>>Default Pages. Please click to see the Backend Settings.
You need to change to the website / store view that you want to change (the dropdown menu in the upper left corner). You will probably have to create a new CMS page if you want to have something different from your default home page.

3.1 Page Configuration

3.1.1 Home Style 1

Frontend of Home Style 1 – Layout Position

In the Admin Panel, please navigate to CMS >> Pages to create a new page in Page Management section. Here is the list of steps in this style’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="no-display"> </div >

Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the Design field::

<reference name="left">

        <block type="megamenu/list" name="megamenu.list.theme" as="megaMenuLeft">
		<action method="setConfig">
			<values>  
			        <group_id>2</group_id>
				<theme>2</theme>
			</values>
		</action>
	</block>

        <block type="basicproducts/list" name="basicproducts.list.default" template="sm/basicproducts/left-products.phtml"/>

        <block type="blog/blog" name="latest-blog"  template="aw_blog/latest-blog.phtml"></block>  

         <block type="cms/block" name="block-faqs">
	        <action method="setBlockId"><block_id>faqs</block_id></action>
         </block>


        <block type="cms/block" name="block-client-say">
	        <action method="setBlockId"><block_id>slider-client-say</block_id></action>
         </block>

         <block type="cms/block" name="brand-logo">
	        <action method="setBlockId"><block_id>brand-left</block_id></action>
         </block>

</reference>

<reference name="content">

        <block type="imageslider/list" name="imageslider.list.default" template="sm/imageslider/default.phtml">
	</block>

        <block type="deal/list" name="deal.list.default" template="sm/deal/default.phtml"></block>

        <block type="supercategories/list" name="supercategories.list.1" template="sm/supercategories/default.phtml"></block>

       <block type="supercategories/list" name="supercategories.list.2" template="sm/supercategories/default.phtml">
                  <action method="_setConfig">
			<values>  
                                  <product_category>5</product_category>
                                  <static_id>des-super-cat-2</static_id>
                                  <filter_order_by>top_rating</filter_order_by>
                                  <product_order_dir>DESC</product_order_dir>
			</values>
		  </action>
        </block>

        <block type="supercategories/list" name="supercategories.list.3" template="sm/supercategories/default.phtml">
                  <action method="_setConfig">
			<values>  
                                  <product_category>92</product_category>
                                  <static_id>des-super-cat-3</static_id>
                                  <filter_order_by>most_viewed</filter_order_by>
                                  <product_order_dir>DESC</product_order_dir>
			</values>
		  </action>
        </block>


</reference>

<reference name="bottom_block_home">
         <block type="cms/block" name="bottom-service">
	        <action method="setBlockId"><block_id>bottom-service</block_id></action>
         </block>
</reference>

3.1.2 Home Style 2

Frontend of Home Style 2 – Layout Position

In the Admin Panel, please navigate to CMS >> Pages to create a new page in Page Management section. Here is the list of steps in this style’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="no-display"> </div >

Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the Design field::

<reference name="top_block_home">
    <block type="imageslider/list" name="imageslider.list.default" template="sm/imageslider/default.phtml"></block>

     <block type="cms/block" name="top-static-image">
	        <action method="setBlockId"><block_id>top-static-image</block_id></action>
        </block>
</reference>

<reference name="left">

        <block type="basicproducts/list" name="basicproducts.list.default" template="sm/basicproducts/left-products.phtml"/>

        <block type="blog/blog" name="latest-blog"  template="aw_blog/latest-blog.phtml"></block>  

         <block type="cms/block" name="block-faqs">
	        <action method="setBlockId"><block_id>faqs</block_id></action>
         </block>

        <block type="cms/block" name="block-client-say">
	        <action method="setBlockId"><block_id>slider-client-say</block_id></action>
         </block>

         <block type="cms/block" name="brand-logo">
	        <action method="setBlockId"><block_id>brand-left</block_id></action>
         </block>

</reference>

<reference name="content">

        <block type="deal/list" name="deal.list.default" template="sm/deal/default.phtml"></block>

        <block type="supercategories/list" name="supercategories.list.1" template="sm/supercategories/default.phtml"></block>

        <block type="supercategories/list" name="supercategories.list.2" template="sm/supercategories/default.phtml">
                  <action method="_setConfig">
			<values>  
                                   <product_category>5</product_category>
                                  <static_id>des-super-cat-2</static_id>
                                  <filter_order_by>top_rating</filter_order_by>
                                  <product_order_dir>DESC</product_order_dir>
			</values>
		  </action>
        </block>

        <block type="supercategories/list" name="supercategories.list.3" template="sm/supercategories/default.phtml">
                  <action method="_setConfig">
			<values>  
                                  <product_category>92</product_category>
                                  <static_id>des-super-cat-3</static_id>
                                  <filter_order_by>most_viewed</filter_order_by>
                                  <product_order_dir>DESC</product_order_dir>
			</values>
		  </action>
        </block>

</reference>

<reference name="bottom_block_home">
         <block type="cms/block" name="bottom-service">
	        <action method="setBlockId"><block_id>bottom-service</block_id></action>
         </block>
</reference>

3.1.3 Home Style 3

Frontend of Home Style 3 – Layout Position

In the Admin Panel, please navigate to CMS >> Pages to create a new page in Page Management section. Here is the list of steps in this style’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="no-display"> </div >

Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the Design field::

<reference name="top_block_home">
		<block type="imageslider/list" name="imageslider.list.default" template="sm/imageslider/default.phtml">
	</block>
       <block type="cms/block" name="banner-right">
	        <action method="setBlockId"><block_id>static-banner-right</block_id></action>
        </block>
        <block type="cms/block" name="bottom-service">
	        <action method="setBlockId"><block_id>bottom-service</block_id></action>
        </block>
</reference>

<reference name="right">
        <remove name ="right.reports.product.viewed" />
		<block type="basicproducts/list" name="basicproducts.list.default" before="-" template="sm/basicproducts/left-products.phtml"/>
        <block type="blog/blog" name="latest-blog"  template="aw_blog/latest-blog.phtml"></block>  

         <block type="cms/block" name="block-faqs">
	        <action method="setBlockId"><block_id>faqs</block_id></action>
         </block>


        <block type="cms/block" name="block-client-say">
	        <action method="setBlockId"><block_id>slider-client-say</block_id></action>
         </block>

        <block type="cms/block" name="static-image-right">
	        <action method="setBlockId"><block_id>st-image-home-right</block_id></action>
         </block>
</reference>

<reference name="content">

        

        <block type="deal/list" name="deal.list.default" template="sm/deal/default.phtml"></block>

        <block type="supercategories/list" name="supercategories.list.1" template="sm/supercategories/default.phtml"></block>

       <block type="supercategories/list" name="supercategories.list.2" template="sm/supercategories/default.phtml">
                  <action method="_setConfig">
			<values>  
                                  <product_category>5</product_category>
                                  <static_id>des-super-cat-2</static_id>
                                  <filter_order_by>top_rating</filter_order_by>
                                  <product_order_dir>DESC</product_order_dir>
			</values>
		  </action>
        </block>

        <block type="supercategories/list" name="supercategories.list.3" template="sm/supercategories/default.phtml">
                  <action method="_setConfig">
			<values>  
                                  <product_category>92</product_category>
                                  <static_id>des-super-cat-3</static_id>
                                  <filter_order_by>most_viewed</filter_order_by>
                                  <product_order_dir>DESC</product_order_dir>
			</values>
		  </action>
        </block>

       


</reference>

<reference name="bottom_block_home">
	<block type="cms/block" name="brand-slider">
	        <action method="setBlockId"><block_id>brand-slider</block_id></action>
        </block>
</reference>

3.1.4 Home Style 4

Frontend of Home Style 4 – Layout Position

In the Admin Panel, please navigate to CMS >> Pages to create a new page in Page Management section. Here is the list of steps in this style’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="no-display"> </div >

Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the Design field::

<reference name="top_block_home">
	<block type="imageslider/list" name="imageslider.list.default" template="sm/imageslider/default.phtml">
	</block>
         <block type="cms/block" name="bottom-service">
	        <action method="setBlockId"><block_id>bottom-service</block_id></action>
         </block>
</reference>
<reference name="left">

        <block type="basicproducts/list" name="basicproducts.list.default" template="sm/basicproducts/left-products.phtml"/>

        <block type="blog/blog" name="latest-blog"  template="aw_blog/latest-blog.phtml"></block>  

         <block type="cms/block" name="block-faqs">
	        <action method="setBlockId"><block_id>faqs</block_id></action>
         </block>


        <block type="cms/block" name="block-client-say">
	        <action method="setBlockId"><block_id>slider-client-say</block_id></action>
         </block>

         <block type="cms/block" name="brand-logo">
	        <action method="setBlockId"><block_id>brand-left</block_id></action>
         </block>

</reference>

<reference name="content">

        <block type="deal/list" name="deal.list.default" template="sm/deal/default.phtml"></block>

        <block type="supercategories/list" name="supercategories.list.1" template="sm/supercategories/default.phtml"></block>

       <block type="supercategories/list" name="supercategories.list.2" template="sm/supercategories/default.phtml">
                  <action method="_setConfig">
			<values>  
                                  <product_category>5</product_category>
                                  <static_id>des-super-cat-2</static_id>
                                  <filter_order_by>top_rating</filter_order_by>
                                  <product_order_dir>DESC</product_order_dir>
			</values>
		  </action>
        </block>

        <block type="supercategories/list" name="supercategories.list.3" template="sm/supercategories/default.phtml">
                  <action method="_setConfig">
			<values>  
                                  <product_category>92</product_category>
                                  <static_id>des-super-cat-3</static_id>
                                  <filter_order_by>most_viewed</filter_order_by>
                                  <product_order_dir>DESC</product_order_dir>
			</values>
		  </action>
        </block>


</reference>

3.1.5 Home Style 5

Frontend of Home Style 5 – Layout Position

In the Admin Panel, please navigate to CMS >> Pages to create a new page in Page Management section. Here is the list of steps in this style’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="no-display"> </div >

Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the Design field::

<reference name="content">

    <block type="imageslider/list" name="imageslider.list.default" template="sm/imageslider/default.phtml"></block>
	
	<block type="cms/block" name="banner-right">
	        <action method="setBlockId"><block_id>st-image-home-right-v5</block_id></action>
    </block>
    <block type="cms/block" name="bottom-service">
	    <action method="setBlockId"><block_id>bottom-service</block_id></action>
    </block>
	

    <block type="deal/list" name="deal.list.default" template="sm/deal/default.phtml"></block>

    <block type="supercategories/list" name="supercategories.list.1" template="sm/supercategories/default-v2.phtml"></block>

       <block type="supercategories/list" name="supercategories.list.2" template="sm/supercategories/default-v2.phtml">
            <action method="_setConfig">
				<values>  
                    <product_category>5</product_category>
                    <static_id>img-super-2-h5</static_id>
                    <filter_order_by>top_rating</filter_order_by>
                    <product_order_dir>DESC</product_order_dir>
				</values>
		  </action>
        </block>

        <block type="supercategories/list" name="supercategories.list.3" template="sm/supercategories/default-v2.phtml">
            <action method="_setConfig">
				<values>  
                    <product_category>92</product_category>
                    <static_id>img-super-3-h5</static_id>
                    <filter_order_by>most_viewed</filter_order_by>
                    <product_order_dir>DESC</product_order_dir>
				</values>
		  </action>
        </block>


</reference>

<reference name="bottom_block_home">
	<block type="blog/blog" name="latest-blog"  template="aw_blog/latest-blog-h5.phtml"></block>  
	
	<block type="basicproducts/list" name="basicproducts.list.default.bottom" template="sm/basicproducts/products-bottom.phtml">
		<action method="_setConfig">
			<values>  
			    <product_source>ids</product_source>
				<product_ids>891,899</product_ids>
			</values>
		</action>
	</block>

    <block type="cms/block" name="client-say-bottom">
	    <action method="setBlockId"><block_id>testimonial-h5</block_id></action>
    </block>
	
	<block type="cms/block" name="brand-slider">
	    <action method="setBlockId"><block_id>brand-slider</block_id></action>
    </block>
</reference>ce>

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.

3.2.1 Horizontal Megamenu:

Horizontal Megamenu List Please click Here to view.

Horizontal Megamenu’s Backend Please click Here to view.

Home

Frontend Appearance
Backend Settings: Please click Here to view.

Copy and paste the following code into the content:

<div class="home-wrapper-item">
			<div class="item-feature layout-block">
				<div class="title-item-feature"><h2>Layouts</h2></div>
				<ul>
					<li><a title="Home Style 1" href="{{store url="?___store=default&___from_store=french"}}">Home Style 1</a></li>
					<li><a title="Home Style 2" href="{{store url="?___store=french&___from_store=default"}}">Home Style 2</a></li>
					<li><a title="Home Style 2" href="{{store url="?___store=sweden&___from_store=default"}}">Home Style 3</a></li>
					<li><a title="Home Style 2" href="{{store url="?___store=jamaica&___from_store=default"}}">Home Style 4</a></li>
					<li><a title="Home Style 2" href="{{store url="?___store=vietnam&___from_store=default"}}">Home Style 5</a></li>
					<li><a title="Boxed Layout" href="{{store url="?___store=hungary&___from_store=english"}}">Boxed Layout</a></li>
					<li><a title="Right to Left" href="{{store url="?___store=cambodja&___from_store=english"}}">Right to Left</a></li>
				</ul>
			</div>
			
			<div class="item-feature color-block">
				<div class="title-item-feature"><h2>Color styles</h2></div>
				<ul>
					<li class="red"><a title="Red" href="{{store url="?___store=cameroon&___from_store=default"}}">Red</a></li>
					<li class="green"><a title="Green" href="{{store url="?___store=argentina&___from_store=default"}}">Green</a></li>
					<li class="blue"><a title="Blue" href="{{store url="?___store=german&___from_store=default"}}">Blue</a></li>
					<li class="orange"><a title="Orange" href="{{store url="?___store=brazil&___from_store=default"}}">Orange</a></li>
					<li class="cyan"><a title="Cyan" href="{{store url="?___store=bolivia&___from_store=default"}}">Cyan</a></li>
				</ul>
			</div>
		</div>

Electronics

Frontend Appearance
Backend Settings: Please click Here to view.

Backend of ‘Accessories’: Please click Here to view.

Note: Do the same with item ‘Mobile Brands’, ‘Product Types’

Backend of ‘Cases & Covers’ in the ‘Accessories’: Please click Here to view.

Note: Do the same with item ‘Cables & Connectors’, ‘Screen Protectors’‘Bluetooth’, ‘Memory Cards’, ‘Chargers’

Backend of ‘Apple’ in the ‘Mobile Brands’: Please click Here to view.

Note: Do the same with item ‘Samsung’, ‘Sony’, ‘LG’, ‘Micromax’, ‘Croma’

Fashion

Frontend Appearance
Backend Settings: Please click Here to view.

Mobile

Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Accessories’: Please click Here to view.

Note: Do the same with item ‘Mobile Brands’, ‘Static image’

Backend of ‘Cases & Covers’ in the ‘Accessories’: Please click Here to view.

Note: Do the same with item ‘Other Accessories’, ‘Chargers’‘Cables & Connectors’, ‘Screen Protectors’, ‘Bluetooth’, ‘Memory Cards’, ‘Sercurity Softwares’

Backend of ‘Apple’ in the ‘Mobile Brands’: Please click Here to view.

Note: Do the same with item ‘Sony’, ‘Samsung’, ‘LG’, ‘Micromax’, ‘Croma’, ‘Nokia’, ‘HTC’

Backend of ‘Static Image’: Please click Here to view.

Copy and paste the following code into the content:

<a href="#" title="Static Image"><img src="{{media url="wysiwyg/image-megamenu/img-static-megamenu-h.png"}}" alt="Static Image" /></a>

Accessories

Frontend Appearance
Backend Settings: Please click Here to view.

Laptop

Frontend Appearance
Backend Settings: Please click Here to view.

About Us

Frontend Appearance
Backend Settings: Please click Here to view.

Contact Us

Frontend Appearance
Backend Settings: Please click Here to view.

3.2.2 Vertical Megamenu:

Vertical Megamenu List Please click Here to view.

Vertical Megamenu’s Backend Please click Here to view.

Mobile & Tabled

Frontend Appearance
Backend Settings: Please click Here to view.

Computer & Accessories

Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Brand’ in the ‘Computer & Accessories’ Please click Here to view.

Note: Do the same with item ‘Sony’, ‘Samsung’, ‘LG’, ‘Micromax’, ‘Croma’, ‘Nokia’, ‘HTC’, ‘MSI’

Backend of ‘Apple’ in the ‘Brand’ Please click Here to view.

Note: Do the same with item ‘Sony’, ‘Samsung’, ‘LG’, ‘Micromax’, ‘Croma’, ‘Nokia’, ‘HTC’, ‘MSI’

Backend of ‘Featured products’ in the ‘Computer & Accessories’ Please click Here to view.

Copy and paste the following code into the content:

<div class="megamenu-product">{{block type="basicproducts/list" template="sm/basicproducts/product-megamenu.phtml" basicproducts_title_text="" product_source="ids" product_ids="892,893" cat_title_display="0" category_title_max_characs="50" product_description_display="0" product_price_display="1" product_reviews_count="1" product_addcart_display="0" product_addwishlist_display="0" product_addcompare_display="0" product_readmore_display="0" imgcfg_from_product_image="1" imgcfg_width="160" imgcfg_height="160"}}</div>

Electronic & Camera

Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Brand’ in the ‘Electronic & Camera’ Please click Here to view.

Backend of ‘Dell’ in the ‘Brand’ Please click Here to view.

Note: Do the same with item ‘Samsung’, ‘Hp’, ‘Acer’, ‘Asus’, ‘AOC’, ‘Benq’, ‘Apple’

Backend of ‘Accessories’ in the ‘Electronic & Camera’ Please click Here to view.

Backend of ‘Mainboard’ in the ‘Accessories’ Please click Here to view.

Note: Do the same with item ‘Cpu’, ‘Hdd’, ‘Avg’, ‘Soundcard’, ‘Mouse’, ‘Keyboard’, ‘Case’

Backend of ‘Recommend Product’ in the ‘Electronic & Camera’Please click Here to view.

Copy and paste the following code into the content:

<div class="megamenu-product">{{block type="basicproducts/list" template="sm/basicproducts/product-megamenu.phtml" basicproducts_title_text="" product_source="ids" product_ids="891" cat_title_display="0" category_title_max_characs="50" product_description_display="0" product_price_display="1" product_reviews_count="1" product_addcart_display="0" product_addwishlist_display="0" product_addcompare_display="0" product_readmore_display="0" imgcfg_from_product_image="1" imgcfg_width="160" imgcfg_height="160"}}</div>

Backend of ‘Static Image’ in the ‘Electronic & Camera’Please click Here to view.

Copy and paste the following code into the content:

<div style="padding: 30px 0px 0px 25px; clear:both;"><a href="#" title="Static Image"><img src="{{media url="wysiwyg/image-megamenu/static-img-ver-item.png"}}" alt="Static Image" /></a></div>

Book & Magazine

Frontend Appearance
Backend Settings: Please click Here to view.

Note: Do the same with item ‘Gifts’, ‘Fashion & Accessories’, ‘Home & Kitchen’, ‘Baby Care & Toys’, ‘Movie & Music’, ‘Beauty & Health’

3.3 Configure Extensions

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

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

SM Basic Products

Position: SM Basic Products
Frontend Appearance

Backend of SM Basic Products: Click Here
Go Here to readmore about the SM Basic Products module.

SM Search Box Pro

Position: SM Search Box Pro
Frontend Appearance

Backend of SM Search Box Pro: Click Here

SM CartPro

Position: SM CartPro
Frontend Appearance

Backend of SM CartPro: Click Here
Go Here to readmore about the SM CartPro module.

SM Deal

Position: SM Deal
Frontend Appearance

Backend of SM Deal: Click Here
Go Here to readmore about the SM Deal module.

Position: SM Megamenu
Frontend Appearance
Go Here to readmore about the SM Megamenu module.

Horizontal Megamenu

Vertical Megamenu

Backend of SM Megamenu: Click Here

SM Image Slider

Position: SM Image Slider
Frontend Appearance

Backend of SM Image Slider: Click Here
Go Here to readmore about the SM Image Slider module.

SM Super Categories

Position: SM Super Categories
Frontend Appearance

Backend of SM Super Categories: Click Here
Go Here to readmore about the SM Categories module.

SM Quickview

Frontend Appearance

When you put your cursor on a product in the frontend pages, you will see the quickview button appear and you could click on this button to view the product

Backend of SM Quickview: Click Here
Go Here to readmore about the SM Quickview module.

SM Shopby

Frontend Appearance

When you go to the Shop page, you will see the module on the left side of the page.

Backend of SM Shopby: Click Here

3.4 Configure Static Blocks

The SM Maxshop front-page has the following static blocks in the theme:

To create a new static block, go to CMS >> Static Blocks >> Add new block

Note: Since updating to Magento 1.9.2.4, all codes like this {{block }} are not working correctly. To solve this problem, please go into System >> Permissions >> Blocks and add your blocks in that list

To create the static block, go to CMS >> Static Blocks with Title: Maxshop – About Footer and Identifier * : “about-footer”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="footer-title">
<h2>ABOUT US</h2>
</div>
<div class="content-block-footer">
<ul>
<li><span class="sp-ic icon-home" style="font-size: 16px; position: relative; top: 1px;"> </span>8901 Marmora Road, Glasgow, D04 89GR</li>
<li style="margin-top: -4px;"><span class="sp-ic icon-mobile-phone" style="font-size: 22px; position: relative; top: 4px;"> </span>Telephone: <a title="Call:(801) 2345 - 6789" href="tel:+84123456789">(801) 2345 - 6789</a></li>
<li><span class="sp-ic icon-envelope" style="font-size: 13px; position: relative;"> </span>E-mail: <a title="support@maxshop.com" href="mailto:name@email.com">support@maxshop.com</a></li>
</ul>
<ul class="payment-method">
<li><a title="Payment Method" href="#"><img alt="Payment" src="{{media url="wysiwyg/payment/payment-1.png"}}" /></a></li>
<li><a title="Payment Method" href="#"><img alt="Payment" src="{{media url="wysiwyg/payment/payment-2.png"}}" /></a></li>
<li><a title="Payment Method" href="#"><img alt="Payment" src="{{media url="wysiwyg/payment/payment-3.png"}}" /></a></li>
<li><a title="Payment Method" href="#"><img alt="Payment" src="{{media url="wysiwyg/payment/payment-4.png"}}" /></a></li>
<li><a title="Payment Method" href="#"><img alt="Payment" src="{{media url="wysiwyg/payment/payment-5.png"}}" /></a></li>
</ul>
</div>

To create the static block, go to CMS >> Static Blocks with Title: Maxshop – Account Footer and Identifier * : “account-footer”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="footer-title">
<h2>MY ACCOUNT</h2>
</div>
<div class="content-block-footer">
<ul>
<li><a href="#"><span class="icon-double-angle-right"> </span>Sitemap</a></li>
<li><a href="#"><span class="icon-double-angle-right"> </span>Privacy Policy</a></li>
<li><a href="#"><span class="icon-double-angle-right"> </span>Your Account</a></li>
<li><a href="#"><span class="icon-double-angle-right"> </span>Advanced Search</a></li>
<li><a href="#"><span class="icon-double-angle-right"> </span>Contact Us</a></li>
</ul>
</div>

Static Block: Maxshop – Bottom Services

To create the static block, go to CMS >> Static Blocks with Title: Maxshop – Bottom Services and Identifier * : “bottom-service”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<ul class="list-services">
	<li class="item-service col-lg-4 col-md-4 col-sm-4">
		<a href="#" title="Free Shipping"><img src="{{media url="wysiwyg/static-image-home/free-shipping.png"}}" alt="Free Shipping" /></a>
	</li>
	
	<li class="item-service col-lg-4 col-md-4 col-sm-4">
		<a href="#" title="Guaranteed"><img src="{{media url="wysiwyg/static-image-home/guaranteed.png"}}" alt="Guaranteed" /></a>
	</li>
	
	<li class="item-service col-lg-4 col-md-4 col-sm-4">
		<a href="#" title="Deal"><img src="{{media url="wysiwyg/static-image-home/deal.png"}}" alt="Deal" /></a>
	</li>
</ul>

Static Block: Maxshop – Brand

To create the static block, go to CMS >> Static Blocks with Title: Maxshop – Brand and Identifier * : “brand”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="block block-brand">
<div class="block-title"><strong> <span>Our Brand</span> </strong> <a class="view-all-brand" title="View All" href="#">View All</a></div>
<div class="block-content">
<div class="brand-wrapper">
<ul>
<li><a title="Brand" href="#"><img alt="Brand Logo" src="{{media url="wysiwyg/brand-image/brand-logo-1.png"}}" /></a></li>
<li><a title="Brand" href="#"><img alt="Brand Logo" src="{{media url="wysiwyg/brand-image/brand-logo-2.png"}}" /></a></li>
<li><a title="Brand" href="#"><img alt="Brand Logo" src="{{media url="wysiwyg/brand-image/brand-logo-3.png"}}" /></a></li>
<li><a title="Brand" href="#"><img alt="Brand Logo" src="{{media url="wysiwyg/brand-image/brand-logo-4.png"}}" /></a></li>
<li><a title="Brand" href="#"><img alt="Brand Logo" src="{{media url="wysiwyg/brand-image/brand-logo-1.png"}}" /></a></li>
<li><a title="Brand" href="#"><img alt="Brand Logo" src="{{media url="wysiwyg/brand-image/brand-logo-2.png"}}" /></a></li>
<li><a title="Brand" href="#"><img alt="Brand Logo" src="{{media url="wysiwyg/brand-image/brand-logo-3.png"}}" /></a></li>
<li><a title="Brand" href="#"><img alt="Brand Logo" src="{{media url="wysiwyg/brand-image/brand-logo-4.png"}}" /></a></li>
</ul>
</div>
</div>
</div>

Static Block: Maxshop – Brand Slider

To create the static block, go to CMS >> Static Blocks with Title: Maxshop – Brand Slider and Identifier * : “brand-slider”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="slider-brand-bottom-wrapper">
<div class="customNavigation custom-nav-default"> </div>
<div class="slider-brand-bottom">
<div class="item"><a title="Image Brand" href="#"><img alt="Image Brand" src="{{media url="wysiwyg/brand-slider/brand-item-1.png"}}" /></a></div>
<div class="item"><a title="Image Brand" href="#"><img alt="Image Brand" src="{{media url="wysiwyg/brand-slider/brand-item-2.png"}}" /></a></div>
<div class="item"><a title="Image Brand" href="#"><img alt="Image Brand" src="{{media url="wysiwyg/brand-slider/brand-item-3.png"}}" /></a></div>
<div class="item"><a title="Image Brand" href="#"><img alt="Image Brand" src="{{media url="wysiwyg/brand-slider/brand-item-4.png"}}" /></a></div>
<div class="item"><a title="Image Brand" href="#"><img alt="Image Brand" src="{{media url="wysiwyg/brand-slider/brand-item-5.png"}}" /></a></div>
<div class="item"><a title="Image Brand" href="#"><img alt="Image Brand" src="{{media url="wysiwyg/brand-slider/brand-item-1.png"}}" /></a></div>
<div class="item"><a title="Image Brand" href="#"><img alt="Image Brand" src="{{media url="wysiwyg/brand-slider/brand-item-2.png"}}" /></a></div>
</div>
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function($) {
							var owl_slider_brand = $(".slider-brand-bottom");
							owl_slider_brand.owlCarousel({
								itemsCustom : [
								[0, 2],
								[480, 3],
								[768, 4],
								[992, 5],
								[1200, 5]
								], 
								navigation : false, // Show next and prev buttons
								paginationSpeed : 400,
								autoPlay:true,
								pagination: false,
                                                                stopOnHover:true
							});	 
									
							$(".next-brand-bottom").click(function(){
								owl_slider_brand.trigger('owl.next');
							})
							$(".prev-brand-bottom").click(function(){
								owl_slider_brand.trigger('owl.prev');
							})
						});
// ]]></script>
</div>

Static Block: Maxshop – Description Footer

To create the static block, go to CMS >> Static Blocks with Title: Maxshop – Description Footer and Identifier * : “des-footer”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

Static Block: Maxshop – FAQs

To create the static block, go to CMS >> Static Blocks with Title: Maxshop – FAQs and Identifier * : “faqs”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="block faqs-block">
<div class="block-title"><strong> <span>FAQs</span> </strong></div>
<div class="block-content">
<div class="faq-wrapper">
<div class="faq-item">
<div id="section1" class="accordion"><span>Pellentesque vitae imperdiet in?</span></div>
<div class="container-accordion">
<div class="content">Donec tempor, odio sed hendrerit placerat, tourna in posuere tortor, blandit nisi erat non tellus. Aenean non finibus turpis.</div>
</div>
</div>
<div class="faq-item">
<div id="section2" class="accordion"><span>Hendrerit eu nunc massa?</span></div>
<div class="container-accordion">
<div class="content">Donec tempor, odio sed hendrerit placerat, tourna in posuere tortor, blandit nisi erat non tellus. Aenean non finibus turpis.</div>
</div>
</div>
<div class="faq-item">
<div id="section3" class="accordion"><span>Suspendisse feugiat cursus?</span></div>
<div class="container-accordion">
<div class="content">Donec tempor, odio sed hendrerit placerat, tourna in posuere tortor, blandit nisi erat non tellus. Aenean non finibus turpis.</div>
</div>
</div>
<div class="faq-item">
<div id="section4" class="accordion"><span>Finibus ullamcorper eleifend?</span></div>
<div class="container-accordion">
<div class="content">Donec tempor, odio sed hendrerit placerat, tourna in posuere tortor, blandit nisi erat non tellus. Aenean non finibus turpis.</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">// <![CDATA[
				jQuery(document).ready(function($) {
					$('.accordion').accordion_snyderplace({
						defaultOpen: 'section2',
						speed: 'fast',
						animateOpen: function (elem, opts) { //replace the standard slideUp with custom function
							elem.next().slideFadeToggle(opts.speed);
						},
						animateClose: function (elem, opts) { //replace the standard slideDown with custom function
							elem.next().slideFadeToggle(opts.speed);
						}
					});
					//custom animation for open/close
					$.fn.slideFadeToggle = function(speed, easing, callback) {
						return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
					};
				});
			
// ]]></script>
</div>

Static Block: Maxshop – Header Slider

To create the static block, go to CMS >> Static Blocks with Title: Maxshop – Header Slider and Identifier * : “header-slider”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="label-offer-slider">This Week</div>
<div class="offer-wrapper">
<div class="offer-header">
<ul id="offer-slider">
<li class="item"><a title="Offer" href="#">Pellentesque elementum aliquam libero sed tincidunt nullam!</a></li>
<li class="item"><a title="Offer" href="#">Pellentesque elementum aliquam libero sed tincidunt nullam!</a></li>
<li class="item"><a title="Offer" href="#">Pellentesque elementum aliquam libero sed tincidunt nullam!</a></li>
<li class="item"><a title="Offer" href="#">Pellentesque elementum aliquam libero sed tincidunt nullam!</a></li>
<li class="item"><a title="Offer" href="#">Pellentesque elementum aliquam libero sed tincidunt nullam!</a></li>
</ul>
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function($) {
								 
									$("#offer-slider").owlCarousel({
										autoPlay: true,
										navigation : false,
										pagination: false,
										slideSpeed : 300,
										paginationSpeed : 400,
										singleItem:true
									});
								 
								});
// ]]></script>
</div>
</div>

Static Block: Maxshop – Header V5 – Vertical Config

To create the static block, go to CMS >> Static Blocks with Title: Maxshop – Header V5 – Vertical Config and Identifier * : “headerv5_ver_config”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<p>{{block type="megamenu/list" name="megaMenuVerHeader" as="megaMenuVerHeader" group_id="2" theme="2"}}</p>

Static Block: Maxshop – Hotline

To create the static block, go to CMS >> Static Blocks with Title: Maxshop – Maxshop – Hotline and Identifier * : “hot-line-header”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="hot-lilne-wrapper">
						<h2>HOT LINE:</h2>
						<a href="tel:+84123456789" title="Call: (801) 2345 - 6789">(801) 2345 - 6789</a>
					</div>

To create the static block, go to CMS >> Static Blocks with Title: Maxshop – Infomation Footer and Identifier * : “infomation-footer”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="footer-title">
<h2>INFOMATION</h2>
</div>
<div class="content-block-footer">
<ul>
<li><a href="#"><span class="icon-double-angle-right"> </span>My Account</a></li>
<li><a href="#"><span class="icon-double-angle-right"> </span>Order History</a></li>
<li><a href="#"><span class="icon-double-angle-right"> </span>Returns</a></li>
<li><a href="#"><span class="icon-double-angle-right"> </span>Specials</a></li>
<li><a href="#"><span class="icon-double-angle-right"> </span>Site Map</a></li>
</ul>
</div>

Static Block: Maxshop – Slider Testimonial

To create the static block, go to CMS >> Static Blocks with Title: Maxshop – Slider Testimonial and Identifier * : “slider-client-say”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="block client-say">
<div class="block-title"><strong> <span>Testimonial</span> </strong></div>
<div class="block-content">
<div class="client-say-slider">
<div class="item item-client-say">
<div class="client-comment">"Duis aliquam, magna ac fermentum are finibus, orci viverra risus, non into varius tellus tortor sed eros. Sed pharetra ante sit amet suscipit ornare"</div>
<div class="client-say-info">
<div class="image-client"><a title="Jack Andrson" href="#"><img alt="Image Client" src="{{media url="wysiwyg/image-client/img-client-1.png"}}" /></a></div>
<div class="name-client">
<h2><a title="Jack Andrson" href="#">Jack Andrson</a></h2>
<p>Web designer</p>
</div>
</div>
</div>
<div class="item item-client-say">
<div class="client-comment">"Duis aliquam, magna ac fermentum are finibus, orci viverra risus, non into varius tellus tortor sed eros. Sed pharetra ante sit amet suscipit ornare"</div>
<div class="client-say-info">
<div class="image-client"><a title="Jack Andrson" href="#"><img alt="Image Client" src="{{media url="wysiwyg/image-client/img-client-1.png"}}" /></a></div>
<div class="name-client">
<h2><a title="Jack Andrson" href="#">Jack Andrson</a></h2>
<p>Web designer</p>
</div>
</div>
</div>
<div class="item item-client-say">
<div class="client-comment">"Duis aliquam, magna ac fermentum are finibus, orci viverra risus, non into varius tellus tortor sed eros. Sed pharetra ante sit amet suscipit ornare"</div>
<div class="client-say-info">
<div class="image-client"><a title="Jack Andrson" href="#"><img alt="Image Client" src="{{media url="wysiwyg/image-client/img-client-1.png"}}" /></a></div>
<div class="name-client">
<h2><a title="Jack Andrson" href="#">Jack Andrson</a></h2>
<p>Web designer</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">// <![CDATA[
		jQuery(document).ready(function($) {
			var owl_client = $(".client-say-slider");
			owl_client.owlCarousel({
				itemsCustom : [
				[0, 1],
				[480, 1],
				[768, 1],
				[992, 1],
				[1200, 1]
				], 

				slideSpeed : 300,
				stopOnHover: true,
				paginationSpeed : 400,
				autoPlay:false,
				pagination: true,
			});	  
		});	
	
// ]]></script>
</div>

Static Block: Maxshop – Static Image Home Right

To create the static block, go to CMS >> Static Blocks with Title: Maxshop – Static Image Home Right and Identifier * : “st-image-home-right”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="static-image-home-right"><a title="Static Image" href="#"><img alt="Static Image" src="{{media url="wysiwyg/static-image-home/img-static-right.png"}}" /></a></div>

Static Block: Maxshop – Static Banner Right Home V5

To create the static block, go to CMS >> Static Blocks with Title: Maxshop – Static Banner Right Home V5 and Identifier * : “st-image-home-right-v5″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="banner-right">
<ul>
<li><a title="Static Image" href="#"><img alt="Static Image" src="{{media url="wysiwyg/static-image-home/banner-right-1-home-5.png"}}" /></a></li>
<li><a title="Static Image" href="#"><img alt="Static Image" src="{{media url="wysiwyg/static-image-home/banner-right-2-home-5.png"}}" /></a></li>
</ul>
</div>

To create the static block, go to CMS >> Static Blocks with Title: Maxshop – Static Banner Right and Identifier * : “static-banner-right”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="banner-right">
	<ul>
		<li><a title="Static Image" href="#"><img src="{{media url="wysiwyg/static-image-home/img-banner-right-1.png"}}" alt="Static Image" /></a></li>
		<li><a title="Static Image" href="#"><img src="{{media url="wysiwyg/static-image-home/img-banner-right-2.png"}}" alt="Static Image" /></a></li>
		<li><a title="Static Image" href="#"><img src="{{media url="wysiwyg/static-image-home/img-banner-right-3.png"}}" alt="Static Image" /></a></li>
	</ul>
</div>

Static Block: Maxshop – Top Static Image

To create the static block, go to CMS >> Static Blocks with Title: Maxshop – Top Static Image and Identifier * : “top-static-image”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="static-home-2">
<ul>
<li class="col-s-1"><a title="Static Image" href="#"><img alt="Static Image" src="{{media url="wysiwyg/static-image-home/st-img-1-home-2.png"}}" /></a> <a title="Static Image" href="#"><img alt="Static Image" src="{{media url="wysiwyg/static-image-home/st-img-2-home-2.png"}}" /></a></li>
<li class="col-s-2"><a title="Static Image" href="#"><img alt="Static Image" src="{{media url="wysiwyg/static-image-home/st-img-3-home-2.png"}}" /></a></li>
<li class="col-s-3"><a title="Static Image" href="#"><img alt="Static Image" src="{{media url="wysiwyg/static-image-home/st-img-4-home-2.png"}}" /></a></li>
<li class="col-s-4"><a title="Static Image" href="#"><img alt="Static Image" src="{{media url="wysiwyg/static-image-home/st-img-5-home-2.png"}}" /></a></li>
</ul>
</div>

Static Block: Maxshop – Testimonial Home V5

To create the static block, go to CMS >> Static Blocks with Title: Maxshop – Testimonial Home V5 and Identifier * : “testimonial-h5″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="col-lg-4 col-md-4 client-say-bottom">
	<div class="client-wrapper-b">
		<div class="block-title-bottom">
			<h2>Testimonial</h2>
			<div class="nav-custom">
				<a title="Previous" class="prev-test icon-angle-left"><span>Previous</span></a>
				<a title="Next" class="next-test icon-angle-right"><span>Next</span></a>
			</div>
		</div>
		
		<div class="block-content-clientsay">
			<div class="client-say-slider">
				<div class="item item-client-say">
					<div class="image-client">
						<a href="#" title="Jack Andrson"><img src="{{media url="wysiwyg/image-client/img-client-1.png"}}" alt="Image Client" /></a>
					</div>

					<div class="client-say-info">
						"Duis aliquam, magna ac fermentum are we finibus, orci viverra risus, into varius telluso tortor sed eros. Sedion pharetra ante sit amet suscipit ornare. Integer et auctor diam sit dolor.
						<div class="name-client">
							<h2><a href="#" title="Jack Andrson">Jack Andrson</a></h2>
						</div>
					</div>
				</div>
				
				<div class="item item-client-say">
					<div class="image-client">
						<a href="#" title="Jack Andrson"><img src="{{media url="wysiwyg/image-client/img-client-1.png"}}" alt="Image Client" /></a>
					</div>

					<div class="client-say-info">
						"Duis aliquam, magna ac fermentum are we finibus, orci viverra risus, into varius telluso tortor sed eros. Sedion pharetra ante sit amet suscipit ornare. Integer et auctor diam sit dolor.
						<div class="name-client">
							<h2><a href="#" title="Jack Andrson">Jack Andrson</a></h2>
						</div>
					</div>
				</div>
				
				<div class="item item-client-say">
					<div class="image-client">
						<a href="#" title="Jack Andrson"><img src="{{media url="wysiwyg/image-client/img-client-1.png"}}" alt="Image Client" /></a>
					</div>

					<div class="client-say-info">
						"Duis aliquam, magna ac fermentum are we finibus, orci viverra risus, into varius telluso tortor sed eros. Sedion pharetra ante sit amet suscipit ornare. Integer et auctor diam sit dolor.
						<div class="name-client">
							<h2><a href="#" title="Jack Andrson">Jack Andrson</a></h2>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<script>
		jQuery(document).ready(function($) {
			var owl_client = $(".client-say-slider");
			owl_client.owlCarousel({
				itemsCustom : [
				[0, 1],
				[480, 1],
				[768, 1],
				[992, 1],
				[1200, 1]
				], 
				navigation : false,
				slideSpeed : 300,
				stopOnHover: true,
				paginationSpeed : 400,
				autoPlay:false,
				pagination: false,
				
				
			});	  
			
				$(".next-test").click(function(){
					owl_client.trigger('owl.next');
				});
				
				$(".prev-test").click(function(){
					owl_client.trigger('owl.prev');
				});
		});	
	</script>
</div>

3.5 How To Edit Copyright in Admin Panel

Frontend Appearance

In the Administrator page, Please navigate to SM Maxshop Setting; find SM Maxshop Setting Module to configure the “Copyright” parameter as image below:

3.6 How To Customize the Social symbols in admin panel

Frontend Appearance

In the Administrator page, please go to SM Maxshop Setting; find SM Maxshop Setting Module to configure the “Social Style” parameter as image below:

3.7 Customize HTML

TOP-LINK

Frontend Appearance

In your Website’s Directory, go to app\design\frontend\sm-maxshop\default\template\page\html folder. In this folder, you could open the files named header-v1.phtml, header-v2.phtml, header-v3.phtml, header-v4.phtml, header-v5.phtml by your editor program to configure this part.

4SUPPORT

SUPPORT – If you have any questions that are beyond the scope of this help file, please feel free to send us via: Support Tickets System
FAQs – Go to Here to view more the Frequently Asked Questions.

↧

Why are products in cart updated only when refresh your site?

March 24, 2016, 8:17 pm

≫ Next: How to display sort by form in Prestashop category page?

≪ Previous: SM Maxshop

In this case, maybe you already disabled ‘Ajax cart’ option in block cart module.With our theme, you can go to the admin: Modules >> SP Block cart >> enable ‘Ajax cart’ option

Prestashop theme

You can check code more in the file: override\controllers\front\CartController.php

These is the code in end of file:

elseif (file_exists(_PS_MODULE_DIR_.’/spblockcart/blockcart-ajax.php’))
require_once(_PS_MODULE_DIR_.’/spblockcart/blockcart-ajax.php’);

=> Please make sure the path correctly

(You can check ajax file in the path is: modules/spblockcart

Example the file is: modules/spblockcart/spblockcart-ajax.php)

Please change the above code to:

elseif (file_exists(_PS_MODULE_DIR_.’/spblockcart/spblockcart-ajax.php’))
require_once(_PS_MODULE_DIR_.’/spblockcart/spblockcart-ajax.php’);

Thanks

↧

How to display sort by form in Prestashop category page?

March 24, 2016, 8:45 pm

≫ Next: Error 500 in popup when add to cart

≪ Previous: Why are products in cart updated only when refresh your site?

If you want to display sort by form/Filter Form in category page, please try go to your admin:Please open the Modules menu >> find ‘Layered navigation block’ module >> Click to Edit this module:

In this module configuration, please edit the ‘filters template’, please see screenshot here:

Then you can select all categories or only select the categories that you want the filter form display there.

I hope this is helpful for you.

Thanks & Best Regards.

↧

Error 500 in popup when add to cart

March 24, 2016, 8:57 pm

≫ Next: Your site show error “Fatal error: Allowed memory size of 67108864 bytes exhausted”

≪ Previous: How to display sort by form in Prestashop category page?

When you add to cart, it only shows Error 500 in popup. In this case, please try disable the option ‘Show cross-selling’ in block cart /SP block cart module.

You can go to admin : Modules >> edit SP Block cart module >> Disable this option:

↧

Your site show error “Fatal error: Allowed memory size of 67108864 bytes exhausted”

March 24, 2016, 9:10 pm

≫ Next: How to show products in Countdown?

≪ Previous: Error 500 in popup when add to cart

If your site show this error message, it means that your memory limit is not enough for running site now. You need increase your memory_limit again.

If you run your site in localhost, you can go to your PHP.ini file (usually in xampp\php\PHP.ini) and change memory_limit like that:

; http://php.net/memory-limit
memory_limit=256M

After you changed in PHP.ini file, please try re-start your Apache again.

If you already uploaded your site to live host, you should contact with hosting provider to increase your memory_limit. They will support for you.

Hope it is helpful for you.

↧

How to show products in Countdown?

March 24, 2016, 10:05 pm

≫ Next: SM Sawyer

≪ Previous: Your site show error “Fatal error: Allowed memory size of 67108864 bytes exhausted”

If your site want to use YA Woocommerce Countdown Slider in Visual Composer, please go to your admin: Pages >> Home page >> Edit or add new one by clicking to plus button:

Then choose YA Woocommerce Countdown Slider

Then configure it:

Now you need configure your products to display in YA Woocommerce Countdown Slider:

- Go to Products >> Click edit your products in categories that you chose in YA Woocommerce Countdown Slider configuration:

In product configuration, please add your price in ‘Sale Price’ option and click Schedule:

Then and valid Sale Price Dates:

Hope it’s helpful for you.

↧

SM Sawyer

March 30, 2016, 12:25 am

≫ Next: SP Topshop

≪ Previous: How to show products in Countdown?

View demo More detail

Firstly, a huge thanks for purchasing this theme, your support is truly appreciated!

1 SYSTEM REQUIREMENT

At the basic level, this theme will require the following conditions:

Compatible with Magento Community Edition 1.7.x; 1.8.x and 1.9.x (require: php 5.4 and Memory_limit no less than 256Mb)

2INSTALLATION

There are two ways to install a Magento Theme:

Quickstart Installation: By using this package, you will set the theme exactly like our Demo with sample data.
Manual Installation (including Theme Installation).

2.1 Quickstart Installation:

Please follow steps below:

Step 1: Download the quickstart package
Step 2: Extract and Upload the whole Quickstart package to your server. In Quickstart folder you will see the extracted folder that include all sample data
Step 3: Create a Database for your Magento site

Note: You need to remember the database name to use in the next steps

Step 4: Start installation by opening browser and navigate to your URL (where the Quickstart uploaded) to load default Magento installer. Please follow each step of the Installer so that the installation process can be set.

Step 5: Locale Settings. Please fill fully into Required Fields (“Locale; Time Zone and Default Currency”.)

Step 6: In the Configuration step, input the required fields as below.
- Database Name : sm_sawyer_quickstart( It must be the exact name of database you have just created)
- User name : root
- User password : no need to fill
- Do not use "localhost" in the URL path, otherwise you could not log in to your Admin area (you should use your local IP when setting up your website hosted entirely on your own computer).

Step 7: Create Admin Account. Please fill out Required Fields (“First Name; Last Name; Email; Username; password and confirm password” completely.)

Step 8: Finish Installation and now you you can click Go to Frontend to open Homepage or click Go to Backend to open Admin Panel.

2.2 Manual Installation

Step 1: Please unzip “sm_sawyer_theme.zip” file and upload folders skin; media;lib;js;app from the theme package to the root of your Magento site folder on your server.

Note: You could change the name of this folder. However, if you want your website run correctly, it need to have the same name as the database you choose.
Step 2: Log in to your Admin Panel (e.g. http://yourdomain/index.php/admin/)

Note: If you are using the Admin Panel when copying folders in step 1, you need to log out and log in back.
Step 3: Disable Cache: Go to System >> Cache Management, click ‘Sellect All’ button, then choose ‘Disable’ and click ‘Submit’ button to complete the action.

Step 4: Navigate to System >> Configuration >> Design.

Step 5: In Package tab of Design Section, input the parameter Current Package Name with the actual theme name.

Step 6: You can also change the settings for Header.

Note: After configuring in each steps( for example: Step 4, Step 5, Step6), you need to click “Save Config” button to save your changes

2.3 Theme Setting

Configure SM Sawyer General Setting Theme In Magento admin panel, navigate to SM sawyer Setting and configure theme as you want.

Configure General with Theme color, Font size, color for the link, hover buttons, page, text, title, background … for any store.
Note:
Copy and paste the following Elements into “Google Font Elements”:
```
.sm-imageslider.theme2,  .g2font
```
Configure Theme Layout with Layout style, Header style& Homepage style ( depend on Default pages on Web tab) to configure
Configure the Product Listing with Layout 1 Column, Layout 2 Columns, Layout 3 Columns,Product Shows Effect On Hover, etc.
Configure the Product Detail To zoom image of product, adjust Zoom Mode, Custom tab, and content, etc.
Configure Rich Snippets
Configure Socials : To connect with social networks such as Facebook, Twitter, Google Plus, Linkedin
Configure Advanced : To show popup, Cpanel, use “Add to cart, Add to wishlist, Add to Compare
Configure Theme Installation

Note: Click the Import Static Blocks and CMS Pages to import all static blocks and CMS pages provided with this theme. The following notification will appear to announce that you have just imported static blocks or pages successfully.

After importing, you need to go to CMS >> Static Block ( or Pages) to configure and select Store View for each block or page.

2.4 Blog

Configure Blog

3CONFIGURATION

Set Default Page

To set a default page for your Magento Site, in the Admin Panel you go to System>>Configuration>>Web>>Default Pages. Please click to see the Backend Settings.
You need to change to the website / store view that you want to change (the dropdown menu in the upper left corner). You will probably have to create a new CMS page if you want to have something different from your default home page.

3.1 Page Configuration

3.1.1 Home Style 1

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::

<p style="display:none"></p>

Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the Design field::

<reference name="left">
<remove name="left.blog.menu"/>
<remove name="tags_popular"/>
<block type="megamenu/list" name="megamenu.list.theme1" as="megaMenu" template="sm/megamenu/megamenu-vertical.phtml">
		<action method="setConfig">
			<values>
				<title>All Categories</title>
				<group_id>5</group_id>
				<theme>2</theme>
				<start_level>1</start_level>
				<end_level>10</end_level>
			</values>
	   </action>
	</block>
<block type="cms/block" name="product-sidebar" > 
	<action method="setBlockId"><block_id>product-sidebar</block_id></action>
</block>
<block type="newsletter/subscribe" name="layout.newsletter" template="newsletter/subscribe.phtml"/>
<block type="cms/block" after="catalog.product.related.list" name="image-static-sidebar">
		<action method="setBlockId"><block_id>image-static-sidebar</block_id></action>
</block>	
<block type="cms/block" name="testimonials-layout1">
		<action method="setBlockId"><block_id>testimonials-layout1</block_id></action>
</block>	
<block type="basicproducts/list" name="basicproducts.list.homeleft" template="sm/basicproducts/basic-product-list.phtml">
	<action method="_setConfig">
                    <values>
		<product_limitation>8</product_limitation>
		<basicproducts_title_text>ON SALE</basicproducts_title_text>
		<product_order_by>best_sales</product_order_by>
		<imgcfg_width>100</imgcfg_width>
		<imgcfg_height>100</imgcfg_height>
		<product_title_display>1</product_title_display>
		<product_price_display>1</product_price_display>
		<product_reviews_count>1</product_reviews_count>
		<product_addcart_display>0</product_addcart_display>
		<product_addwishlist_display>0</product_addwishlist_display>
		<product_addcompare_display>0</product_addcompare_display>
		<product_readmore_display>0</product_readmore_display>
		</values>
	</action>
</block>
<block type="cms/block" name="static-image-1" > 
	<action method="setBlockId"><block_id>static-image-1</block_id></action>
</block>
<block type="cms/block" name="policyshop-layout1" > 
	<action method="setBlockId"><block_id>policyshop-layout1</block_id></action>
</block>
<block type="blog/blog" name="latest_post" template="aw_blog/latest-post-index1.phtml"/>
</reference>
<reference name="content">
<block type="sawyer/wrapper" name="section.no.01">
	    <action method="setParams"> <params>class="wrapper-fulltop-conent"</params> </action>	
		<action method="setRow"><row>1</row></action>
		<block type="sawyer/wrapper" name="section.no1.2">
			<action method="setParams"><params>class="col-md-8"</params></action>
			<block type="imageslider/list" name="imageslider.list.default" template="sm/imageslider/default.phtml"/>
		</block>	
		<block type="sawyer/wrapper" name="section.no1.1">
			<action method="setParams"><params>class="col-md-4"</params></action>	
			<block type="cms/block" name="static-image-2">
				<action method="setBlockId"><block_id>static-image-2</block_id></action>
			</block>	
		</block>		
</block>
<block type="listingtabs/list" name="listingtabs.list.default1" template="sm/listingtabs/default.phtml">    
            <action method="_setConfig">      
                <values>             
                    <product_limitation>12</product_limitation>                
                    <listingtabs_title_text><![CDATA[gift & parties]]></listingtabs_title_text>	
					<row_items>1</row_items>
					<posttext>1F</posttext>					
                    <pretext>static-1f-layout1</pretext>         
                    <filter_type>fieldproducts</filter_type>      
					<product_category>209</product_category>					
                    <filter_order_by>top_rating,best_sales,created_at</filter_order_by>
					<field_preload>created_at</field_preload>				
                    <product_description_display>0</product_description_display>				
                    <imgcfg_width>270</imgcfg_width>			
                    <imgcfg_height>270</imgcfg_height>                
                    <nbi_column1>4</nbi_column1>              
                    <nbi_column2>3</nbi_column2>  
					<nbi_column3>2</nbi_column3>   					
                    <nav>1</nav>           
                    <loop>1</loop>  
					<margin>0</margin>
                </values> 
            </action>   
        </block>
<block type="sawyer/wrapper" name="section.no.02">
	<action method="setParams"> <params>class="wrapper-listting2"</params> </action>
	<block type="listingtabs/list" name="listingtabs.list.home12" template="sm/listingtabs/default.phtml">    
            <action method="_setConfig">      
                <values>             
                    <product_limitation>12</product_limitation>                
                    <listingtabs_title_text><![CDATA[mobile & Accessories]]></listingtabs_title_text>
					<row_items>1</row_items>	
					<posttext>2F</posttext>					
                    <pretext>static-2f-layout1</pretext>         
                    <filter_type>fieldproducts</filter_type>      
					<product_category>208</product_category>					
                    <filter_order_by>top_rating,best_sales,created_at</filter_order_by>
					<field_preload>created_at</field_preload>				
                    <product_description_display>0</product_description_display>				
                    <imgcfg_width>270</imgcfg_width>			
                    <imgcfg_height>270</imgcfg_height>                
                    <nbi_column1>4</nbi_column1>              
                    <nbi_column2>3</nbi_column2>  
					<nbi_column3>2</nbi_column3>   					
                    <nav>1</nav>           
                    <loop>1</loop>  
					<margin>0</margin>
                </values> 
            </action>   
        </block>	
</block>
<block type="sawyer/wrapper" name="section.no.03">
	<action method="setParams"> <params>class="wrapper-listting3"</params> </action>
	<block type="listingtabs/list" name="listingtabs.home13" template="sm/listingtabs/default.phtml">    
            <action method="_setConfig">      
                <values>             
                    <product_limitation>12</product_limitation>                
                    <listingtabs_title_text><![CDATA[fashion & clothes]]></listingtabs_title_text>
					<row_items>1</row_items>	
					<posttext>3F</posttext>					
                    <pretext>static-3f-layout1</pretext>         
                    <filter_type>fieldproducts</filter_type>      
					<product_category>206</product_category>					
                    <filter_order_by>top_rating,best_sales,created_at</filter_order_by>
					<field_preload>created_at</field_preload>				
                    <product_description_display>0</product_description_display>				
                    <imgcfg_width>270</imgcfg_width>			
                    <imgcfg_height>270</imgcfg_height>                
                    <nbi_column1>4</nbi_column1>              
                    <nbi_column2>3</nbi_column2>  
					<nbi_column3>2</nbi_column3>   					
                    <nav>1</nav>           
                    <loop>1</loop>  
					<margin>0</margin>
                </values> 
            </action>   
        </block>	
</block>
<block type="sawyer/wrapper" name="section.no.04">
	<action method="setParams"> <params>class="wrapper-listting4"</params> </action>
	<block type="listingtabs/list" name="listingtabs.home14" template="sm/listingtabs/default-style2.phtml
">    
            <action method="_setConfig">      
                <values>             
                    <product_limitation>8</product_limitation>                
                    <listingtabs_title_text><![CDATA[home & interior]]></listingtabs_title_text>
					<row_items>4</row_items>	
					<posttext>4F</posttext>					
                    <pretext>static-4f-layout1</pretext>         
                    <filter_type>fieldproducts</filter_type>      
					<product_category>207</product_category>					
                    <filter_order_by>top_rating,best_sales,created_at</filter_order_by>
					<field_preload>created_at</field_preload>	
					<effect_options>fadeIn</effect_options>
                    <product_description_display>0</product_description_display>				
                    <imgcfg_width>270</imgcfg_width>			
                    <imgcfg_height>270</imgcfg_height>                
                    <nbi_column1>1</nbi_column1>              
                    <nbi_column2>1</nbi_column2>  
					<nbi_column3>1</nbi_column3>   					
                    <nav>1</nav>           
                    <loop>1</loop>  
					<margin>0</margin>
					<style2>style2</style2>
                </values> 
            </action>   
        </block>	
</block>				
</reference>

Meta Data: Please click to see the Backend Settings.

3.1.2 Home Style 2

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:

<p style="display:none"></p>

Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the Content field:

<reference name="full_top">
<block type="cms/block" name="slideshow-home2" > 
	<action method="setBlockId"><block_id>slideshow-home2</block_id></action>
</block>
</reference>  
<reference name="content">
<block type="cms/block" name="policy-shop2" > 
	<action method="setBlockId"><block_id>policy-shop2</block_id></action>
</block>
<block type="basicproducts/list" name="basicproducts.list.home1" template="sm/basicproducts/basic-top-home2.phtml">
		<action method="_setConfig">      
        <values>             
		<basicproducts_title_text>best sellers</basicproducts_title_text>
		<product_category> 209</product_category>
		<product_order_by>best_sales</product_order_by>
		<imgcfg_width>500</imgcfg_width>
		<imgcfg_height>500</imgcfg_height>
		<posttext>posttext-bstop</posttext>
        <product_limitation>6</product_limitation>
		</values> 
        </action>  
</block>
<block type="cms/block" name="banner-home1" > 
	<action method="setBlockId"><block_id>banner-home1</block_id></action>
</block>
<block type="sawyer/wrapper" name="section.no.01">
	<action method="setParams"> <params>class="product-basic1"</params> </action>	
	<block type="basicproducts/list" name="basicproducts.list.top" template="sm/basicproducts/basicgird-home2.phtml">
		<action method="_setConfig">      
        <values>             
		<basicproducts_title_text></basicproducts_title_text>
		<pretext>pretext-mobiles</pretext>
		<posttext>brand-basicproduct2</posttext>
		<product_category>208</product_category>
		<product_limitation>4</product_limitation>
		<row_items>1</row_items>
		<nb_column1>4</nb_column1>
		<nb_column2>4</nb_column2>
		<nb_column3>3</nb_column3>
		<nb_column4>2</nb_column4>
		<nb_column5>1</nb_column5>
		</values> 
        </action>  
</block>
</block>
<block type="cms/block" name="banner-home2" > 
	<action method="setBlockId"><block_id>banner-home2</block_id></action>
</block>
<block type="sawyer/wrapper" name="section.no.02">
	<action method="setParams"> <params>class="product-basic2"</params> </action>	
	<block type="basicproducts/list" name="basicproducts.list.home2" template="sm/basicproducts/basicgird-home2.phtml">
		<action method="_setConfig">      
        <values>             
		<basicproducts_title_text></basicproducts_title_text>
		<pretext>pretext-gift</pretext>
		<posttext></posttext>
		<product_category>206</product_category>
		<product_limitation>4</product_limitation>
		<row_items>2</row_items>
		<nb_column1>2</nb_column1>
		<nb_column2>2</nb_column2>
		<nb_column3>2</nb_column3>
		<nb_column4>1</nb_column4>
		<nb_column5>1</nb_column5>
		</values> 
        </action>  
</block>
</block>
<block type="cms/block" name="banner-home3" > 
	<action method="setBlockId"><block_id>banner-home3</block_id></action>
</block>
<block type="sawyer/wrapper" name="section.no.03">
	<action method="setParams"> <params>class="product-basic3"</params> </action>	
	<block type="basicproducts/list" name="basicproducts.list.home3" template="sm/basicproducts/basicgird-home2.phtml">
		<action method="_setConfig">      
        <values>             
		<basicproducts_title_text></basicproducts_title_text>
		<pretext>pretext-fashion</pretext>
		<posttext>brand-basicproduct2</posttext>
		<product_category>209</product_category>
		<product_limitation>4</product_limitation>
		<row_items>1</row_items>
		<nb_column1>4</nb_column1>
		<nb_column2>4</nb_column2>
		<nb_column3>3</nb_column3>
		<nb_column4>2</nb_column4>
		<nb_column5>1</nb_column5>
		</values> 
        </action>  
</block>
</block>
<block type="cms/block" name="banner-home4" > 
	<action method="setBlockId"><block_id>banner-home4</block_id></action>
</block>
<block type="sawyer/wrapper" name="section.no.04">
	<action method="setParams"> <params>class="product-basic4"</params> </action>	
	<block type="basicproducts/list" name="basicproducts.list.home4" template="sm/basicproducts/basicgird-home2.phtml">
		<action method="_setConfig">      
        <values>             
		<basicproducts_title_text></basicproducts_title_text>
		<pretext>pretext-furniture</pretext>
		<posttext></posttext>
		<product_category>207</product_category>
		<product_limitation>4</product_limitation>
		<row_items>2</row_items>
		<nb_column1>2</nb_column1>
		<nb_column2>2</nb_column2>
		<nb_column3>2</nb_column3>
		<nb_column4>1</nb_column4>
		<nb_column5>1</nb_column5>
		</values> 
        </action>  
</block>
</block>
<block type="cms/block" name="banner-home5" > 
	<action method="setBlockId"><block_id>banner-home5</block_id></action>
</block>
<block type="blog/blog" name="latest_post" template="aw_blog/latest-post-index2.phtml"/>
<block type="cms/block" name="brand-slider-home2" > 
	<action method="setBlockId"><block_id>brand-slider-home2</block_id></action>
</block>
</reference>

Meta Data: Please click to see the Backend Settings.

3.1.3 Home Style 3

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::

<p style="display:none"></p>

Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the Content field::

<reference name="full_top">
<block type="imageslider/list" name="imageslider.list.default" template="sm/imageslider/default.phtml"/>
<block type="sawyer/wrapper" name="section.no.01">
<action method="setParams"> <params>class="full-top-block1"</params> </action>
<block type="cms/block"  name="static-image-1-index3">
	<action method="setBlockId"><block_id>static-image-1-index3</block_id></action>
</block>
</block>
<block type="sawyer/wrapper" name="section.no.02">
   <action method="setParams"> <params>class="full-top-block2"</params> </action>
   <action method="setContainer"> <container>1</container> </action>
	<block type="deal/list" name="deal.list.default.home3" template="sm/deal/deal-layouthome3.phtml"> 
		<action method="_setConfig">
              <values>
			  <deal_title_text><![CDATA[<span>to day </span>deals]]></deal_title_text>
				<pretext>static-image-2-index3</pretext>
				<posttext>static-image-3-index3</posttext>
			  <product_category>202</product_category>
			  <product_limitation>4</product_limitation>
			  <imgcfg_width>270</imgcfg_width>
              <imgcfg_height>270</imgcfg_height>
			  </values>
     </action> 
	</block>
</block>
<block type="sawyer/wrapper" name="section.no3">
 <action method="setParams"> <params>class="full-top-block3 wow fadeInUp"</params> </action>
<action method="setContainer"> <container>1</container> </action>
<block type="blog/blog" name="latest_post" template="aw_blog/latest-post-index3.phtml"/>
</block>
<block type="sawyer/wrapper" name="section.no4">
 <action method="setParams"> <params>class="full-top-block4 wow fadeInUp"</params> </action>
<action method="setContainer"> <container>1</container> </action>
<block type="newsletter/subscribe" name="home3.newsletter" template="newsletter/subscribe-index3.phtml"/>
<block type="cms/block" name="brand-slider-home2" > 
	<action method="setBlockId"><block_id>brand-slider-home2</block_id></action>
</block>
</block>
</reference>

Meta Data: Please click to see the Backend Settings.

3.1.4 Home Style 4

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::

<p style="display:none"></p>

Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the Design field::

<reference name="content">
    <block type="imageslider/list" name="imageslider.list.default" template="sm/imageslider/default.phtml"/>
	<block type="cms/block" name="policy-shop4" > 
		<action method="setBlockId"><block_id>policy-shop4</block_id></action>
	</block>
<block type="listingtabs/list" name="listingtabs.home4" template="sm/listingtabs/default.phtml">    
            <action method="_setConfig">      
                <values>             
                    <product_limitation>12</product_limitation>                
                    <listingtabs_title_text><![CDATA[what’s hot]]></listingtabs_title_text>
					<row_items>1</row_items>	
					<posttext></posttext>					
                    <pretext></pretext>         
                    <filter_type>fieldproducts</filter_type>      
					<product_category>203</product_category>					
                    <filter_order_by>top_rating,best_sales,created_at</filter_order_by>
					<field_preload>created_at</field_preload>				
                    <product_description_display>0</product_description_display>				
                    <imgcfg_width>270</imgcfg_width>			
                    <imgcfg_height>270</imgcfg_height>                
                    <nbi_column1>4</nbi_column1>              
                    <nbi_column2>3</nbi_column2>  
					<nbi_column3>2</nbi_column3>   					
                    <nav>1</nav>           
                    <loop>1</loop>  
					<margin>0</margin>
                </values> 
            </action>   
        </block>	
		<block type="cms/block" name="static-image-1-index4" > 
			<action method="setBlockId"><block_id>static-image-1-index4</block_id></action>
		</block>
		<block type="sawyer/wrapper" name="section.no.04">
		<action method="setParams"> <params>class="product-basic-home4"</params> </action>	
		<block type="basicproducts/list" name="basicproducts.list.home4" template="sm/basicproducts/basicgird-home4.phtml">
		<action method="_setConfig">      
        <values>             
		<basicproducts_title_text>FEATURED ITEMS</basicproducts_title_text>
		<pretext></pretext>
		<posttext></posttext>
		<product_category>203</product_category>
		<product_order_by>lastest_product</product_order_by>
		<product_limitation>8</product_limitation>
		<row_items>2</row_items>
		<nb_column1>2</nb_column1>
		<nb_column2>2</nb_column2>
		<nb_column3>2</nb_column3>
		<nb_column4>1</nb_column4>
		<nb_column5>1</nb_column5>
		</values> 
        </action>  
</block>
</block>
<block type="cms/block" name="static-testimonials-index4" > 
			<action method="setBlockId"><block_id>static-testimonials-index4</block_id></action>
		</block>
<block type="blog/blog" name="latest_post" template="aw_blog/latest-post-index4.phtml"/>
<block type="cms/block" name="brand-slider-home2" > 
	<action method="setBlockId"><block_id>brand-slider-home2</block_id></action>
</block>
	
</reference>

Meta Data: Please click to see the Backend Settings.

3.1.5 Home Style 5

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:

<p style="display:none"></p>

Design Tab: Please click to see the Backend Settings.

<reference name="full_top">
<block type="imageslider/list" name="imageslider.list.default" template="sm/imageslider/default.phtml"/>
<block type="sawyer/wrapper" name="section.no.01">
	    <action method="setParams"> <params>class="wrapper-fulltop-conent wow fadeInUp"</params> </action>	
		<action method="setRow"><row>1</row></action>
		<block type="sawyer/wrapper" name="section.no1.1">
			<action method="setParams"><params>class="col-md-6"</params></action>
			<block type="cms/block" name="static-image-1-index5">
				<action method="setBlockId"><block_id>static-image-1-index5</block_id></action>
			</block>
		</block>
		<block type="sawyer/wrapper" name="section.no1.2">
			<action method="setParams"><params>class="col-md-6 col-rightpd"</params></action>	
			<block type="basicproducts/list" name="basicproducts.list.home5" template="sm/basicproducts/basicgird-home5.phtml">
				<action method="_setConfig">      
				<values>             
				<basicproducts_title_text>Best Sellers</basicproducts_title_text>
				<pretext></pretext>
				<posttext></posttext>
				<product_category>284</product_category>
				<product_order_by>best_sales</product_order_by>
				<product_limitation>8</product_limitation>
				</values> 
				</action>  
			</block>
		</block>			
</block>
<block type="sawyer/wrapper" name="section.no.02">
	    <action method="setParams"> <params>class="wrapper-fulltop-conent wow fadeInUp"</params> </action>	
		<action method="setRow"><row>1</row></action>
		<block type="sawyer/wrapper" name="section.no1.1">
			<action method="setParams"><params>class="col-md-6 col-lefttpd"</params></action>
			<block type="basicproducts/list" name="basicproducts.list.home5" template="sm/basicproducts/basicgird-home5.phtml">
				<action method="_setConfig">      
				<values>             
				<basicproducts_title_text>featured item</basicproducts_title_text>
				<pretext></pretext>
				<posttext></posttext>
				<product_category>284</product_category>
				<product_order_by>lastest_product</product_order_by>
				<product_limitation>8</product_limitation>
				</values> 
				</action>  
			</block>
		</block>
		<block type="sawyer/wrapper" name="section.no1.2">
			<action method="setParams"><params>class="col-md-6"</params></action>
			<block type="cms/block" name="static-image-2-index5">
				<action method="setBlockId"><block_id>static-image-2-index5</block_id></action>
			</block>	
		</block>			
</block>
<block type="cms/block" name="static-imgcategory-index5">
		<action method="setBlockId"><block_id>static-imgcategory-index5</block_id></action>
</block>
<block type="listingtabs/list" name="listingtabs.list.default" template="sm/listingtabs/default.phtml">
<action method="_setConfig">      
	<values>
	<listingtabs_title_text>all items</listingtabs_title_text>
	<filter_type>categories</filter_type>
	<product_category>285,286,287,288,289,290</product_category>
	<margin>30</margin>
	<nbi_column2>2</nbi_column2>
	<nbi_column0>5</nbi_column0>
	</values> 
</action>  	
</block>	
<block type="cms/block" name="static-testimonials-index4" > 
			<action method="setBlockId"><block_id>static-testimonials-index4</block_id></action>
		</block>
<block type="blog/blog" name="latest_post" template="aw_blog/latest-post-index4.phtml"/>
<block type="newsletter/subscribe" name="home3.newsletter" template="newsletter/subscribe-index3.phtml"/>
<block type="cms/block" name="brand-slider-home2" > 
	<action method="setBlockId"><block_id>brand-slider-home2</block_id></action>
</block>
</reference>

Meta Data: Please click to see the Backend Settings.

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.

3.2.1 Horizontal Megamenu:

Horizontal-mega-menu

Horizontal Megamenu List Please click Here to view.

Horizontal Megamenu’s Backend Please click Here to view.

Home
Frontend Appearance

Backend Settings: Please click Here to view.

Features

Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Dropdown Features’: Please click Here to view.

Copy and paste the following code into the content:

<div class="home-menu-dropdown">
	<ul class="item-home-store layout-home">
		<li class="title-menu-home">Layouts</li>
		<li><a title="Home Style 1" href="{{store url="?___store=default&___from_store=french"}}">Home Style 1</a></li>
		<li><a title="Home Style 2" href="{{store url="?___store=french&___from_store=default"}}">Home Style 2</a></li>
		<li><a title="Home Style 3" href="{{store url="?___store=german&___from_store=default"}}">Home Style 3</a></li>
		<li><a title="Home Style 4" href="{{store url="?___store=japan&___from_store=default"}}">Home Style 4</a></li>
		<li><a title="Home Style 5" href="{{store url="?___store=vietnam&___from_store=default"}}">Home Style 5</a></li>
		<li><a title="Full Width" href="{{store url="?___store=french&___from_store=default"}}">Full Width</a></li>
	</ul>

	<ul class="item-home-store header-home">
		<li class="title-menu-home">Headers</li>
		<li><a title="Header Type 1" href="{{store url="?___store=default&___from_store=french"}}">Header Type 1</a></li>
		<li><a title="Header Type 2" href="{{store url="?___store=french&___from_store=default"}}">Header Type 2</a></li>
		<li><a title="Header Type 3" href="{{store url="?___store=german&___from_store=default"}}">Header Type 3</a></li>
		<li><a title="Header Type 4" href="{{store url="?___store=japan&___from_store=default"}}">Header Type 4</a></li>
		<li><a title="Header Type 5" href="{{store url="?___store=vietnam&___from_store=default"}}">Header Type 5</a></li>
	</ul>
	
	<ul class="item-home-store theme-color">
		<li class="title-menu-home">Color Styles</li>
		<li class="blue"><a title="Blue" href="{{store url="?___store=default&___from_store=french"}}">Blue</a></li>
		<li class="orange"><a title="Orange" href="{{store url="?___store=somaliland&___from_store=default"}}">Orange</a></li>
		<li class="brown"><a title="Brown" href="{{store url="?___store=bolivia&___from_store=default"}}">Brown</a></li>
		<li class="red"><a title="Red" href="{{store url="?___store=andorra&___from_store=default"}}">Red</a></li>
		<li class="pink"><a title="Pink" href="{{store url="?___store=belgium&___from_store=default"}}">Pink</a></li>
		
	</ul>	
			
	<ul class="item-home-store layout-home">
		<li class="title-menu-home">Listing Layouts</li>
		<li><a title="Without Sidebar" href="{{store url="shop.html?___store=german&___from_store=default&mode=grid"}}">Without Sidebar</a></li>
		<li><a title="Left Sidebar" href="{{store url="shop.html?___store=default&___from_store=german&mode=grid"}}">Left Sidebar</a></li>
		<li><a title="Right Sidebar" href="{{store url="shop.html?___store=argentina&___from_store=default&mode=grid"}}">Right Sidebar</a></li>
		<li><a title="Left - Right Sidebar" href="{{store url="shop.html?___store=bolivia&___from_store=default&mode=grid""}}">Left - Right Sidebar</a></li>
	</ul>
	
	<ul class="item-home-store detail-home">
		<li class="title-menu-home">Product Detail Layouts</li>
		<li><a title="Product Detail - Full" href="{{store url="shop/sazen-kutemas.html"}}">Product Detail - Full</a></li>
		<li><a title="Product Detail - Left Sidebar" href="{{store url="shop/sazen-kutemas.html?detail_style=2"}}">Product Detail - Left Sidebar</a></li>
		<li><a title="Product Detail - Right Sidebar" href="{{store url="shop/sazen-kutemas.html?detail_style=3"}}">Product Detail - Right Sidebar</a></li>
		<li><a title="Thumbnail  - Horizontal" href="{{store url="shop/sazen-kutemas.html?thumbstyle=1"}}">Thumbnail  - Horizontal</a></li>
		<li><a title="Thumbnail - Vertical" href="{{store url="shop/sazen-kutemas.html?thumbstyle=0"}}">Thumbnail - Vertical</a></li>
	</ul>
	
	<div style="clear:both;"> </div>
	
	<ul class="item-home-store layout-home">
		<li class="title-menu-home">Contact Us Layouts</li>
		<li><a title="Contact Us Style 1" href="{{store url="contact-us.html/?___store=default&___from_store=argentina"}}">Contact Us Style 1</a></li>
		<li><a title="Contact Us Style 2" href="{{store url="contact-us.html/?___store=french&___from_store=default"}}">Contact Us Style 2</a></li>
		<li><a title="Contact Us Style 3" href="{{store url="contact-us.html/?___store=german&___from_store=default"}}">Contact Us Style 3</a></li>
		<li><a title="Contact Us Style 4" href="{{store url="contact-us.html/?___store=argentina&___from_store=default"}}">Contact Us Style 4</a></li>
	</ul>
	
	<ul class="item-home-store layout-home">
		<li class="title-menu-home">About Us Layouts</li>
		<li><a title="About Us Style 1" href="{{store url="about-us.html/?___store=default&___from_store=argentina"}}">About Us Style 1</a></li>
		<li><a title="About Us Style 2" href="{{store url="about-us.html/?___store=french&___from_store=default"}}">About Us Style 2</a></li>
		<li><a title="About Us Style 3" href="{{store url="about-us.html/?___store=german&___from_store=default"}}">About Us Style 3</a></li>
		<li><a title="About Us Style 4" href="{{store url="about-us.html/?___store=argentina&___from_store=default"}}">About Us Style 4</a></li>
	</ul>

	<ul class="item-home-store detail-home">
		<li class="title-menu-home">Effect on Hover Product</li>
		<li><a title="Simple" href="{{store url="collection.html?___store=default&___from_store=french&mode=grid"}}">Simple</a></li>
		<li><a title="Display Second Image" href="{{store url="collection.html?___store=benin&from_store=default&mode=grid"}}">Display Second Image</a></li>
		<li><a title="Display Slider Image" href="{{store url="collection.html?___store=argentina&___from_store=default&mode=grid"}}">Display Slider Image</a></li>
	</ul>
	
	<ul class="item-home-store layout-home">
		<li class="title-menu-home">404 Page Layout</li>
		<li><a title="404 Page Style 1" href="{{store url="404page"}}">404 Page Style 1</a></li>
	</ul>

	<ul class="item-home-store detail-home">
		<li class="title-menu-home">Zoom Types</li>
		<li><a title="Product Page Inner Zoom" href="{{store url="shop/sazen-kutemas.html/?___store=default&___from_store=argentina"}}">Product Page Inner Zoom</a></li>
		<li><a title="Product Page Outer Zoom" href="{{store url="shop/sazen-kutemas.html/?___store=andorra&___from_store=default"}}">Product Page Outer Zoom</a></li>
		<li><a title="Product Page Lens Zoom" href="{{store url="shop/sazen-kutemas.html/?___store=bolivia&___from_store=default"}}">Product Page Lens Zoom</a></li>
	</ul>

</div>

Shop

Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Dropdown’ in the ‘Shop’: Please click Here to view.

Portfolios

Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Group 21′: Please click Here to view.

Note: Do the same with item ‘Group 2′, ‘Group 3′

Backend of ‘Fashion’ in the’Group 21′: Please click Here to view.

Note: The item named ‘Electronics’ having same menu level (Level 3) as item ‘Fashion’ could have the same configuration. However, you should be aware that the Parent Item of ‘Electronics’ is different.

Backend of ‘Dresses’ in the’Fashion’: Please click Here to view.

Note: Do the same with item ‘Acessories’, ‘Blazers’, ‘Day Evening’, ‘Sports’ and ‘Cocktail’

Backend of ‘Group 2′: Please click Here to view.

Backend of ‘Electronics’ in the’Group 2′: Please click Here to view.

Note: Do the same with item ‘Acessories’, ‘Phone Bags & Cases’, ‘Screen Protectors’, ‘Headphones’ and ‘Chargers & Docks’

Backend of ‘Images’ in the ‘Group 3′: Please click Here to view.

Copy and paste the following code into the content:

<a href="#" class="banner-img"><img src="{{media url="wysiwyg/image-megamenu/img2.jpg"}}" alt="" /></a>

Blog

Frontend Appearance

Backend Settings: Please click Here to view.

Contact Us
Frontend Appearance

Backend Setting:Please click Here to view.

Backend of ‘Dropdown’: Please click Here to view.

Copy and paste the following code into the content:

<ul class="item-about-contact">
		<li><a title="Contact Us Style 1" href="{{store url="contact-us.html/?___store=default&___from_store=argentina"}}">Contact Us Style 1</a></li>
		<li><a title="Contact Us Style 2" href="{{store url="contact-us.html/?___store=french&___from_store=default"}}">Contact Us Style 2</a></li>
		<li><a title="Contact Us Style 3" href="{{store url="contact-us.html/?___store=german&___from_store=default"}}">Contact Us Style 3</a></li>
		<li><a title="Contact Us Style 4" href="{{store url="contact-us.html/?___store=argentina&___from_store=default"}}">Contact Us Style 4</a></li>
	</ul>

About Us
Frontend Appearance

Backend Setting:Please click Here to view.

Backend of ‘Dropdown’: Please click Here to view.

Copy and paste the following code into the content:

<ul class="item-about-contact">
		<li><a title="About Us Style 1" href="{{store url="about-us.html/?___store=default&___from_store=argentina"}}">About Us Style 1</a></li>
		<li><a title="About Us Style 2" href="{{store url="about-us.html/?___store=french&___from_store=default"}}">About Us Style 2</a></li>
		<li><a title="About Us Style 3" href="{{store url="about-us.html/?___store=german&___from_store=default"}}">About Us Style 3</a></li>
		<li><a title="About Us Style 4" href="{{store url="about-us.html/?___store=argentina&___from_store=default"}}">About Us Style 4</a></li>
	</ul>

3.2.2 Vertical Megamenu:

Vertical-mega-menu

Vertical Megamenu List Please click Here to view.

Vertical Megamenu’s Backend In the Admin Panel you go to CMS>>Pages>>Sawyer – Responsive Magento Fashion Theme>>Design. Please click Here to view.

Computer & Accessories

Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Categories Group’ in the ‘Computer & Accessories’ Please click Here to view.

Backend of ‘Category 1′ in the ‘Categories Group’ Please click Here to view.

Note: Do the same with item ‘Category 2′, ‘Category 3′, ‘Category group 4′, ‘Category group 5′, ‘Category group 6′

Backend of ‘Beds’ in the ‘Category 1′ Please click Here to view.

Note: Other items in Computer & Accessories Menu having the same menu level (Level 4) would have same configuration. However, you should be aware that the Parent Item of each group is different.

Backend of ‘Image’ in the ‘Computer & Accessories’ Please click Here to view.

Copy and paste the following code into the content:

<div class="static-image-menu ab-right">
<a title="Static Image" href="#">
<img src="{{media url="wysiwyg/image-megamenu/img-megamenu.jpg"}}" alt="Static Image" />
</a>
</div>

Women’s Clothing

Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Menu Group’ in the ‘Women’s Clothing’ Please click Here to view.

Backend of ‘Group 1′ in the ‘Menu Group’ Please click Here to view.

Note: Do the same with item ‘Group 2′, ‘Group 3′

Backend of ‘T-shirt’ in the Please click Here to view.

Note: Other items in Women’s Clothing Menu having the same menu level (Level 4) would have same configuration. However, you should be aware that the Parent Item of each group is different.

Jewelry & Watches

Frontend Appearance

Backend Settings: Please click Here to view.

Consumer Electronics

Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Categories Group’ in the ‘Consumer Electronics’ Please click Here to view.

Backend of ‘Col 1′ in the ‘Categories Group’ Please click Here to view.

Note: Do the same with item ‘Col 2′, ‘Col 3′, ‘Group 2′

Backend of ‘Chairs & Sofas’ in the ‘Col 1′ Please click Here to view.

Note: Other items in Consumer Electronics Menu having the same menu level (Level 4) would have same configuration. However, you should be aware that the Parent Item of each group is different.

Backend of ‘Image Group’ in the ‘Consumer Electronics’ Please click Here to view.

Copy and paste the following code into the content:

<a class="banner-img" title="Static Image" href="#"><img src="{{media url="wysiwyg/image-megamenu/img1.jpg"}}" alt="Static Image" /></a>

Phone & Accessories

Frontend Appearance

Backend Settings: Please click Here to view.

Home, Garden & Tools

Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Women’ in the ‘Home, Garden & Tools’ Please click Here to view.

Note: Do the same with item ‘Men’

Sports & Outdoors

Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Glassware & Ceramic’ in the ‘Sports & Outdoors’ Please click Here to view.

Note: Do the same with item ‘Decorative Shelving’, ‘Desktop’, ‘Dividers & Screens’, ‘Fireplace’

Accessories

Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Women’ in the ‘Accessories’ Please click Here to view.

Note: Do the same with item ‘Men’

Watch & Jewelry

Frontend Appearance

Backend Settings: Please click Here to view.

Shoes & Bags

Frontend Appearance

Backend Settings: Please click Here to view.

Kids & Mother, Toys, Hobbies

Frontend Appearance

Backend Settings: Please click Here to view.

Men’s Clothing

Frontend Appearance

Backend Settings: Please click Here to view.

3.3 Configure Extensions

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

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

SM Basic Products

Position: SM Basic Products
Frontend Appearance

Backend of SM Basic Products: Click Here
Go Here to readmore about the SM Basic Products module.

Position: SM Megamenu
Frontend Appearance

Horizontal Megamenu

Vertical Megamenu

Backend of SM Megamenu: Click Here

SM CartPro

Position: SM CartPro
Frontend Appearance

Backend of SM CartPro: Click Here
Go Here to readmore about the SM CartPro module.

SM Deal

Position: SM Deal
Frontend Appearance

Backend of SM Deal: Click Here
Go Here to readmore about the SM Deal module.

SM Image Slider

Position: SM Image Slider
Frontend Appearance

Backend of SM Image Slider: Click Here
Go Here to readmore about the SM Image Slider module.

SM Quickview

Frontend Appearance

When you put your cursor on a product in the frontend pages, you will see the quickview button appear and you could click on this button to view the product

Backend of SM Quickview: Click Here
Go Here to readmore about the SM Quickview module.

SM Shopby

Frontend Appearance

When you go to the Shop page, you will see the module on the left side of the page.

Backend of SM Shopby: Click Here

SM Listing Tabs

Position: SM Listing Tabs
Frontend Appearance

Backend of SM Listing Tabs : Click Here
Go Here to readmore about the SM Listing Tabs module.

SM Search Box Pro

Position: SM Search Box Pro
Frontend Appearance

Backend of SM Search Box Pro: Click Here

SM Image Instagram

Position: SM Image Instagram
Frontend Appearance

When you go to the Blog page, you will see the module on the right bottom side of the page.

Backend of SM Image Instagram: Click Here
Go Here to readmore about the SM Image Instagram module.

3.4 Configure Static Blocks

The SM Sawyer front-page has the following static blocks in the theme:

To create a new static block, go to CMS >> Static Blocks >> Add new block

Note: Since updating to Magento 1.9.2.4, all codes like this {{block }} are not working correctly. To solve this problem, please go into System >> Permissions >> Blocks and add your blocks in that list

Static Block: static-image-2

To create the static block, go to CMS >> Static Blocks with Title: Sawyer – Static Image 2 and Identifier * : “static-image-2″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="banner-home"><a class="banner-img  mr30" href="#"><img alt="" src="{{media url="wysiwyg/home-page-image/home-1/img2.jpg"}}" /></a> <a class="banner-img  mr30" href="#"><img alt="" src="{{media url="wysiwyg/home-page-image/home-1/img3.jpg"}}" /></a></div>

Static Block: static-1f-layout1

To create the static block, go to CMS >> Static Blocks with Title: Sawyer Banner 1F Home 1 and Identifier * : “static-1f-layout1″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="row banner-listtingbas">
<div class="banner col-sm-6">
<a class="banner-home1" title="Static Image" href="#"><img src="{{media url="wysiwyg/home-page-image/home-1/img4.jpg"}}" alt="" /></a>
</div>
<div class="brand col-sm-6">
<ul>
<li><a class="first-image" title="Static Image" href="#"><img class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-1.jpg"}}" /></a></li>
<li><a class="first-image" title="Static Image" href="#"><img class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-2.jpg"}}" /></a></li>
<li><a class="first-image" title="Static Image" href="#"><img class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-3.jpg"}}" /></a></li>
<li><a class="first-image" title="Static Image" href="#"><img class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-4.jpg"}}" /></a></li>
<li><a class="first-image" title="Static Image" href="#"><img class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-5.jpg"}}" /></a></li>
<li><a class="first-image" title="Static Image" href="#"><img class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-6.jpg"}}" /></a></li>
</ul>
</div>
</div>

To create the static block, go to CMS >> Static Blocks with Title: Sawyer – Image Sidebar and Identifier * : “image-static-sidebar”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="wow fadeInUp">
<div class="static-image-sidebar" style="margin-bottom:30px;">
<a title="Static Image" href="#" class="banner-img"><img src="{{media url="wysiwyg/sidebar/img-sidebar.jpg"}}" alt="Static Image" /></a>
</div>
</div>

Static Block: static-2f-layout1

To create the static block, go to CMS >> Static Blocks with Title: Sawyer Banner 2F Home 1 and Identifier * : “static-2f-layout1″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="row banner-listtingbas">
<div class="brand col-sm-6">
<ul>
<li><a class="first-image" title="Static Image" href="#"><img class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-1.jpg"}}" /></a></li>
<li><a class="first-image" title="Static Image" href="#"><img class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-2.jpg"}}" /></a></li>
<li><a class="first-image" title="Static Image" href="#"><img class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-3.jpg"}}" /></a></li>
<li><a class="first-image" title="Static Image" href="#"><img class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-4.jpg"}}" /></a></li>
<li><a class="first-image" title="Static Image" href="#"><img class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-5.jpg"}}" /></a></li>
<li><a class="first-image" title="Static Image" href="#"><img class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-6.jpg"}}" /></a></li>
</ul>
</div>
<div class="banner col-sm-6"><a class="banner-home1" title="Static Image" href="#"><img alt="" src="{{media url="wysiwyg/home-page-image/home-1/img5.jpg"}}" /></a></div>
</div>

Static Block: testimonials-layout1

To create the static block, go to CMS >> Static Blocks with Title: Sawyer – Home 1 testimonials and Identifier * : “testimonials-layout1″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="row banner-list">
	<div class="col-lg-12 col-md-12">
		<a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-1/image-4.jpg"}}" alt="Static Image" /></a>
	</div>
</div>

Static Block: static-3f-layout1

To create the static block, go to CMS >> Static Blocks with Title: Sawyer Banner 3F Home 1 and Identifier * : “static-3f-layout1″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="row banner-listtingbas">
<div class="banner col-sm-6">
<a class="banner-home1" title="Static Image" href="#"><img src="{{media url="wysiwyg/home-page-image/home-1/img6.jpg"}}" alt="" /></a>
</div>
<div class="brand col-sm-6">
<ul>
<li><a class="first-image" title="Static Image" href="#"><img class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-1.jpg"}}" /></a></li>
<li><a class="first-image" title="Static Image" href="#"><img class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-2.jpg"}}" /></a></li>
<li><a class="first-image" title="Static Image" href="#"><img class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-3.jpg"}}" /></a></li>
<li><a class="first-image" title="Static Image" href="#"><img class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-4.jpg"}}" /></a></li>
<li><a class="first-image" title="Static Image" href="#"><img class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-5.jpg"}}" /></a></li>
<li><a class="first-image" title="Static Image" href="#"><img class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-6.jpg"}}" /></a></li>
</ul>
</div>
</div>

Static Block: static-image-1

To create the static block, go to CMS >> Static Blocks with Title: Sawyer – Static Image 1 and Identifier * : “static-image-1″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<p><a class="banner-img mr30" href="#"><img alt="" src="{{media url="wysiwyg/home-page-image/home-1/img1.jpg"}}" /></a></p>

Static Block: policyshop-layout1

To create the static block, go to CMS >> Static Blocks with Title: Sawyer – Policyshop and Identifier * : “policyshop-layout1″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="block policy-shop">
<ul>
<li>
<img src="{{media url="wysiwyg/home-page-image/home-1/ic1.jpg"}}" alt="" />
<div class="content1">
<h2>Free Shipping</h2>
Free shipping on all orders over $49.00
</div>
</li>
<li>
<img src="{{media url="wysiwyg/home-page-image/home-1/ic2.jpg"}}" alt="" />
<div class="content1">
<h2>Support 24/7</h2>
We support online 24 hours a day
</div>
</li>
<li>
<img src="{{media url="wysiwyg/home-page-image/home-1/ic3.jpg"}}" alt="" />
<div class="content1">
<h2>Free return</h2>
30 days money back guarantee
</div>
</li>
</ul>
</div>

Static Block: static-4f-layout1

To create the static block, go to CMS >> Static Blocks with Title: Sawyer Banner 4F Home 1 and Identifier * : “static-4f-layout1″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="banner-center-litting">
<div class="banner-top">
<a class="banner-home1" title="Static Image" href="#"><img src="{{media url="wysiwyg/home-page-image/home-1/img7.jpg"}}" alt="" /></a>
<a class="banner-home1" title="Static Image" href="#"><img src="{{media url="wysiwyg/home-page-image/home-1/img8.jpg"}}" alt="" /></a>
<img class="icon-center" src="{{media url="wysiwyg/home-page-image/home-1/ic4.png"}}" alt="" />
</div>
<div class="brand-bottom">
<ul>
<li>
<a class="first-image" title="Static Image" href="#"><img class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-1.jpg"}}" /></a>
<a class="secd-image" title="Static Image" href="#"><img class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-2.jpg"}}" /></a>
</li>
<li>
<a class="first-image" title="Static Image" href="#"><img class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-3.jpg"}}" /></a>
<a class="secd-image" title="Static Image" href="#"><img class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-4.jpg"}}" /></a>
</li>
<li>
<a class="first-image" title="Static Image" href="#"><img class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-5.jpg"}}" /></a>
<a class="secd-image" title="Static Image" href="#"><img class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-6.jpg"}}" /></a>
</li>
</ul>
</div>
</div>

Static Block: ft-contact-us

To create the static block, go to CMS >> Static Blocks with Title: Sawyer – Contact us footer and Identifier * : “ft-contact-us”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="block ft-contact-us">
<div class="title">About sawyer</div>
<div class="content">
<p class="address">152 Mila Mrest Street, Behansed, Paris, France</p>
<p class="phone">(+123) 456 7890 - (+122) 561 2183</p>
<p class="email"><a title="Mail to: sawyer@co.uk.com" href="mailto:sawyer@co.uk.com">Sale@sawyer.com</a> - <a title="Mail to: sawyer@co.uk.com" href="mailto:sawyer@co.uk.com">Sale@sawyer.com</a></p>
</div>
</div>

Static Block: ft-information

To create the static block, go to CMS >> Static Blocks with Title: Sawyer – Information footer and Identifier * : “ft-information”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="block ft-information">
<div class="title">INFORMATION</div>
<div class="content">
<ul>
<li><a title="Shipping Policy" href="{{store url="privacy-policy-cookie-restriction-mode"}}">Shipping Policy</a></li>
<li><a title="My Account" href="{{store url="customer/account"}}">My Account</a></li>
<li><a title="Return Policy" href="{{store url="privacy-policy-cookie-restriction-mode"}}">Return Policy</a></li>
<li><a title="Contact Usy" href="{{store url="contact-us.html"}}">Contact Us</a></li>
<li><a title="Advanced Search" href="{{store url="catalogsearch/advanced"}}">Advanced Search</a></li>
</ul>
</div>
</div>

Static Block: ft-opentime

To create the static block, go to CMS >> Static Blocks with Title: Sawyer – Open Time and Identifier * : “ft-opentime”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="block ft-my-account">
	<div class="title">
		Opening time
	</div>
	<div class="content">
		<ul>
			<li>Monday - Friday:<span>8:00 - 18:00</span></li>
			<li>Saturday:<span>9:00 - 16:00</span></li>
			<li>Sunday:<span>Closed</span></li>
			<li>Every 30 day of month Lorem ipsum dolor sit amet, adipiscing elit.</li>
		</ul>
	</div>
</div>

To create the static block, go to CMS >> Static Blocks with Title: Sawyer – Payment Footer and Identifier * : “payment-footer”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<img src="{{media url="wysiwyg/payment/payment.png"}}" alt="Payment" />

Static Block: links-pagedeals

To create the static block, go to CMS >> Static Blocks with Title: Sawyer – V2 – Page deals and Identifier * : “links-pagedeals”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<a href="page-deals" class="page-daydeals" title="TODAY'S DEALS">
											<i class="fa fa-gift"></i>
											<span>to day deals</span>
										</a>

Static Block: policy-shop2

To create the static block, go to CMS >> Static Blocks with Title: Sawyer – Policyshop Home 2 and Identifier * : “policy-shop2″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="policy-shop2">
<div class="row">
<div class="col-sm-4">
<img src="{{media url="wysiwyg/home-page-image/home-2/ico1.jpg"}}" alt="" />
<div class="wrap-content">
<h2>Free Shipping</h2>
<p>Free shipping on all orders over $49.00</p>
</div>
</div>
<div class="col-sm-4">
<img src="{{media url="wysiwyg/home-page-image/home-2/ico2.jpg"}}" alt="" />
<div class="wrap-content">
<h2>Support 24/7</h2>
<p>We support online 24 hours a day</p>
</div>
</div>
<div class="col-sm-4">
<img src="{{media url="wysiwyg/home-page-image/home-2/ico3.jpg"}}" alt="" />
<div class="wrap-content">
<h2>Free return</h2>
<p>30 days money back guarantee</p>
</div>
</div>
</div>
</div>

To create the static block, go to CMS >> Static Blocks with Title: Sawyer – Banner Home 21 and Identifier * : “banner-home1″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="mr30"><a href="#" class="banner-img"><img src="{{media url="wysiwyg/home-page-image/home-2/banner1.jpg"}}" alt="" /></a></div>

Static Block: pretext-mobiles

To create the static block, go to CMS >> Static Blocks with Title: Sawyer – Basic Product Home 2 and Identifier * : “pretext-mobiles”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="categories-pro">
	<h2 class="title-cate"><i class="fa fa-mobile-phone"> </i> mobiles & Acessories</h2>
	<ul>
	<li><a href="{{store url="shop.html"}}" title="Backup Power">Backup Power</a></li>
	<li><a href="{{store url="shop.html"}}" title="Chargers & Docks">Chargers & Docks</a></li>
	<li><a href="{{store url="shop.html"}}" title="Headphones">Headphones</a></li>
	<li><a href="{{store url="shop.html"}}" title="Screen Protectors">Screen Protectors</a></li>
	<li><a href="{{store url="shop.html"}}" title="Acessories">Acessories</a></li>
	</ul>
</div>

Static Block: brand-basicproduct2

To create the static block, go to CMS >> Static Blocks with Title: Sawyer – Brand Basicproduct Home 2 and Identifier * : “brand-basicproduct2″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="brand-basicproduct2">
<div class="row">
<div class="col-md-2 col-sm-4 col-xs-2"><a class="first-image" title="Static Image" href="#"><img class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-1.jpg"}}" /></a></div>
<div class="col-md-2 col-sm-4 col-xs-2"><a class="first-image" title="Static Image" href="#"><img class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-2.jpg"}}" /></a></div>
<div class="col-md-2 col-sm-4 col-xs-2"><a class="first-image" title="Static Image" href="#"><img class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-3.jpg"}}" /></a></div>
<div class="col-md-2 col-sm-4 col-xs-2"><a class="first-image" title="Static Image" href="#"><img class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-4.jpg"}}" /></a></div>
<div class="col-md-2 col-sm-4 col-xs-2"><a class="first-image" title="Static Image" href="#"><img class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-5.jpg"}}" /></a></div>
<div class="col-md-2 col-sm-4 col-xs-2"><a class="first-image" title="Static Image" href="#"><img class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-6.jpg"}}" /></a></div>
</div>
</div>

To create the static block, go to CMS >> Static Blocks with Title: Sawyer Banner Home 22 and Identifier * : “banner-home2″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="mr30"><a href="#" class="banner-img"><img src="{{media url="wysiwyg/home-page-image/home-2/banner2.jpg"}}" alt="" /></a></div>

Static Block: pretext-gift

To create the static block, go to CMS >> Static Blocks with Title: Sawyer – Basic Product Home 2-3 and Identifier * : “pretext-gift”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="categories-pro">
	<h2 class="title-cate"><i class="fa fa-gift"> </i>Gift & Parties</h2>
	<ul>
	<li><a href="{{store url="shop.html"}}" title="Anniversary">Anniversary</a></li>
	<li><a href="{{store url="shop.html"}}" title="Baby & Expecting">Baby & Expecting</a></li>
	<li><a href="{{store url="shop.html"}}" title="Birthday">Birthday</a></li>
	<li><a href="{{store url="shop.html"}}" title="Christmas">Christmas</a></li>
	<li><a href="{{store url="shop.html"}}" title="Congratulations">Congratulations</a></li>
	<li><a href="{{store url="shop.html"}}" title="Acessories">Acessories</a></li>
	</ul>
</div>

To create the static block, go to CMS >> Static Blocks with Title: Sawyer Banner Home 23 and Identifier * : “banner-home3″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="mr30"><a href="#" class="banner-img"><img src="{{media url="wysiwyg/home-page-image/home-2/banner3.jpg"}}" alt="" /></a></div>

Static Block: pretext-fashion

To create the static block, go to CMS >> Static Blocks with Title: Sawyer – Basic Product Home 2 Pretext 3 and Identifier * : “pretext-fashion”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="categories-pro">
<h2 class="title-cate"><i class="fa img-fa"><img src="{{media url="wysiwyg/home-page-image/home-2/ico4.png"}}" alt="" /></i>Fashion & clothes</h2>
<ul>
<li><a title="T-Shirts" href="{{store url="shop.html"}}">T-Shirts</a></li>
<li><a title="Fall Jackets" href="{{store url="shop.html"}}">Fall Jackets</a></li>
<li><a title="Sweaters" href="{{store url="shop.html"}}">Sweaters</a></li>
<li><a title="Pants&Legging" href="{{store url="shop.html"}}">Pants&Legging</a></li>
<li><a title="Acessories" href="{{store url="shop.html"}}">Acessories</a></li>
</ul>
</div>

To create the static block, go to CMS >> Static Blocks with Title: Sawyer Banner Home 24 and Identifier * : “banner-home4″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="mr30"><a href="#" class="banner-img"><img src="{{media url="wysiwyg/home-page-image/home-2/banner4.jpg"}}" alt="" /></a></div>

Static Block: pretext-furniture

To create the static block, go to CMS >> Static Blocks with Title: Sawyer – Basic Product Home 2 Pretext 4 and Identifier * : “pretext-furniture”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="categories-pro">
<h2 class="title-cate"><i class="fa img-fa"><img src="{{media url="wysiwyg/home-page-image/home-2/ico5.png"}}" alt="" /></i>Home & Interior</h2>
<ul>
<li><a title="Anniversary" href="{{store url="shop.html"}}">Anniversary</a></li>
<li><a title="Babvy & Expecting" href="{{store url="shop.html"}}">Babvy & Expecting</a></li>
<li><a title="Birthday" href="{{store url="shop.html"}}">Birthday</a></li>
<li><a title="Christmas" href="{{store url="shop.html"}}">Christmas</a></li>
<li><a title="Congratulations" href="{{store url="shop.html"}}">Congratulations</a></li>
<li><a title="Accessories" href="{{store url="shop.html"}}">Accessories</a></li>
</ul>
</div>

To create the static block, go to CMS >> Static Blocks with Title: Sawyer – Banner Home 25 and Identifier * : “banner-home5″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="mr30"><a href="#" class="banner-img"><img src="{{media url="wysiwyg/home-page-image/home-2/banner5.jpg"}}" alt="" /></a></div>

Static Block: brand-slider-home2

To create the static block, go to CMS >> Static Blocks with Title: Sawyer – V2 Brand Bottom and Identifier * : “brand-slider-home2″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="wrapper-brandsdivde">
<ul class="brand-slider">
<li><a title="Brand" href="#"><img src="{{media url="wysiwyg/home-page-image/home-2/br1.png"}}" alt="" /></a></li>
<li><a title="Brand" href="#"><img src="{{media url="wysiwyg/home-page-image/home-2/br2.png"}}" alt="" /></a></li>
<li><a title="Brand" href="#"><img src="{{media url="wysiwyg/home-page-image/home-2/br3.png"}}" alt="" /></a></li>
<li><a title="Brand" href="#"><img src="{{media url="wysiwyg/home-page-image/home-2/br4.png"}}" alt="" /></a></li>
<li><a title="Brand" href="#"><img src="{{media url="wysiwyg/home-page-image/home-2/br5.png"}}" alt="" /></a></li>
<li><a title="Brand" href="#"><img src="{{media url="wysiwyg/home-page-image/home-2/br6.png"}}" alt="" /></a></li>
<li><a title="Brand" href="#"><img src="{{media url="wysiwyg/home-page-image/home-2/br7.png"}}" alt="" /></a></li>
</ul>
</div>
<script>
		jQuery(document).ready(function($) {
			var post_sdivder = $(".brand-slider");
			post_sdivder.owlCarousel({	
				animateOut: 'fadeOut',
				animateIn: 'fadeIn',
				responsive:{
					0:{
						items:2
					},
					480:{
						items:4
					},
					768:{
						items:5
					},
					992:{
						items:6

					},
					1200:{
						items:7,
                                              margin:80
					}
				},
				autoplay:false,
				loop:true,
				nav : true,
				dots: false,
				autoplaySpeed : 500,
				navSpeed : 500,
				dotsSpeed : 500,
				autoplayHoverPause: true,
				 margin:30,
			});	  
		});	
	</script>

Static Block: message-footer2

To create the static block, go to CMS >> Static Blocks with Title: Sawyer – V2 Message Footer2 and Identifier * : “message-footer2″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<p class="mess-footer">Sign Up For Saving and Trends!</p>

Static Block: static-image-1-index3

To create the static block, go to CMS >> Static Blocks with Title: Sawyer Static image-1 index3 and Identifier * : “static-image-1-index3″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="static-home31 wow fadeIn">
   <div class="container">
	<div class="block-title-home3">
	<h2>DISCOVER <strong>OUR COLLECTION</strong></h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
	</div>
	<div class="block1-content">
		<div class="row">
			<div class="col-xs-3">
				<a href="#" class="banner3-img mr30"><img src="{{media url="wysiwyg/home-page-image/home-3/img1.jpg"}}" alt="" /></a>
				<a href="#" class="banner3-img mr30"><img src="{{media url="wysiwyg/home-page-image/home-3/img2.jpg"}}" alt="" /></a>
			</div>
			<div class="col-xs-6">
			<a href="#" class="banner3-img mr30"><img src="{{media url="wysiwyg/home-page-image/home-3/img3.jpg"}}" alt="" /></a>
			</div>
			<div class="col-xs-3">
				<a href="#" class="banner3-img mr30"><img src="{{media url="wysiwyg/home-page-image/home-3/img4.jpg"}}" alt="" /></a>
			</div>
		</div>
		<a href="#" class="button-home3">Discovery Now</a>
	</div>
</div>
</div>

Static Block: static-image-2-index3

To create the static block, go to CMS >> Static Blocks with Title: Sawyer Static image-2 index3 and Identifier * : “static-image-2-index3″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<a class="banner3-img" title="Static Image" href="#">
<img src="{{media url="wysiwyg/home-page-image/home-3/img5.jpg"}}" alt="" />
</a>

Static Block: static-image-3-index3

To create the static block, go to CMS >> Static Blocks with Title: Sawyer Static image-3 index3 and Identifier * : “static-image-3-index3″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<a class="banner3-img" title="Static Image" href="#">
<img src="{{media url="wysiwyg/home-page-image/home-3/img6.jpg"}}" alt="" />
</a>

Static Block: policy-shop4

To create the static block, go to CMS >> Static Blocks with Title: Sawyer – Policyshop Home 4 and Identifier * : “policy-shop4″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="policy-shop4 wow fadeInUp">
<div class="row">
<div class="col-sm-4">
<img src="{{media url="wysiwyg/home-page-image/home-4/ico1.png"}}" alt="" />
<div class="wrap-content">
<h2>Free Shipping</h2>
<p>Free shipping on all orders over $49.00</p>
</div>
</div>
<div class="col-sm-4">
<img src="{{media url="wysiwyg/home-page-image/home-4/ico2.png"}}" alt="" />
<div class="wrap-content">
<h2>Support 24/7</h2>
<p>We support online 24 hours a day</p>
</div>
</div>
<div class="col-sm-4">
<img src="{{media url="wysiwyg/home-page-image/home-4/ico3.png"}}" alt="" />
<div class="wrap-content">
<h2>Free return</h2>
<p>30 days money back guarantee</p>
</div>
</div>
</div>
</div>

Static Block: static-image-1-index4

To create the static block, go to CMS >> Static Blocks with Title: Sawyer Static image-1 index4 and Identifier * : “static-image-1-index4″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<ul class="wrapper-banner4 wow fadeInUp mr30">
<li  class="banner-home4 col-sm-4">
<div class="banner4">
<a href="#"><img src="{{media url="wysiwyg/home-page-image/home-4/image-1.jpg"}}" alt="" /></a>
<div class="content-bn">
<h3 class="g2font">Furniture</h3>
<h2 class="g2font">Office interior</h2>
<a href="#" class="shop-now">Shop Now</a>
</div>

</div>
</li>
<li class="banner-home4 col-sm-4 active">
<div class="banner4">
<a href="#"><img src="{{media url="wysiwyg/home-page-image/home-4/image-2.jpg"}}" alt="" /></a>
<div class="content-bn">
<h3 class="g2font">Furniture</h3>
<h2  class="g2font" >Office interior</h2>
<a href="#" class="shop-now">Shop Now</a>
</div>

</div>
</li>
<li  class="banner-home4 col-sm-4">
<div class="banner4">
<a href="#"><img src="{{media url="wysiwyg/home-page-image/home-4/image-3.jpg"}}" alt="" /></a>
<div class="content-bn">
<h3 class="g2font">Furniture</h3>
<h2 class="g2font">Office interior</h2>
<a href="#" class="shop-now">Shop Now</a>
</div>
</div>
</li>
</ul>

Static Block: static-testimonials-index4

To create the static block, go to CMS >> Static Blocks with Title: Sawyer Testimonials index 4 and Identifier * : “static-testimonials-index4″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div id="testimonials-home"  class="testimonials-home wow fadeInUp">
<div class="navslider">
					<a class="prev" href="#"><i class="fa fa-long-arrow-left"></i></a>
						<a class="next" href="#"><i class="fa fa-long-arrow-right"></i></a>
					</div>

	<div class="margin-slider">
		<ul class="testimonials-slider">
			<li class="item">
				<div class="client-child">
					
					<div class="image-client">
						<img src="{{media url="wysiwyg/testimonial/client-1.jpg"}}" alt="Kenvin" />
					</div>
					<div class="comment">
						<h2 class="client-name"> Anna </h2>
						<h3 class="client-job">Market Research </h3>
						<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur..
						</div>
					</div>
					
				</div>
			</li>
			<li class="item">
				<div class="client-child">
					
					<div class="image-client">
						<img src="{{media url="wysiwyg/testimonial/client-2.jpg"}}" alt="Venus" />
					</div>
					<div class="comment">	
						<h2 class="client-name"> David </h2>
						<h3 class="client-job">Market Research </h3>
						<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur..
						</div>
					</div>
				</div>
			</li>
<li class="item">
				<div class="client-child">
					<div class="image-client">
						<img src="{{media url="wysiwyg/testimonial/client-3.jpg"}}" alt="Venus" />
					</div>
					<div class="comment">
						<h2 class="client-name"> Venus </h2>
						<h3 class="client-job">Designer </h3>
						<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur..
						</div>
					</div>
				</div>
			</li>
	<li class="item">
				<div class="client-child">
					<div class="image-client">
						<img src="{{media url="wysiwyg/testimonial/client-4.jpg"}}" alt="Venus" />
					</div>
					<div class="comment">
						<h2 class="client-name">Tommy</h2>
						<h3 class="client-job">Deverloper</h3>
						<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur..
						</div>
					</div>
				</div>
			</li>
		<li class="item">
				<div class="client-child">
					<div class="image-client">
						<img src="{{media url="wysiwyg/testimonial/client-5.jpg"}}" alt="Venus" />
					</div>
					<div class="comment">
						<h2 class="client-name"> Black Smith </h2>
						<h3 class="client-job">Web Development</h3>
						<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur..
						</div>
					</div>
				</div>
			</li>
<li class="item">
				<div class="client-child">
					<div class="image-client">
						<img src="{{media url="wysiwyg/testimonial/client-6.jpg"}}" alt="Venus" />
					</div>
					<div class="comment">
						<h2 class="client-name"> Kenvin </h2>
						<h3 class="client-job">Market Research </h3>
						<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur..
						</div>
					</div>
				</div>
			</li>				
		</ul>
	</div>
	
	<script>
		jQuery(document).ready(function($) {
						$(window).load(function(){
							$('#testimonials-home .testimonials-slider').owlCarousel({
								 items: 3,
								loop:true,
								nav: false,
								dots: true,
								slideSpeed : 1,
								center: true,
								autoplay: true,
		    					autoplayTimeout: 30000,
								autoplayHoverPause: true,
								addClassActive: true,
								margin:30,
								animateOut: 'slideOutDown',
    							animateIn: 'flipInX',
					            onInitialized: callback
							});
							function callback(event) {
					   			if(this._items.length > this.options.items){
								        $('#testimonials-home .navslider').show();
								    }else{
								        $('#testimonials-home .navslider').hide();
								    }
							}
							$('#testimonials-home .navslider .prev').on('click', function(e){
								e.preventDefault();
								$('#testimonials-home .testimonials-slider').trigger('prev.owl.carousel');
							});
							$('#testimonials-home .navslider .next').on('click', function(e){
								e.preventDefault();
								$('#testimonials-home .testimonials-slider').trigger('next.owl.carousel');
							});
						});
					});

	</script>
</div>

Static Block: static-image-1-index5

To create the static block, go to CMS >> Static Blocks with Title: Sawyer Static image-1 index5 and Identifier * : “static-image-1-index5″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<a href="#" class="banner-img"><img src="{{media url="wysiwyg/home-page-image/home-5/img1.jpg"}}" alt="" /></a>

Static Block: static-image-2-index5

To create the static block, go to CMS >> Static Blocks with Title: Sawyer Static image-2 index5 and Identifier * : “static-image-2-index5″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<a href="#" class="banner-img"><img src="{{media url="wysiwyg/home-page-image/home-5/img2.jpg"}}" alt="" /></a>

Static Block: static-imgcategory-index5

To create the static block, go to CMS >> Static Blocks with Title: Sawyer Static Img Category index 5 and Identifier * : “static-imgcategory-index5″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="row wow fadeInUp category-img">
<div class="col-sm-3 col-xs-6">
<div class="img-category">
<a href="#" class="box-img">
<img src="{{media url="wysiwyg/home-page-image/home-5/img3.jpg"}}" alt="" />
<h2 class="g2font">oleva watches</h2>
</a>
<div class="conten-cat">
<h3 class="g2font">Sale 45% off</h3>
<h2 class="g2font">oleva watches</h2>
<a href="#" class="button-cate">Shop Now</a>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-6">
<div class="img-category">
<a href="#" class="box-img">
<img src="{{media url="wysiwyg/home-page-image/home-5/img4.jpg"}}" alt="" />
<h2 class="g2font">Wear watches</h2>
</a>
<div class="conten-cat">
<h3 class="g2font">Sale 40% off</h3>
<h2 class="g2font">Wear watches</h2>
<a href="#" class="button-cate">Shop Now</a>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-6">
<div class="img-category">
<a href="#" class="box-img">
<img src="{{media url="wysiwyg/home-page-image/home-5/img5.jpg"}}" alt="" />
<h2 class="g2font">Casio watches</h2>
</a>
<div class="conten-cat">
<h3 class="g2font">Sale 41% off</h3>
<h2 class="g2font">Casio watches</h2>
<a href="#" class="button-cate">Shop Now</a>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-6">
<div class="img-category">
<a href="#" class="box-img">
<img src="{{media url="wysiwyg/home-page-image/home-5/img6.jpg"}}" alt="" />
<h2 class="g2font">Men watches</h2>
</a>
<div class="conten-cat">
<h3 class="g2font">Sale 40% off</h3>
<h2 class="g2font">Men watches</h2>
<a href="#" class="button-cate">Shop Now</a>
</div>
</div>
</div>
</div>

3.5 How To Edit Copyright in Admin Panel

Frontend Appearance

In the Administrator page, Please navigate to SM Sawyer Setting; find SM Sawyer Setting Module to configure the “Copyright” parameter as image below:

3.6 How To Customize the Social symbols in admin panel

Frontend Appearance

In the Administrator page, please go to SM Sawyer Setting; find SM Sawyer Setting Module to configure the “Social Style” parameter as image below:

3.7 Customize HTML

TOP-LINK

Frontend Appearance

In your Website’s Directory, go to app\design\frontend\sm-sawyer\default\template\page\html\header-style folder. In this folder, you could open the files named header-1.phtml, header-2.phtml, header-3.phtml, header-4.phtml, header-5.phtml by your editor program to configure this part.

4SUPPORT

SUPPORT – If you have any questions that are beyond the scope of this help file, please feel free to send us via: Support Tickets System
FAQs – Go to Here to view more the Frequently Asked Questions.

↧

SP Topshop

April 1, 2016, 7:39 pm

≫ Next: How to renew item support on Themeforest?

≪ Previous: SM Sawyer

View demo More detail

1GETTING STARTED

1.1 Introduction

Firstly, a huge thanks for purchasing this theme, your support is truly appreciated!

1.2 System Requirements

Please make sure your hosting server meets the PrestaShop requirements:

Supported operating system: Windows, Mac and Linux.
Wamp (for Windows) or Xampp (for Windows and Mac)
Web server: Apache Web server 1.3 or later, Microsoft’s IIS Web server 6.0 or later.
PHP 5.2* or later.
MySQL 5.0 or later.
At least 32 Mb of RAM on your server (64 Mb is comfortable, the more the better).

Note: If you can not import the theme/module file to your server due to the maximum upload and PHP memory limit, you need to increase the parameter “memory_limit=200M”; “max_execution_time=300″; “max_execution_time=1000″ & “upload_max_filesize=20M” in the file php.ini.

1.3 PrestaShop Guide

If you are not familiar with Prestashop, please read its guide first: http://doc.prestashop.com/display/PS16/Getting+Started

2INSTALLATION

There are two ways to install SP Topshop Theme

Quickstart Installation: By using this package, you will set the theme exactly like our Demo with sample data.
Manual Installation : Include of Theme layout Installation Packages. Please unzip the package and you would see the following folders:
- module folder
- override folder
- sp_topshop_template_p16_v1.0.0.zip file

2.1 Quickstart Installation

We provide Quickstart package for each theme which aims to ease the installation for users. It will help you save much time of installing and configuring if you plan to start your site from the beginning. Please following steps below:

Step 1: Download the quickstart package of SP Topshop theme
Step 2: Extract the downloaded package named “sp_topshop_quickstart_p16_v1.0.0.zip” in your localhost (or your hosting) folder. In Quickstart folder you will see the extracted folder that include all sample data
Step 3: Start installation by opening browser and navigate to your URL (where the Quickstart uploaded) to load default Prestashop installer. Please follow these steps of the Installer so that the installation process can be set.

Installation Assistant (Choose your language)

Please select the installation language

Please note: The installation language option will not affect your store language. By default PrestaShop is offered in English. You can install additional localization packages to change the store language.

When you are done, click the ‘Next’ button.

Installation Assistant (License agreements)

Please check the license agreement.

When you are done, click the ‘Next’ button.

System Compatibility

Check the PHP settings and directory permissions. In case of any errors, please contact your hosting provider for further assistance.

If everything is correct, click the ‘Next’ button.

Store Information

Now add required information for your store: Shop name, Main activity, Country, Shop timezone and add the account info: first name, last name, email and password. Click “Next” to next step.

When you are done, click the ‘Next’ button.

System Configuration

Here is the database configuration panel, we need to create database first.

Access your database panel and create database for your site. Add database name and then click “Create” button.

When the database is created successfully, copy and paste its name into the “Database name” field, then click the “Test your database connection now!” button to make sure that the entered settings are correct. If they are, you will see a Database is connected message. After that, you could click the “Next” button to move to next steps.

Finish installation: This process could take a few minutes

Note: For security reasons you need to delete the install/ directory on your hosting server.

And finally, go to the Frontend or Backend as you want:

2.2 Theme Installation

Note: Before installing theme, you must disable the cache. In your back office, please go to ADVANCED PARAMETERS >> Performance >> find “Cache” parameter >> Set “No” to disable cache >> Click “Save”.

SP Topshop Layout1 Theme Installation

Note: Here we will introduce you How To Install SP Topshop Layout 1 Theme

Firstly, you must EXTRACT the “sp_topshop_layout1_theme_p16_v1.0.0.zip” package and open the extracted folder. Here you will see:

module folder: contain of the smartblog.zip file, smartblogcategories.zip file.
override folder: contain of “FrontController.php” file in the folder URL: \override\classes\controller\ .
and the sp_topshop_template_p16_v1.0.0.zip file.

STEP 1: Install “smartblog.zip”, “smartbloghomelatestnews.zip” and“smartblogcategories.zip” Module.

1. Login to your Prestashop admin panel and navigate to MODULES -> Modules. At the top of the page click the Add a new module button.

2. Choose “smartblog.zip” file and click “Upload this module” button

3. There is a message-box “The module was successfully downloaded.”

4. Please find to the uploaded module and click “Install” button to run it.

5. When a pop-up window displays, please click “Proceed with the installation” button.

6. Finally, Module(s) installed successfully.

Note: Do the same with the “smartblogcategories.zip” and “smartbloghomelatestnews.zip” module’s installation

STEP 2: Install the “sp_topshop_template_p16_v1.0.0.zip” file.

1. Login to your Prestashop admin panel and navigate to Preferences -> Themes. At the top of the page click the Add a new theme button.

2. Navigate to “Import from your computer” >> choose the zip theme file as named “sp_topshop_template_p16_v1.0.0.zip” >> Save.

3. When your choice is successfully validated , a notice will be showed like the following image:

4. In the section named as Select a theme for your “[name]” shop, move your mouse cursor over SP Topshop‘s thumbnail and select Use this themeto replace your current theme with SP Topshop theme.

5. After that, a list of the installed/disabled modules will be showed out, please click “Save” to install modules that were imported along with the theme.

6. Finally, please click “Finish” to end the process.

STEP 3: Override folder: copy the "FrontController.php" file into the installation folder with the URL: override\classes\controller.

3SP THEME CONFIGURATION

3.1 General Settings

1. In your Prestashop Admin Dashboard, navigate to Modules and Services >> Modules and Services >> go to MODULES LIST section, search for “SP Theme Configuration” module then click on Configure.

2. In the SP Theme Settings, choose “General” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.

3.2 Layout Settings

2. In the SP Theme Settings, choose “Layout” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.

3.3 Fonts

2. In the SP Theme Settings, choose “Fonts” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.

Note: Please copy and paste the following line into Font Selector tab:
1.

body, h5.product-name, .price-box, #attributes .attribute_list select, h1.product_name

div.hot-deal h3.title_block,.product_list .price-box .price, .product_lists .price-box .price,.sphomepage-slider .owl-item.active .sphomeslider-description h2, .sphomepage-slider .owl-item.active .sphomeslider-description h3, .sphomepage-slider .owl-item.active .sphomeslider-description h4,#newsletter_block_popup .block_content .content-inner h3.title,.about-text h1,#smartblogcat .articleContent .sdsarticleHeader .bg_date,.block .title_block, .moduletable .title_block,.block .title_block, .moduletable .title_block,.ig-title-module,#layered_block_left #layered_form .layered_price .layered_filter_ul label, #layered_block_left #layered_form .layered_price .layered_filter_ul #layered_price_range,#layered_block_left #layered_form span.layered_subtitle,.breadcrumb a, .breadcrumb span,#newsletter_block_home .title,div.sp-sp-cat .spcat-tabs-container .spcat-tabs .spcat-tab span,div.lastestnews .post .post_content .post-date,div.lastestnews .post .post_content .post_title a,.footer-container #footer h3,.content_v2 #newsletter_block_home h3.title_block,.spcountdownproductslider-time .item-timer .time-item,.spcountdownproductslider-heading .spcountdownproductslider-time .title-time,.content_prices .our_price_display,.content_prices .old_price,div.upsell_product .price-box .price

3.4 Category Pages

2. In the SP Theme Settings, choose “Category Pages” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.

3.5 Product Pages

2. In the SP Theme Settings, choose “Product Pages” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.

3.6 Bonus Pages

2. In the SP Theme Settings, choose “Bonus Pages” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.

3.7 Advanced Settings

2. In the SP Theme Settings, choose “Advanced” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.

2. In the SP Theme Settings, choose “Social Accounts” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.

3.9 Setup Logo

1. To configure Logo for your store, navigate to PREFERENCES > Themes in your Prestashop Admin Dashboard. Go to Logo tab to set up your logo. Click “Add File” to upload the logo image as you want and “Save”.

2. Please check the front-end to view the changes.

3.10 Image Size Adjustment

In your Prestashop admin dashboard, navigate to: PREFERENCES >> Images to configure the image size for category, manufacturer, supplier, product, etc that fit your layout best.

1. Image size - You can choose the image size types that suit your products best.

2. Image quality - You can set image quality in use on your site.

3. Regenerate thumbnails - To see the changes after you update the image sizes, image quality; you need to re-generate the images used in your site. Select option then click Regenerate thumbnails button.

3.11 Edit Copyright

Frontend Appearance:

To edit Copyright, please follow these steps:
1. In your Prestashop Admin Dashboard, navigate to Modules and Services >> Modules and Services >> go to MODULES LIST section, search for “SP Theme Configuration” module then click on Configure.

2. In the SP Theme Settings, choose “General” to configure the parameter named “Copyright”in this section. After finishing, you could go to the front-end to see the changes.

3.12 Edit Payment

Frontend Appearance:

To edit Payment, please follow these steps:
1. In your Prestashop Admin Dashboard, navigate to Modules and Services >> Modules and Services >> go to MODULES LIST section, search for “SP Theme Configuration” module then click on Configure.

2. In the SP Theme Settings, choose “General” to configure the parameter named “Upload your own payment image” in this section. After finishing, you could go to the front-end to see the changes.

Frontend Appearance:

To edit this pop-up, please follow these steps:
1. Change the image:
In your Website’s Directory, go to themes\sp_topshop\img\icon folder. To change the image in this pop-up, you could replace our sample image named bg_popup2.jpg by your image with the same name as our sample image.

2. Change the text:
In your Website’s Directory, go to themes\sp_topshop\modules\spblocknewsletter folder. To change the text in this pop-up, in this folder, you could open the file named spblocknewsletterpopup2.tpl by your editor program.
Find and change the following text in this file as you want:

NO THANK !

I AM NOT INTERESTED IN THIS PROMOTION.

Entering your email also subscribe you to the latest

3. After finishing, you could go to the front-end to see the changes.

5EXTENSIONS CONFIGURATION

6.1 SP Topshop Layout 1

displaySearch

SP Search Block

Frontend Appearance:

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Search Pro” module >> click “Configure” button to configure.

Step 2: In the “SP Search Pro” configuration page, click button in the right corner to “ADD NEW MODULE”.

Step 3: You could configure this module like the following image.

displayCart

SP Cart Block

Frontend Appearance:

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Cart Block” module >> click “Configure” button to configure.

Step 2: In the “SP Cart Block” configuration page, click button in the right corner to “ADD NEW MODULE”.

Step 3: You could configure this module like the following image.

displayUserinfo

SP User Info Block

Frontend Appearance:

Backend Settings:

In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP User Info Block” module >> click “Enable” button to enable this module.

displayTopNav

1. SP Block Currencies

Frontend Appearance:

Backend Settings:

In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Currency Block” >> click “Enable” button to enable this module.

2. SP Block Languages

Frontend Appearance:

Backend Settings:

Step 1: To add language as you want. For example: To add “Arabic” language, in your Admin Panel >> navigate to LOCALIZATION >> Languages >> click button in the right corner to “ADD NEW”.

Step 2: Fill information into the required field (*) as below:

Step 3: Click “Save” button and view shop to see the changes.

Note: When you add any language as you want, for example: Arabic language as above. At the frontend , some images will display “?” image as following:

.

To resolve this error, please make the steps following:

1. In your administator, please find to position of this module, for example: Position – displayHtml35: banner slider layout6; Module: SP Custom HTML.

.

2. And click source code to add “../” at before the image url >> Click “OK”.

.

3. Click “Save” button and go to the frontend to view the changes.

displaySlideShow6

Sp slider for your homepage

Frontend Appearance:

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Home Slider” module >> click “Configure” button to configure.

Step 2: In the “SP Slider For Your Homepage” configuration page, click button in the right corner to “ADD NEW MODULE”.

Step 3: You could configure this module like the following image.

Step 4: In the last part named Slides List of this configuration page, click button in the right corner to add new slide and edit slide’s information as follows:

Sample 13: Please click Here to view
Sample 14: Please click Here to view

display CustomHTML35

SP Custom HTML – banner slider layout6
Frontend Appearance:

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.

Step 2: In the “SP Custom HTML” configuration page, click button in the right corner to “ADD NEW MODULE”.

Step 3: You could configure this module like the following image.

Copy and paste the following code into the content:

<div class="banner_l6"><a href="#" class="img1"><img src="../themes/sp_topshop/img/cms/banner_l6_1.jpg" alt="" /></a> <a href="#" class="img2"><img src="../themes/sp_topshop/img/cms/banner_l6_2.jpg" alt="" /></a></div>

display CustomHTML36

SP Custom HTML – Weve confident
Frontend Appearance:

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.

Step 2: In the “SP Custom HTML” configuration page, click button in the right corner to “ADD NEW MODULE”.

Step 3: You could configure this module like the following image.

Copy and paste the following code into the content:

<div class="custom_confident">
<div class="logo1 col-md-3 col-sm-3"><a href="#"><img src="../themes/sp_topshop/img/cms/logo_valenci_1.png" alt="" /></a></div>
<div class="text_custom col-md-9 col-sm-9">
<p>Weve confident weve provided all the best for you. Stay connect with us. <span>Thank so much!</span></p>
</div>
</div>

displayListingtab

SP Listing Tabs
Frontend Appearance:

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Listing Tabs” module.

Step 2: In the “SP Listing Tabs” configuration page, click button in the right corner to “ADD NEW MODULE”.

Step 3: You could configure this module like the following image.

display CustomHTML37

SP Custom HTML – Banner Left layout6
Frontend Appearance:

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.

Step 2: In the “SP Custom HTML” configuration page, click button in the right corner to “ADD NEW MODULE”.

Step 3: You could configure this module like the following image.

Copy and paste the following code into the content:

<div class="bgr_img"><a href="#"><img src="../themes/sp_topshop/img/cms/cate09.jpg" alt="" /></a></div>

displayInstagram

SP Instagram Gallery
Frontend Appearance:

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Instagram Gallery” module.

Step 2: In the “SP Instagram Gallery” configuration page, click button in the right corner to “ADD NEW MODULE”.

Step 3: You could configure this module like the following image.

display CustomHTML38

SP Custom HTML – Banner center layout6
Frontend Appearance:

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.

Step 2: In the “SP Custom HTML” configuration page, click button in the right corner to “ADD NEW MODULE”.

Step 3: You could configure this module like the following image.

Copy and paste the following code into the content:

<div class="hotline_l6">
<div class="box box1">
<div class="images"><a href="#"><img src="../themes/sp_topshop/img/cms/box1.jpg" alt="" /></a></div>
<div class="content"><span class="icon">icon</span>
<h5>We support</h5>
<p>Online store 24/7</p>
</div>
</div>
<div class="box box2">
<div class="images"><a href="#"><img src="../themes/sp_topshop/img/cms/box2.jpg" alt="" /></a></div>
<div class="content"><span class="icon2">icon</span>
<h5>Free shipping</h5>
<p>Delivery world wide</p>
</div>
</div>
<div class="box box3">
<div class="images"><a href="#"><img src="../themes/sp_topshop/img/cms/box3.jpg" alt="" /></a></div>
<div class="content"><span class="icon3">icon</span>
<h5>Hotline</h5>
<p>(+084) 666 78901</p>
</div>
</div>
<div class="box box4 last">
<div class="images"><a href="#"><img src="../themes/sp_topshop/img/cms/box5.jpg" alt="" /></a></div>
<div class="content"><span class="icon4">icon</span>
<h5>Money back</h5>
<p>While not exactly line</p>
</div>
</div>
</div>

displayListingtab2

SP Listing Tabs
Frontend Appearance:

Backend Settings:

Step 3: You could configure this module like the following image.

display CustomHTML39

SP Custom HTML – Banner bottom layout6
Frontend Appearance:

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.

Step 2: In the “SP Custom HTML” configuration page, click button in the right corner to “ADD NEW MODULE”.

Step 3: You could configure this module like the following image.

Copy and paste the following code into the content:

<div class="img1 col-sm-3 col-md-3 col-lg-3"<<a href="#"<<img src="../themes/sp_topshop/img/cms/banner_l6_3.jpg" alt="" /<</a<</div<
<div class="img2 col-sm-3 col-md-3 col-lg-3"<<a href="#"<<img src="../themes/sp_topshop/img/cms/banner_l6_4.jpg" alt="" /<</a<</div<
<div class="img3 col-sm-6 col-md-6 col-lg-6"<<a href="#"<<img src="../themes/sp_topshop/img/cms/banner_l6_5.jpg" alt="" /<</a<</div<

displayExtraSlider4

SP Extra Slider – Hot Sale
Frontend Appearance:

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.

Step 2: In the “SP Extra Slider” configuration page, click button in the right corner to “ADD NEW MODULE”.

Step 3: You could configure this module like the following image.

displayExtraSlider5

SP Extra Slider – Recent
Frontend Appearance:

Backend Settings:

Step 3: You could configure this module like the following image.

displayDeal3

SP Deal – hot deals
Frontend Appearance:

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Deal” module.

Step 2: In the “SP Deal” configuration page, click button in the right corner to “ADD NEW MODULE”.

Step 3: You could configure this module like the following image.

displayHomeNews4

SP SmartBlog Home Lastest
Frontend Appearance:

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SmartBlog Home Lastest” module.

Step 2: You could configure this module like the following image.

displayManufacturer3

SP Manufacture Slider – Our Brands layout6
Frontend Appearance:

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Manufacture Slider” module.

Step 2: In the “SP Deal” configuration page, click button in the right corner to “ADD NEW MODULE”.

Step 3: You could configure this module like the following image.

display CustomHTML40

SP Custom HTML – Logo bottom l6
Frontend Appearance:

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.

Step 2: In the “SP Custom HTML” configuration page, click button in the right corner to “ADD NEW MODULE”.

Step 3: You could configure this module like the following image.

Copy and paste the following code into the content:

<p><a href="#"><img src="http://yourstore.com/themes/sp_topshop/img/logovalenci_footer.png" alt="" /></a></p>

Contact Information Block
Frontend Appearance:

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “Contact Information Block” module.

Step 2: You could configure this module like the following image.

display CustomHTML41

SP Custom HTML – MY ACCOUNT
Frontend Appearance:

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.

Step 2: In the “SP Custom HTML” configuration page, click button in the right corner to “ADD NEW MODULE”.

Step 3: You could configure this module like the following image.

Copy and paste the following code into the content:

<ul>
<li><a href="http://yourstore.com/en/my-account">My Account</a></li>
<li><a href="#">Order History</a></li>
<li><a href="http://yourstore.com/en/module/blockwishlist/mywishlist">Wish List</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">Specials</a></li>
</ul>

display CustomHTML42

SP Custom HTML – OUR SERVICES
Frontend Appearance:

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.

Step 2: In the “SP Custom HTML” configuration page, click button in the right corner to “ADD NEW MODULE”.

Step 3: You could configure this module like the following image.

Copy and paste the following code into the content:

<ul>
<li><a href="http://yourstore.com/en/contact-us">Contact Us</a></li>
<li><a href="#">Discount</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="http://yourstore.com/en/content/4-about-us">About Us</a></li>
<li><a href="#">Custom Service</a></li>
</ul>

display CustomHTML43

SP Custom HTML – SUPPORT
Frontend Appearance:

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.

Step 2: In the “SP Custom HTML” configuration page, click button in the right corner to “ADD NEW MODULE”.

Step 3: You could configure this module like the following image.

Copy and paste the following code into the content:

<ul>
<li><a href="http://yourstore.com/en/content/4-about-us">About us</a></li>
<li><a href="#">Deliveru information</a></li>
<li><a href="#">Privacy policy</a></li>
<li><a href="#">Terms & conditions</a></li>
</ul>

SP Theme Configuration

Frontend Appearance:

Backend Settings: Go Here to see the backend settings.

displayNewsletter

SP Newsletter Block
Frontend Appearance:

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Newsletter Block” module.

Step 2: You could configure its settings like the following image.

To edit the text in this module, please follow these steps:
In your Website’s Directory, go to themes\sp_topshop\modules\spblocknewsletter folder. To change the text in this module, in this folder, you could open the file named blocknewsletter3.tpl by your editor program.

You could find and change the text you want to edit, such as: Subscribe to receive inspiration, ideas and news in your inbox.

6SUPPORT

SUPPORT – If you have any questions that are beyond the scope of this help file, please feel free to send us via: Support Tickets System
FAQs – Go to Here to view more the Frequently Asked Questions.

↧

How to renew item support on Themeforest?

April 3, 2016, 7:37 am

≫ Next: SP Most Viewed

≪ Previous: SP Topshop

ThemeForest had some changes in their policy that if you’re about to purchase the item, you’ll have the option to purchase extended item support, increasing the item support period up to a maximum of 12 months from the date of purchase. And if you choose 6-month-support period, after that you will have to renew support to keep on receiving support.

Today we will show you a tutorial of how to renew item support on ThemeForest due to some requests from our customers.

Step 1: Login to Themeforest

Step 2: Click to Download, then click on Expired product.

Step 3: Click the button Renew Support on the left of the item page.

Well done! With just a few steps, you can renew your item support easily anytime.

↧

SP Most Viewed

April 5, 2016, 8:48 pm

≫ Next: SM Market Magento 2.0

≪ Previous: How to renew item support on Themeforest?

View demo More detail

This guide will help you install SP Most Viewed version 1.0.0 module step by step.

1 Installation – Back to top

Firstly, you must install Prestashop version 1.6.x. Please Click Here to read more about How To Install Prestashop version 1.6.x
Secondly, when you are ready to install SP Most Viewed, please follow 5 steps as following:

Step 1: Login to your Prestashop admin panel and go to Back Office >> Modules and Services >> Modules and Services . At the top of the page, click the Add a new module button.

Step 2: Click “Choose a file” button to select your module .zip file named as “sp_most_viewed_p1.6-res_v1.0.0.zip” that you have downloaded, then click “Upload this module” button.

Step 3: The new module will be located in the module list. Please search the name of module and click on the Install button to install the module.

Step 4: When seeing a notification message as following, please click “Proceed with the installation” button to finish the installation process:

Step 5: When the uploading process is done, you will see the message denoting that:“Module(s) installed successfully”. Please click “Edit” button to configure this module.

2 Configuration – Back to top

Step 1: you must enable “Data mining for statistics“. To enable this module, please search “Data mining for statistics” in the module list and click “Configure” button as the image below:

Step 2: And enable

Step 3: The module Configuration

To configure this module, please find the module that you have completely installed in the module list and start setting its options.

The parameters are divided into the following groups:

GENERAL OPTIONS
SOURCE OPTIONS
PRODUCT OPTIONS
EFFECT OPTIONS

Let’s look at the parameters in detail:

GENERAL OPTIONS

Title – Input title for the module.
Display Title Module – Enable/Disable title of module.
Module Class Suffix – A suffix is applied to the CSS class of module. This allows for individual module styling.
Status – Set status enable/disable for the module.
Hook into – Select Hook into in list box. Please click Here to read more How To Create Custom CMS Hook Page.
Item Rows – To display the item rows.
# Column – Set # column for each device
- For devices have screen width from 1200px to greater.
- For devices have screen width from 768px up to 1199px.
- For devices have screen width from 480px up to 767px.
- For devices have screen width less than or equal 479px.
Open Link – Target to open links:
- New window – Open the link in the new window tab.
- Same window – Open the link in the same window tab.
- Popup window – Open the link in new pop-up window.

SOURCE OPTIONS

Count – Allow to display the number of products.

PRODUCTS OPTIONS

Size image (W x H) – Select Size of image in list box.

Note: In Product Options part, The Size image (W x H) parameter is set “cart_default” . To view the size of image or edit size of image (after editing size of image >> press “Regenerate Thumbnails”), please go to PREFERENCES >> Images as the image below:

Display Name – Allow to show/hide name of product.
Name Maxlength – The maxlength of title can be showed. Choose “0″ for showing full title.
Display Description – Allow to show/hide description of product.
Description Maxlength – The Maxlength of description can be showed. Choose “0″ for showing full description.
Display Price – Allow to show/hide price of product.
Display Add to Cart Button – Allow to show/hide Add to Cart button of product.
Display Add to Wishlist Button – Allow to show/hide Wishlist button of product.
Display Add to Compare Button – Allow to show/hide Add to Compare button of product.
Display Detail Link – Allow to show/hide linke for details.
Display New – Allow to show/hide image new.
Display Sale – Allow to show/hide image sale.

Effect Options

Auto Play – Allow to enable/disable auto play for slider.
Auto Interval Time-out – Allow to set speed of timer. Large = Slower.
Auto Play Speed – Allow to set the auto play speed of slider.
Auto Play Hover Pause – Allow to on/off auto play for slider .
Start Position Item – Allow to set item that is displayed at first when you run slider..
Mouse Drag – Allow to on/off mouse drag on PC
Touch Drag – Allow to on/off touch drag on devices
Show Navigation – Allow to show/hide navigation for the module .
Loop – Allow to run a loop or not.

3SUPPORT – Back to top

Thank you so much for using this extension, your support is truly appreciated. If you have any questions that are beyond the scope of this document, please feel free to contact us via our Support Tickets System

↧

SM Market Magento 2.0

April 5, 2016, 9:33 pm

≫ Next: SM Topshop Magento 2.0

≪ Previous: SP Most Viewed

View demo More detail

Firstly, a huge thanks for purchasing this theme, your support is truly appreciated!

1 SYSTEM REQUIREMENT

At the basic level, this theme will require the following conditions:

Compatible with Magento Community Edition 2.0
Composer (latest stable version)
Apache 2.2 or late
PHP: 5.5.x,5.6.x and Memory_limit no less than 256Mb)

In the future if the conditions change, please check the Magento 2 documentation

2INSTALLATION

There are two ways to install a Magento Theme:

Quickstart Installation: Suitable if you have your first installation and want to get a whole new fresh site as our Demo.
Manual Installation (including Theme Installation): Suitable if your store is full with content that you don’t want to overwrite.

2.1 Quickstart Installation:

Magentech provides SM Quickstart package for each theme which aims to ease the installation for users. Please note that with Quickstart, all your existing data will be overwritten. Thus, if you plan to start your site from the beginning, it will help you save much time of installing and configuring.

Note: Follow Magento 2.0 Installation Guide to install the Composer before doing this Quickstart installation.

Please follow steps below:

Step 1: Download the quickstart package named as sm_market_quickstart_pl_m2.0.0_v1.0.0
Step 2: Extract and Upload the whole Quickstart package to your server. In Quickstart folder you will see the extracted folder that include all sample data
Step 3: Create a Database for your Magento site

Note: You need to remember the database name to use in the next steps

Step 4:Import database sample_data.sql under the folder sm_market_quickstart_pl_m2.0.0_v1.0.0\data_quickstart

Note:

After successful installation DO NOT run magento.

Now we are going to verify Composer installation, Deploy static content, Clear compiled code and the cache, Reindex the Magento 2 blocks. To perform all above actions, press WINDOWS KEY + R to open RUN dialog and type cmd to open Command Prompt.

Type cd PATH_TO_YOUR_MAGENTO2_FILES to enter in Magento 2 ROOT directory.

1. Now to verify Composer installation in above directory, type composer install.

If you get any error in this step, please check your Composer installation.

2. In this step, we are setting up static content to deploy on our Magento store. To perform this, type php bin/magento setup:static-content:deploy.

If you get any error, check your PHP.EXE and PHP.INI Environment Variable

3. Clear compiled code and the cache by typing php bin/magento setup:upgrade in CMD. Typically, you use magento this command line to update components and each component can require different compiled classes.

4. And finally, to Reindex Magento Static Blocks type php bin/magento indexer:reindex.

Step 5: Run installation process by opening browser and navigate to your URL (where the Quickstart uploaded) to load default Magento installer and follow each step of the Installer so that the installation process can be set.

Step 6: Choose Start Readiness Check. After Start Readiness Check is completed, select Next .

When you click on “Start Readiness Check”,the error could occur like the below image

You need to open your php.ini file and set always_populate_raw_post_data to -1.

Step 7: Enter server and database in step 2 and then click on Next.

Step 8: Put your website link and continue to click on Next.

Step 9: Customize your store: you can choose Time Zone, Currency and Languages.

Step 10: You need to Create Admin Account. Enter your information and move to the next step.

Step 11: In this step, you should click on the button: Install Now.

It will take some minutes to complete this installation process. If your window is the same as below, CONGRAT! You install this quickstart package successfully

After clicking on the button, the Admin Login screen will be opened and you can use admin credentials to login on this screen. It will open Admin panel after successful authentication.

2.2 Manual Installation

Step 1: Please unzip ‘sm_market_theme_m2.0.0_v1.0.0′ file and upload folders app; pub from the theme package to the root of your Magento site folder on your server.

Note: You could change the name of this folder. However, if you want your website run correctly, it need to have the same name as the database.
To verify Composer installation, Deploy static content, Clear compiled code and the cache, Reindex the Magento 2 blocks before configuring your site, please go Here to follow
Step 2: Log in to your Admin Panel (e.g. http://yourdomain.com/admin/)

Note: If you are using the Admin Panel when copying folders in step 1, you need to log out and log in back.
Step 3: Disable Cache: Go to >> Tools >> Cache Management, click ‘Sellect All’ button, then choose ‘Disable’ and click ‘Submit’ button to complete the action.

Step 4: Navigate to Stores>> Settings>> Configuration >> Design. In Design tab, select Design Theme field with the Sm Market.

Step 5: Click “Save Config” button to save your changes.

2.3 Theme Setting

In Magento admin panel, navigate to Stores>> Settings>> Configuration >> MAGENTECH.COM >> SM Market and configure its settings as you want.

Configure General Options with Color (of theme), Body Font, Elements Google Font, Menu for any store.
Configure Theme Layout with Layout style
Configure the Product Listing with Layout 1 Column, Layout 2 Columns, Layout 3 Columns
Configure the Product Detail To zoom image of product, adjust Zoom Mode, Custom tab, and content, etc.
Configure Socials : To connect with social networks such as Facebook, Twitter, Google Plus, Linkedin, Pinterest
Configure Advanced : To Show Go to Top, Add to Cart, Add to Wishlist, Add to Compare,
Configure Developer: To Custom Css or Javascript

3CONFIGURATION

3.1 Page Configuration

3.1.1 Home Style 1

Frontend of Home Style 1 – Layout Position

In the Admin Panel, please navigate to Content >> Elements >> Pages to create a new page in Pages section. Here is the list of steps in this style’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-style home-page-1">
<div class="row">
<div class="col-lg-9 col-lg-offset-3">{{block class="Magento\\Cms\\Block\\Block" block_id="top-search"}}
<div class="image-slider-home">{{block class="Sm\ImageSlider\Block\ImageSlider" template="Sm_ImageSlider::default.phtml"}}</div>
<div class="static-image-1">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-1"}}</div>
<div class="services-home">{{block class="Magento\\Cms\\Block\\Block" block_id="services-store"}}</div>
</div>
</div>
<div class="list-product-home">{{block class="Sm\ListingTabs\Block\ListingTabs" template="Sm_ListingTabs::sm/listingtabs/default.phtml"}}</div>
<div class="row">
<div class="static-image-2">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-2"}}</div>
</div>
<div class="list-product-home list-product-home-custom">{{block class="Magento\\Cms\\Block\\Block" block_id="listing-tab-2"}}</div>
<div class="home-collection">{{block class="Magento\\Cms\\Block\\Block" block_id="block-collection"}}</div>
<div class="full-wrapper full-categories">
<div class="container">
<div class="hot-categories-home">{{block class="Sm\Categories\Block\Categories" template="Sm_Categories::default.phtml"}}</div>
</div>
</div>
</div>

Design Tab: Please click to see the Backend Settings.

3.1.2 Home Style 2

Frontend of Home Style 2 – Layout Position

In the Admin Panel, please navigate to Content >> Elements >> Pages to create a new page in Pages section. Here is the list of steps in this style’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-style home-page-2">
<div class="row">
<div class="col-lg-9 col-lg-offset-3">
<div class="image-slider-home">{{block class="Sm\ImageSlider\Block\ImageSlider" template="Sm_ImageSlider::default.phtml"}}</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3 newsletter-home">{{block class="Magento\Newsletter\Block\Subscribe" template="subscribe-home.phtml"}}</div>
<div class="col-lg-9 col-md-9 static-image-block-1">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-3"}}</div>
</div>
<div class="row">
<div class="col-lg-9 col-md-9 left-main">
<div class="list-product-home">{{block class="Sm\ListingTabs\Block\ListingTabs" template="Sm_ListingTabs::sm/listingtabs/default.phtml"}}</div>
<div class="static-image-block-2">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-4"}}</div>
<div class="list-product-home list-product-home-custom">{{block class="Magento\\Cms\\Block\\Block" block_id="listing-tab-2"}}</div>
<div class="home-collection">{{block class="Magento\\Cms\\Block\\Block" block_id="block-collection"}}</div>
</div>
<div class="col-lg-3 col-md-3 right-main">{{block class="Magento\\Cms\\Block\\Block" block_id="product-sidebar-home"}} {{block class="Magento\\Cms\\Block\\Block" block_id="clients-say-slider"}} {{block class="Magento\\Cms\\Block\\Block" block_id="static-image-sidebar"}}</div>
</div>
<div class="full-wrapper full-categories">
<div class="container">
<div class="hot-categories-home">{{block class="Sm\Categories\Block\Categories" template="Sm_Categories::default.phtml"}}</div>
</div>
</div>
</div>

Design Tab: Please click to see the Backend Settings.

3.1.3 Home Style 3

Frontend of Home Style 3 – Layout Position

In the Admin Panel, please navigate to Content >> Elements >> Pages to create a new page in Pages section. Here is the list of steps in this style’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-style home-page-3">
<div class="row">
<div class="col-lg-9 col-md-9 image-slideshow">
<div class="image-slider-home">{{block class="Sm\ImageSlider\Block\ImageSlider" template="Sm_ImageSlider::default.phtml"}}</div>
</div>
<div class="col-lg-3 col-md-3 static-image-5">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-5"}}</div>
</div>
<div class="services-home">{{block class="Magento\\Cms\\Block\\Block" block_id="services-store-3"}}</div>
<div class="row">
<div class="col-lg-3 col-md-3 sidebar-home">{{block class="Magento\Framework\View\Element\Template" template="Magento_Theme::html/custom-nav.phtml"}} {{block class="Magento\\Cms\\Block\\Block" block_id="product-sidebar-home3"}} {{block class="Magento\\Cms\\Block\\Block" block_id="clients-say-slider"}} {{block class="Magento\\Cms\\Block\\Block" block_id="static-image-7"}}</div>
<div class="col-lg-9 col-md-9 main-home">
<div class="list-product-home">{{block class="Sm\ListingTabs\Block\ListingTabs" template="Sm_ListingTabs::sm/listingtabs/default.phtml"}}</div>
<div class="static-image-6">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-6"}}</div>
<div class="list-product-home list-product-home-custom">{{block class="Magento\\Cms\\Block\\Block" block_id="listing-tab-2"}}</div>
<div class="home-collection">{{block class="Magento\\Cms\\Block\\Block" block_id="block-collection"}}</div>
</div>
</div>
<div class="full-wrapper full-categories">
<div class="container">
<div class="hot-categories-home">{{block class="Sm\Categories\Block\Categories" template="Sm_Categories::default.phtml"}}</div>
</div>
</div>
</div>

Design Tab: Please click to see the Backend Settings.

3.1.4 Home Style 4

Frontend of Home Style 4 – Layout Position

In the Admin Panel, please navigate to Content >> Elements >> Pages to create a new page in Pages section. Here is the list of steps in this style’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-style home-page-4">
<div class="row">
<div class="col-lg-9 image-slideshow">
<div class="image-slider-home">{{block class="Sm\ImageSlider\Block\ImageSlider" template="Sm_ImageSlider::default.phtml"}}</div>
</div>
<div class="col-lg-3 slider-deal">{{block class="Sm\Deals\Block\Deals" template="Sm_Deals::default.phtml"}}</div>
</div>
<div class="services-home">{{block class="Magento\\Cms\\Block\\Block" block_id="services-store-3"}}</div>
<div class="list-product-home">{{block class="Sm\ListingTabs\Block\ListingTabs" template="Sm_ListingTabs::sm/listingtabs/default.phtml"}}</div>
<div class="row">
<div class="static-image-2">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-2"}}</div>
</div>
<div class="list-product-home list-product-home-custom">{{block class="Magento\\Cms\\Block\\Block" block_id="listing-tab-2"}}</div>
<div class="home-collection">{{block class="Magento\\Cms\\Block\\Block" block_id="block-collection"}}</div>
<div class="full-wrapper full-categories">
<div class="container">
<div class="hot-categories-home">{{block class="Sm\Categories\Block\Categories" template="Sm_Categories::default.phtml"}}</div>
</div>
</div>
</div>

Design Tab: Please click to see the Backend Settings.

Note: Set Default Page

To set a default page for your Magento Site, in the Admin Panel you go to Stores>> Settings >>Configuration>>Web>>Default Pages. Please click to see the Backend Settings.

You need to change to the website / store view that you want to change (the dropdown menu in the upper left corner). You will probably have to create a new CMS page if you want to have something different from your default home page.

3.2 Configure Megamenu

Step 1: Create a New Menu In Admin Panel, navigate to SM Megamenu >> Add New Menu (add group: “Mega Menu Horizontal“, “Mega Menu Vertical“.
Step 2: Navigate to SM Megamenu >> Configuration & fill the ID number for the created menu in step 1
Step 3: In order to add menu items, go to SM Megamenu >> Menu Manager >> click on ‘Edit’to open Menu Items to add items as you want

3.2.1 Horizontal Megamenu:

Horizontal-mega-menu

Sortable Categories Items Please click Here to view.

Home
Frontend Appearance

Backend Settings: Please click Here to view.

New Arrivals
Frontend Appearance

Backend Settings: Please click Here to view.

Note: Do the same with the others.

3.2.2 Vertical Megamenu:

Horizontal-mega-menu

Sortable Categories Items Please click Here to view.

Electronics
Frontend Appearance

Backend Settings: Please click Here to view.

Smartphones & Tablets
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Group Categories Smartphone’: Please click Here to view.

Backend of ‘Col-1′ in ‘Group Categories Smartphone’: Please click Here to view.

Note: Item Col-2 having same level would have same configuration as Col-1.

Backend of ‘Camping & Hiking Gear’ in ‘Col-1′: Please click Here to view.

Note: Item Swim Gear, Cycling Gear having same level would have same configuration as Camping & Hiking Gear.

Backend of ‘Poduct Megamenu’: Please click Here to view.

Health & Beauty
Frontend Appearance

Backend Settings: Please click Here to view.

Note: The following items, having same level, would have same configuration as Health & Beauty: Toys & Hobbies, Computers & Networking, Laptops & Accessories, Jewelry & Watches, Bags, Shoes & Accessories, Cameras & Photo, Holiday Supplies & Gifts, Apparel, Video Games. .

Sports & Outdoors
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Categories Sports & Outdoors’: Please click Here to view.

Backend of ‘Cycling Gear’ in ‘Categories Sports & Outdoors’: Please click Here to view.

Note: The following items, having same level, would have same configuration as Cycling Gear: . Camping & Hiking Gear, Swim Gear.

Backend of ‘Right Static Image’: Please click Here to view.

Copy and paste the following code into the Content field::

<div class="right-image-menu">
	<a title="Static Image" href="#">
	<img src="{{media url="wysiwyg/mega-menu/mega-banner.png"}}" alt="Static Image" />
	</a>
</div>

Automotive & Motorcycle
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Motorcycle’: Please click Here to view.

Note: The following items, having same level, would have same configuration as Motorcycle: . Car Accessories, Motorcycle Gadgets, Car Lights.

3.3 Configure Extensions

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

In SM Market Administration Page, please navigate to Stores>> Settings>> Configuration >> MAGENTECH.COM to configure extensions as you want.

Position: SM Megamenu
Frontend Appearance

Horizontal Megamenu:
Vertical Megamenu:

Backend of SM Megamenu: Click Here

3.3.2 SM Image Slider

Position: SM Image Slider
Frontend Appearance

Backend of SM Image Slider: Click Here

3.3.3 SM Listing Tabs

Position: SM Listing Tabs
Frontend Appearance

Backend of SM Listing Tabs: Click Here

3.3.4 SM Categories

Position: SM Categories
Frontend Appearance

Backend of SM Categories: Click Here

3.3.5 SM Basic Products

Position: SM Basic Products
Frontend Appearance

Backend of SM Basic Products: Click Here

3.3.5 SM Deals

Position: SM Deals
Frontend Appearance

Backend of SM Deals: Click Here

3.4 Configure Static Blocks

The SM Market front-page has the following static blocks in the theme:

To create a new static block, go to Content>> Elements>> Blocks >> Add new block.

Static Block: top-search

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “top-search”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="top-search">
<ul>
<li class="search-label">Top Search:</li>
<li><a title="Tattoo Kits" href="#">Tattoo Kits</a></li>
<li><a title="Electronic Cigarettes" href="#">Electronic Cigarettes</a></li>
<li><a title="Sexy Lingerie" href="#">Sexy Lingerie</a></li>
<li><a title="Eye Makeup" href="#">Eye Makeup</a></li>
<li><a title="iPad Mini Cases" href="#">iPad Mini Cases</a></li>
<li><a title="iPhone 5 Cases" href="#">iPhone 5 Cases</a></li>
<li><a title="Tattoo Supplies" href="#">Tattoo Supplies</a></li>
<li><a title="RC Helicopters" href="#">RC Helicopters</a></li>
</ul>
</div>

Static Block: static-image-1

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-image-1″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<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>

Static Block: services-store

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “services-store”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="banner-policy">
<div class="inner">
<div class="policy policy1"><a title="90 days money back" href="#"><span class="ico-policy">ico policy</span>90 days<br />money back</a></div>
<div class="policy policy2"><a title="free shipping on all orders" href="#"><span class="ico-policy">ico policy</span>free shipping<br />on all orders</a></div>
<div class="policy policy3"><a title="lowest price guarantee" href="#"><span class="ico-policy">ico policy</span>lowest price guarantee</a></div>
<div class="policy policy4"><a title="safe shopping guarantee" href="#"><span class="ico-policy">ico policy</span>safe shopping guarantee</a></div>
</div>
</div>

Static Block: static-image-2

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-image-2″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<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>

Static Block: block-collection

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “block-collection”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="collections-wrap">
<div class="title-home-page"><span>Collections</span></div>
<ul class="collections">
<li class="collect collect1"><a href="#">Furniture</a></li>
<li class="collect collect2"><a href="#">Gift idea</a></li>
<li class="collect collect3"><a href="#">Cool gadgets</a></li>
<li class="collect collect4"><a href="#">Ourdoor<br /><span>activities</span></a></li>
<li class="collect collect5"><a href="#">Accessories for<br /><span>smartphone</span></a></li>
<li class="collect collect6"><a href="#">Women world</a></li>
</ul>
</div>

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “about-footer”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<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>

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “customer-services-footer”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<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>

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “payment-shipping-footer”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<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>

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “contact-footer”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<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 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>

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “footer-links”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<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>

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “payment-footer”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<p><img src="{{media url="wysiwyg/payment/payment.png"}}" alt="Payment" /></p>

Static Block: static-image-3

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-image-3″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="static-image">
<div class="col-1-image"><a class="image-1" title="Static Image" href="#"> <img src="{{media url="wysiwyg/banner/banner2-1.jpg"}}" alt="Static Image" /> </a> <a class="image-2" title="Static Image" href="#"> <img src="{{media url="wysiwyg/banner/banner2-2.jpg"}}" alt="Static Image" /> </a> <a class="image-3" title="Static Image" href="#"> <img src="{{media url="wysiwyg/banner/banner2-3.jpg"}}" alt="Static Image" /> </a></div>
<div class="col-2-image"><a title="Static Image" href="#"> <img src="{{media url="wysiwyg/banner/banner2-4.jpg"}}" alt="Static Image" /> </a></div>
</div>

Static Block: static-image-4

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-image-4″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="static-image"><a title="Static Image" href="#"> <img src="{{media url="wysiwyg/banner/banner2-5.jpg"}}" alt="Static Image" /> </a></div>

Static Block: clients-say-slider

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “clients-say-slider”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="block clients-say">
<div class="block-title filter-title"><strong>Clients say</strong></div>
<div class="block-content block-content-clients-say">
<div class="clients-say-slider">
<div class="item">
<div class="client-description">Aliquam ut tellus dignissim, cursus erat ultricies tellus. Nulla tempus sollicitudin mauris cursus dictum. Etiam id diam diam.</div>
<div class="client-info"><img src="{{media url="wysiwyg/clientsay/client-img1.jpg"}}" alt="Static Image" />
<div class="info-detail">
<h3>Aliquam Tellus</h3>
<p>Vitae Ornare Mauris</p>
</div>
</div>
</div>
<div class="item">
<div class="client-description">Aliquam ut tellus dignissim, cursus erat ultricies tellus. Nulla tempus sollicitudin mauris cursus dictum. Etiam id diam diam.</div>
<div class="client-info"><img src="{{media url="wysiwyg/clientsay/client-img2.jpg"}}" alt="Static Image" />
<div class="info-detail">
<h3>Aliquam Tellus</h3>
<p>Vitae Ornare Mauris</p>
</div>
</div>
</div>
<div class="item">
<div class="client-description">Aliquam ut tellus dignissim, cursus erat ultricies tellus. Nulla tempus sollicitudin mauris cursus dictum. Etiam id diam diam.</div>
<div class="client-info"><img src="{{media url="wysiwyg/clientsay/client-img1.jpg"}}" alt="Static Image" />
<div class="info-detail">
<h3>Aliquam Tellus</h3>
<p>Vitae Ornare Mauris</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">// <![CDATA[
				jQuery(document).ready(function($) {
					var owl_clientsay = $(".clients-say-slider");
					owl_clientsay.owlCarousel({
						
						responsive:{
							0:{
								items:1
							},
							480:{
								items:1
							},
							768:{
								items:1
							},
							992:{
								items:1
							},
							1200:{
								items:1
							}
						},

						autoplay:false,
						loop:true,
						nav : true,
						dots: false,
						autoplaySpeed : 500,
						navSpeed : 500,
						dotsSpeed : 500,
						autoplayHoverPause: true,
						margin:20,

					});	  
				});
// ]]></script>
</div>
</div>

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-image-sidebar”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="static-image-sidebar static-image"><a title="Static Image" href="#"> <img src="{{media url="wysiwyg/banner/banner2-6.jpg"}}" alt="Static Image" /> </a></div>

Static Block: static-image-5

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-image-5″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="static-image"><a title="Static Image" href="#"><img src="{{media url="wysiwyg/banner/banner3-1.jpg"}}" alt="Static Image" /></a></div>

Static Block: services-store-3

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “services-store-3″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="banner-policy">
<div class="inner">
<div class="policy policy1"><a title="90 days money back" href="#"> <span class="ico-policy">ico policy</span> <span class="info-service"> <span class="title-sv">30 DAY RETURN</span> <span>moneyback guarantee</span> </span> </a></div>
<div class="policy policy2"><a title="free shipping on all orders" href="#"> <span class="ico-policy">ico policy</span> <span class="info-service"> <span class="title-sv">FREE SHIPPING</span> <span>on all order over $99</span> </span> </a></div>
<div class="policy policy3"><a title="lowest price guarantee" href="#"> <span class="ico-policy">ico policy</span> <span class="info-service"> <span class="title-sv">LOWEST PRICE</span> <span>guarantee</span> </span> </a></div>
<div class="policy policy4"><a title="safe shopping guarantee" href="#"> <span class="ico-policy">ico policy</span> <span class="info-service"> <span class="title-sv">SAFE SHOPPING</span> <span>guarantee</span> </span> </a></div>
</div>
</div>

Static Block: static-image-6

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-image-6″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="static-image-content">
<div class="static-image"><a title="Static Image" href="#"><img src="{{media url="wysiwyg/banner/banner3-2.jpg"}}" alt="Static Image" /></a></div>
<div class="static-image"><a class="first-image" title="Static Image" href="#"><img src="{{media url="wysiwyg/banner/banner3-3.jpg"}}" alt="Static Image" /></a> <a title="Static Image" href="#"><img src="{{media url="wysiwyg/banner/banner3-4.jpg"}}" alt="Static Image" /></a></div>
<div class="static-image"><a title="Static Image" href="#"><img src="{{media url="wysiwyg/banner/banner3-5.jpg"}}" alt="Static Image" /></a></div>
</div>

Static Block: static-image-7

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-image-7″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="static-image-7">
<div class="static-image"><a title="Static Image" href="#"><img src="{{media url="wysiwyg/banner/banner3-6.jpg"}}" alt="Static Image" /></a></div>
</div>

3.5 How To Edit Copyright in Admin Panel

Frontend Appearance

In SM Market Administration Page, please navigate to Stores>> Settings>> Configuration >> MAGENTECH.COM >> SM Market >> Advanced to configure this theme’s copyright.

Edit the code here:

SM Market © 2016
Demo Store. All Rights Reserved. Designed by
<a title="MagenTech.Com" target="_blank" href="http://www.MagenTech.Com">MagenTech.Com</a>

3.6 How To Customize the Social symbols in admin panel

Frontend Appearance

In SM Market Administration Page, please navigate to Stores>> Settings >> Configuration >> MAGENTECH.COM >> SM Market >> Socials.

4SUPPORT

SUPPORT – If you have any questions that are beyond the scope of this help file, please feel free to send us via: Support Tickets System
FAQs – Go to Here to view more the Frequently Asked Questions.

↧

SM Topshop Magento 2.0

April 7, 2016, 8:28 pm

≫ Next: SP Twitter Slider Ver1.0.1

≪ Previous: SM Market Magento 2.0

View demo More detail

Firstly, a huge thanks for purchasing this theme, your support is truly appreciated!

1 SYSTEM REQUIREMENT

At the basic level, this theme will require the following conditions:

Compatible with Magento Community Edition 2.0
Composer (latest stable version)
Apache 2.2 or late
PHP: 5.5.x,5.6.x and Memory_limit no less than 256Mb)

In the future if the conditions change, please check the Magento 2 documentation

2INSTALLATION

There are two ways to install a Magento Theme:

Quickstart Installation: Suitable if you have your first installation and want to get a whole new fresh site as our Demo.
Manual Installation (including Theme Installation): Suitable if your store is full with content that you don’t want to overwrite.

2.1 Quickstart Installation:

Note: Follow Magento 2.0 Installation Guide to install the Composer before doing this Quickstart installation.

Please follow steps below:

Step 1: Download the quickstart package named as sm_topshop_quickstart_pl_m2.0.0_v1.0.0
Step 2: Extract and Upload the whole Quickstart package to your server. In Quickstart folder you will see the extracted folder that include all sample data
Step 3: Create a Database for your Magento site

Note: You need to remember the database name to use in the next steps

Step 4:Import database sample_data.sql under the folder sm_topshop_quickstart_pl_m2.0.0_v1.0.0\data_quickstart

Note:

After successful installation DO NOT run magento.

Now we are going to verify Composer installation, Deploy static content, Clear compiled code and the cache, Reindex the Magento 2 blocks. To perform all above actions, press WINDOWS KEY + R to open RUN dialog and type cmd to open Command Prompt.

Type cd PATH_TO_YOUR_MAGENTO2_FILES to enter in Magento 2 ROOT directory.

1. Now to verify Composer installation in above directory, type composer install.

If you get any error in this step, please check your Composer installation.

2. In this step, we are setting up static content to deploy on our Magento store. To perform this, type php bin/magento setup:static-content:deploy.

If you get any error, check your PHP.EXE and PHP.INI Environment Variable

3. Clear compiled code and the cache by typing php bin/magento setup:upgrade in CMD. Typically, you use magento this command line to update components and each component can require different compiled classes.

4. And finally, to Reindex Magento Static Blocks type php bin/magento indexer:reindex.

Step 5: Run installation process by opening browser and navigate to your URL (where the Quickstart uploaded) to load default Magento installer and follow each step of the Installer so that the installation process can be set.

Step 6: Choose Start Readiness Check. After Start Readiness Check is completed, select Next .

When you click on “Start Readiness Check”,the error could occur like the below image

You need to open your php.ini file and set always_populate_raw_post_data to -1.

Step 7: Enter server and database in step 2 and then click on Next.

Step 8: Put your website link and continue to click on Next.

Step 9: Customize your store: you can choose Time Zone, Currency and Languages.

Step 10: You need to Create Admin Account. Enter your information and move to the next step.

Step 11: In this step, you should click on the button: Install Now.

2.2 Manual Installation

Step 1: Please unzip ‘sm_topshop_theme_m2.0.0_v1.0.0′ file and upload folders app; pub from the theme package to the root of your Magento site folder on your server.

Note: You could change the name of this folder. However, if you want your website run correctly, it need to have the same name as the database.
To verify Composer installation, Deploy static content, Clear compiled code and the cache, Reindex the Magento 2 blocks before configuring your site, please go Here to follow
Step 2: Log in to your Admin Panel (e.g. http://yourdomain.com/admin/)

Note: If you are using the Admin Panel when copying folders in step 1, you need to log out and log in back.
Step 3: Disable Cache: Go to >> Tools >> Cache Management, click ‘Sellect All’ button, then choose ‘Disable’ and click ‘Submit’ button to complete the action.

Step 4: Navigate to Stores>> Settings>> Configuration >> Design. In Design tab, select Design Theme field with the Sm topshop.

Step 5: Click “Save Config” button to save your changes.

2.3 Theme Setting

In Magento admin panel, navigate to Stores>> Settings>> Configuration >> MAGENTECH.COM >> SM topshop and configure its settings as you want.

Configure General Options with Color (of theme), Body Font, Elements Google Font, Menu for any store.
Configure Theme Layout with Layout style
Configure the Product Listing with Layout 1 Column, Layout 2 Columns, Layout 3 Columns
Configure the Product Detail To zoom image of product, adjust Zoom Mode, Custom tab, and content, etc.
Configure Socials : To connect with social networks such as Facebook, Twitter, Google Plus, Linkedin, Pinterest
Configure Advanced : To Show Go to Top, Add to Cart, Add to Wishlist, Add to Compare,
Configure Developer: To Custom Css or Javascript

3CONFIGURATION

3.1 Page Configuration

Set Default Page

To set a default page for your Magento Site, in the Admin Panel you go to Stores>> Settings >>Configuration>>Web>>Default Pages. Please click to see the Backend Settings.
You need to change to the website / store view that you want to change (the dropdown menu in the upper left corner). You will probably have to create a new CMS page if you want to have something different from your default home page.

Home Style 1

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="homepage-wrapper home-style-1">
<div class="full-wrapper banner-top">
<div class="container">
<div class="boxed-container">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-1"}}</div>
<div class="boxed-container listingtab-wrap">{{block class="Sm\ListingTabs\Block\ListingTabs" name="listingtabs.default" as="listingtabs_default" template="Sm_ListingTabs::sm/listingtabs/default.phtml"}}</div>
<div class="boxed-container">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-2"}}</div>
<div class="boxed-container fashion-cat">{{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::sm/supercategories/default.phtml" product_category="73" pretext="static_c_fashion" posttext="banner_s_p_fashion" }}</div>
<div class="boxed-container">{{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories_fur" template="Sm_SuperCategories::sm/supercategories/default.phtml" product_category="74" pretext="static_c_furniture" posttext="banner_s_p_furniture" }}</div>
<div class="boxed-container">{{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories_com" template="Sm_SuperCategories::sm/supercategories/default.phtml" product_category="75" pretext="static_c_computer" posttext="banner_s_p_computer" }}</div>
<div class="boxed-container healthy-cate">{{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories_hea" template="Sm_SuperCategories::sm/supercategories/default.phtml" product_category="76" pretext="static_c_healthy" posttext="banner_s_p_healthy" }}</div>
<div class="boxed-container">{{block class="Magento\\Cms\\Block\\Block" block_id="blog-block"}}</div>
<div class="boxed-container brand-wrap">{{block class="Magento\\Cms\\Block\\Block" block_id="brand-block"}}</div>
</div>
</div>
</div>

Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the Layout Update XML field:

<referenceContainer name="columns.top_container">
	<block class="Sm\ImageSlider\Block\ImageSlider" name="imageslider" before="-" template="Sm_ImageSlider::default.phtml"/>

			<block class="Sm\Deals\Block\Deals" name="deals" template="Sm_Deals::default.phtml"/>
</referenceContainer>

Meta Data: Please click to see the Backend Settings.

Home Style 2

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="homepage-wrapper home-style-2">
<div class="full-wrapper banner-top">
<div class="container">
<div class="boxed-container top-full">
<div class="row">
<div class="col-lg-3 vertical-menu-box">{{block class="Magento\\Cms\\Block\\Block" block_id="vertical-menu-config"}}</div>
<div class="col-lg-9 slideshow-box">{{block class="Sm\ImageSlider\Block\ImageSlider" name="imageslider" template="Sm_ImageSlider::default.phtml"}}</div>
</div>
</div>
<div class="boxed-container">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-1-index2"}}</div>
<div class="boxed-container">{{block class="Magento\\Cms\\Block\\Block" block_id="brand-block"}}</div>
<div class="boxed-container">{{block class="Sm\ListingTabs\Block\ListingTabs" name="listingtabs.default" as="listingtabs_default" template="Sm_ListingTabs::sm/listingtabs/default.phtml"}}</div>
<div class="boxed-container">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-2"}}</div>
<div class="boxed-container">{{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::sm/supercategories/default.phtml" product_category="73" pretext="static_c_fashion" posttext="banner_s_p_fashion" }}</div>
<div class="boxed-container">{{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories_fur" template="Sm_SuperCategories::sm/supercategories/default.phtml" product_category="74" pretext="static_c_furniture" posttext="banner_s_p_furniture" }}</div>
<div class="boxed-container">{{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories_com" template="Sm_SuperCategories::sm/supercategories/default.phtml" product_category="75" pretext="static_c_computer" posttext="banner_s_p_computer" }}</div>
<div class="boxed-container healthy-cate">{{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories_hea" template="Sm_SuperCategories::sm/supercategories/default.phtml" product_category="76" pretext="static_c_healthy" posttext="banner_s_p_healthy" }}</div>
<div class="boxed-container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 newsletter-box">{{block class="Magento\Newsletter\Block\Subscribe" template="subscribe-index2.phtml"}}</div>
<div class="col-lg-8 col-md-8 col-sm-8 latest-post-wrapper">
<div class="slider-latest-blog">{{block class="Magento\\Cms\\Block\\Block" block_id="blog-block-index2"}}</div>
</div>
</div>
</div>
</div>
</div>
</div>

Design Tab: Please click to see the Backend Settings.

Meta Data: Please click to see the Backend Settings.

Home Style 3

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="homepage-wrapper home-style-3">
<div class="full-wrapper banner-top">
<div class="container">
<div class="boxed-container top-full">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 vertical-menu-virtual"> </div>
<div class="col-lg-6 col-md-6 col-sm-12 slideshow-box">{{block class="Sm\ImageSlider\Block\ImageSlider" name="imageslider" before="-" template="Sm_ImageSlider::default.phtml"}}</div>
<div class="col-lg-3 col-md-3 col-sm-12 banner-box">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-1-index3"}}</div>
</div>
</div>
<div class="boxed-container banner-2">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-1-index2"}}</div>
<div class="boxed-container hotdeal-custom-wrapper">
<div class="row featured-deal-wrap">
<div class="col-lg-9 col-md-9 col-sm-8 col-xs-12 slider-basic-wrapper">{{block class="Sm\BasicProducts\Block\BasicProducts" template="Sm_BasicProducts::sm/basicproducts/slider-index3.phtml" title="Featured Products" product_order_by="price" product_category="11" product_limitation="6" nb_column1="3" nb_column2="3" nb_column3="2" nb_column4="2" nb_column5="1" }}</div>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 deal-wrapper slidebar">{{block class="Sm\Deals\Block\Deals" name="deals" template="Sm_Deals::default-index3.phtml" title="Hot deals" posttext="" nb_column4="2" margin="30"}}</div>
</div>
</div>
<div class="boxed-container">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-8 left9-wrapper">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-2-index3"}}
<div class="supercategories-wrap">{{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::sm/supercategories/default.phtml" product_category="73" pretext="static_c_fashion" posttext="banner_s_p_fashion" nbi_rows="4" }}</div>
<div class="supercategories-wrap furniture-cate">{{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::sm/supercategories/default.phtml" product_category="74" pretext="static_c_furniture" posttext="banner_s_p_furniture" nbi_rows="4" }}</div>
<div class="supercategories-wrap computer-cate">{{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::sm/supercategories/default.phtml" product_category="75" pretext="static_c_computer" posttext="banner_s_p_computer" nbi_rows="4" }}</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-4 slidebar">
<div class="slider-basic-wrapper">{{block class="Sm\BasicProducts\Block\BasicProducts" template="Sm_BasicProducts::sm/basicproducts/slider-index3.phtml" title="Best sellers" product_order_by="best_sales" product_category="11" product_limitation="6" nb_column1="1" nb_column2="1" nb_column3="1" nb_column4="2" nb_column5="1" }}</div>
{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-3-index3"}}
<div class="slider-basic-wrapper">{{block class="Sm\BasicProducts\Block\BasicProducts" template="Sm_BasicProducts::sm/basicproducts/slider-index3.phtml" title="New Products" product_order_by="created_at" product_category="11" product_limitation="6" nb_column1="1" nb_column2="1" nb_column3="1" nb_column4="2" nb_column5="1" }}</div>
{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-4-index3"}}
<div class="latest-post-wrapper">
<div class="slider-latest-blog">{{block class="Magento\\Cms\\Block\\Block" block_id="blog-block-index3"}}</div>
</div>
</div>
</div>
</div>
<div class="boxed-container">{{block class="Magento\\Cms\\Block\\Block" block_id="brand-block"}}</div>
</div>
</div>
</div>

Design Tab: Please click to see the Backend Settings.

Meta Data: Please click to see the Backend Settings.

Home Style 4

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="homepage-wrapper home-style-4">
<div class="full-wrapper banner-top">
<div class="container">
<div class="boxed-container">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-1-index4"}}</div>
<div class="boxed-container hotdeal-custom-wrapper">{{block class="Sm\CountdownProductSlider\Block\CountdownProductSlider" name="countdownproductslider.default" as="countdownproductslider_default" template="Sm_CountdownProductSlider::sm/countdownproductslider/default.phtml" }}</div>
<div class="boxed-container banner-2">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-2"}}</div>
<div class="boxed-container supercategories-wrap women-cate">{{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::sm/supercategories/default.phtml" product_category="80" nbi_rows="4" pretext="banner-c-women" posttext="" }}</div>
<div class="boxed-container supercategories-wrap men-cate supercate-right">{{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::sm/supercategories/default.phtml" product_category="81" nbi_rows="4" pretext="banner-c-men" posttext="" }}</div>
<div class="boxed-container supercategories-wrap shoe-cate">{{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::sm/supercategories/default.phtml" product_category="98" nbi_rows="4" pretext="banner-c-shoe" posttext="" }}</div>
<div class="boxed-container">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-2-index4"}}</div>
<div class="boxed-container">{{block class="Magento\\Cms\\Block\\Block" block_id="blog-block"}}</div>
<div class="boxed-container">{{block class="Magento\\Cms\\Block\\Block" block_id="brand-block"}}</div>
</div>
</div>
</div>

Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the Layout Update XML field:

<referenceContainer name="main.content">
	<block class="Sm\ImageSlider\Block\ImageSlider" name="imageslider" before="-" template="Sm_ImageSlider::default.phtml"/>
</referenceContainer>

Meta Data: Please click to see the Backend Settings.

Home Style 5

Frontend of Home Style 5 – Layout Position

In the Admin Panel, please navigate to Content >> Elements >> Pages to create a new page in Pages section. Here is the list of steps in this style’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="homepage-wrapper home-style-5">
<div class="full-wrapper banner-top">
<div class="container">
<div class="boxed-container top-full">
<div class="row">
<div class="col-lg-3 col-md-3 hidden-sm vertical-menu-virtual">{{block class="Magento\\Cms\\Block\\Block" block_id="vertical-menu-config"}}</div>
<div class="col-lg-7 col-md-7 col-sm-12 slideshow-box">{{block class="Sm\ImageSlider\Block\ImageSlider" name="imageslider" before="-" template="Sm_ImageSlider::default.phtml"}}</div>
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs banner-box">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-1-index5"}}</div>
</div>
</div>
<div class="boxed-container">{{block class="Magento\\Cms\\Block\\Block" block_id="static-service-1-index5"}}</div>
<div class="boxed-container deal-featured">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6 slidebar deal-wrapper">{{block class="Sm\Deals\Block\Deals" name="deals" template="Sm_Deals::default-index3.phtml" title="Hot deals" posttext="" nb_column5="1" }}</div>
<div class="col-lg-9 col-md-9 col-sm-8 col-xs-6  slider-basic-wrapper">{{block class="Sm\BasicProducts\Block\BasicProducts" template="Sm_BasicProducts::sm/basicproducts/slider-index3.phtml" title="Featured Products" product_order_by="price" product_category="11" product_limitation="6" nb_column1="3" nb_column2="3" nb_column3="2" nb_column4="1" nb_column5="1" }}</div>
</div>
</div>
<div class="boxed-container new-banner">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 slidebar">
<div class="slider-basic-wrapper">{{block class="Sm\BasicProducts\Block\BasicProducts" template="Sm_BasicProducts::sm/basicproducts/slider-index5.phtml" title="New Products" product_order_by="created_at" product_category="11" product_limitation="6" nb_column1="1" nb_column2="1" nb_column3="1" nb_column4="2" nb_column5="1" }}</div>
</div>
<div class="col-lg-9 col-md-9 col-sm-8 col-xs-12 banner-custom-wrapper">
<div class="banner-wrapper">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-2-index5"}}</div>
</div>
</div>
</div>
<div class="boxed-container supercategories-wrap women-cate">{{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::sm/supercategories/default.phtml" product_category="80" nbi_rows="5" pretext="" posttext="" }}</div>
<div class="boxed-container supercategories-wrap men-cate">{{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::sm/supercategories/default.phtml" product_category="81" nbi_rows="5" pretext="" posttext="" }}</div>
<div class="boxed-container">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-2-index4"}}</div>
<div class="boxed-container supercategories-wrap shoe-cate">{{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::sm/supercategories/default.phtml" product_category="98" nbi_rows="5" pretext="" posttext="" }}</div>
<div class="boxed-container latest-post-wrapper">
<div class="slider-latest-blog">{{block class="Magento\\Cms\\Block\\Block" block_id="blog-block"}}</div>
</div>
<div class="boxed-container brand-wraper">{{block class="Magento\\Cms\\Block\\Block" block_id="brand-block"}}</div>
</div>
</div>
</div>

Design Tab: Please click to see the Backend Settings.

Meta Data: Please click to see the Backend Settings.

3.2 Configure Megamenu

Step 1: Create a New Menu In Admin Panel, navigate to SM Megamenu >> Add New Menu (add group: “Mega Menu Horizon.
Step 2: Navigate to SM Megamenu >> Configuration & fill the ID number for the created menu in step 1
Step 3: In order to add menu items, go to SM Megamenu >> Menu Manager >> click on ‘Edit’to open Menu Items to add items as you want

3.2.1 Horizontal Megamenu:

Horizontal-mega-menu

Sortable Categories Items Please click Here to view.

Features
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Dropdown Features’: Please click Here to view.

Copy and paste the following code into the content editor:

<div class="home-menu-dropdown">
	<ul class="item-home-store layout-home">
		<li class="title-menu-home">Layouts</li>
		<li><a title="Home Style 1" href="{{store url="?___store=default&___from_store=french"}}">Home Style 1</a></li>
		<li><a title="Home Style 2" href="{{store url="?___store=french&___from_store=default"}}">Home Style 2</a></li>
		<li><a title="Home Style 3" href="{{store url="?___store=german&___from_store=default"}}">Home Style 3</a></li>
		<li><a title="Home Style 4" href="{{store url="?___store=argentina&___from_store=default"}}">Home Style 4</a></li>
		<li><a title="Home Style 5" href="{{store url="?___store=bolivia&___from_store=default"}}">Home Style 5</a></li>
		<li><a title="Boxed Layout" href="{{store url="?___store=somaliland&___from_store=default"}}">Boxed Layout</a></li>
	</ul>

	<ul class="item-home-store header-home">
		<li class="title-menu-home">Headers</li>
		<li><a title="Header Type 1" href="{{store url="?___store=default&___from_store=french"}}">Header Type 1</a></li>
		<li><a title="Header Type 2" href="{{store url="?___store=french&___from_store=default"}}">Header Type 2</a></li>
		<li><a title="Header Type 3" href="{{store url="?___store=german&___from_store=default"}}">Header Type 3</a></li>
		<li><a title="Header Type 4" href="{{store url="?___store=argentina&___from_store=default"}}">Header Type 4</a></li>
		<li><a title="Header Type 5" href="{{store url="?___store=bolivia&___from_store=default"}}">Header Type 5</a></li>
	</ul>
	
	<ul class="item-home-store theme-color">
		<li class="title-menu-home">Color Styles</li>
		<li class="blue"><a title="Blue" href="{{store url="?___store=belgium&___from_store=default"}}">Blue</a></li>
		<li class="brown"><a title="Brown" href="{{store url="?___store=australia&___from_store=default"}}">Brown</a></li>
		<li class="cyan"><a title="Cyan" href="{{store url="?___store=japan&___from_store=default"}}">Cyan</a></li>
		<li class="green"><a title="Green" href="{{store url="?___store=andorra&___from_store=default"}}">Green</a></li>
		<li class="orange"><a title="Orange" href="{{store url="?___store=vietnam&___from_store=default"}}">Orange</a></li>
		<li class="pink"><a title="Pink" href="{{store url="?___store=benin&___from_store=default"}}">Pink</a></li>
		<li class="teal"><a title="Teal" href="{{store url="?___store=barbados&___from_store=default"}}">Teal</a></li>
		<li class="red"><a title="Red" href="{{store url="?___store=default&___from_store=default"}}">Red</a></li>
	</ul>	
			
	<ul class="item-home-store layout-home">
		<li class="title-menu-home">404 Page Layout</li>
		<li><a title="404 Page Style 1" href="{{store url="404page"}}">404 Page Style 1</a></li>
	</ul>
	
	<div style="clear:both;"> </div>
	
</div>

Shop
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Group 1′: Please click Here to view.

Note: Do the same with item ‘Group 2′

Backend of ‘Accessories – Women’ in the ‘Group 1′: Please click Here to view.

Backend of ‘Bag – Women’ in the ‘Group 1′: Please click Here to view.

Note: Do the same with other items having same level as ‘Bag – Women’ in the ‘Group 1′

Backend of ‘Shoes – Women’ in the ‘Group 2′: Please click Here to view.

Backend of ‘Product Slider – Men’ in the ‘Group 2′: Please click Here to view.

Note: Do the same with other items having same level as ‘Product Slider – Men’ in the ‘Group 2′

Collection
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Group 1′: Please click Here to view.

Note: Do the same with item ‘Group 2′

Backend of ‘Accessories – Women’ in the ‘Group 1′: Please click Here to view.

Backend of ‘Image 1′ in the ‘Group 1′: Please click Here to view.

Copy and paste the following code into the content:

<div class="static-image-menu">
<a title="Static Image" href="#">
<img src="{{media url="wysiwyg/image-megamenu/img-megamenu-4.jpg"}}" alt="Static Image" />
</a>
</div>

Backend of ‘Shoes-Women’ in the ‘Group 2′: Please click Here to view.

Backend of ‘Image 2′ in the ‘Group 2′: Please click Here to view.

Copy and paste the following code into the content:

<div class="static-image-menu">
<a title="Static Image" href="#">
<img src="{{media url="wysiwyg/image-megamenu/img-megamenu-5.jpg"}}" alt="Static Image" />
</a>
</div>

Accessories
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Accessories’ in the ‘Accessories’: Please click Here to view.

Blog
Frontend Appearance

Backend Settings: Please click Here to view.

About Us
Frontend Appearance

Backend Settings: Please click Here to view.

Contact
Frontend Appearance

Backend Settings: Please click Here to view.

3.2.2 Vertical Megamenu:

Vertical-mega-menu

Sortable Categories Items Please click Here to view.

Fashion
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Row 1′: Please click Here to view.

Note: Do the same with item ‘Row 2′

Backend of ‘T-shirt’ in the ‘Row 1′: Please click Here to view.

Backend of ‘Dress’ in the ‘Row 1′: Please click Here to view.

Backend of ‘Shoes’ in the ‘Row 1′: Please click Here to view.

Backend of ‘Bags’ in the ‘Row 2′: Please click Here to view.

Backend of ‘Dress’ in the ‘Row 2′: Please click Here to view.

Backend of ‘Shoes’ in the ‘Row 2′: Please click Here to view.

Computer
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Computer Column 1′: Please click Here to view.

Note: Do the same with item ‘Computer Column 2′

Backend of ‘Col 1′ in the ‘Computer Column 1′: Please click Here to view.

Note: The item named ‘Col 2′ in the ‘Computer Column 1′ and ‘Col 1′, ‘Col 2′ in the ‘Computer Column 2′ having same menu level (Level 3) as item ‘Col 1′ could have the same configuration. However, you should be aware that the Parent Item of ‘Col 1′, ‘Col 2′ in the ‘Computer Column 2′ is different.

Backend of ‘Beds’ in the ‘Col 1′: Please click Here to view.

Note: Do the same with item ‘Cabinets & Storage’ in the ‘Col 2′

Backend of ‘Shoes’ in the ‘Col 1′: Please click Here to view.

Note: Do the same with item ‘Coat’ in ‘the ‘Col 2′

Backend of ‘Bathroom Fixtures’ in the ‘Col 1′: Please click Here to view.

Backend of ‘Banner’ in the ‘Col 2′: Please click Here to view.

Copy and paste the following code into the content:

<div class="static-image-menu ab-right">
<a title="Static Image" href="#">
<img src="{{media url="wysiwyg/image-megamenu/img-megamenu.jpg"}}" alt="Static Image" />
</a>
</div>

Healthy & Beauty
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Sub list’ in the ‘Healthy & Beauty’: Please click Here to view.

Furniture
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Row 1′ in the ‘Furniture’: Please click Here to view.

Backend of ‘Fu.. R1 Column 1′ in the ‘Row 1′: Please click Here to view.

Backend of ‘Col 1′in the’Fu.. R1 Column 1′: Please click Here to view.

Note: Do the same with item ‘Col 2′

Backend of ‘Chairs & Sofas’in the’Col 1′: Please click Here to view.

Note: Do the same with item ‘Dress’

Backend of ‘Fu.. R1 Column 2′ in the ‘row1′: Please click Here to view.

Backend of ‘Col 1′in the’Fu.. R1 Column 2′: Please click Here to view.

Note: Do the same with item ‘Col 2′

Backend of ‘Office Furniture’in the’Col 1′: Please click Here to view.

Note: Do the same with item ‘T-shirt’

Backend of ‘Banner 2′in the’Fu.. Row 2′: Please click Here to view.

Copy and paste the following code into the content:

<a title="Static Image" href="#"><img src="{{media url="wysiwyg/image-megamenu/img-megamenu-2.jpg"}}" alt="Static Image" /></a>

Backend of ‘Banner 3′in the’Fu.. Row 2′: Please click Here to view.

Copy and paste the following code into the content:

<a title="Static Image" href="#"><img src="{{media url="wysiwyg/image-megamenu/img-megamenu-3.jpg"}}" alt="Static Image" /></a>

Smartphone
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Row 1′: Please click Here to view.

Note: Do the same with item ‘Fu.. Row 2′

Backend of ‘Fu.. R1 Column 1′ in the ‘Row 1′: Please click Here to view.

Note: Do the same with item ‘Fu.. R1 Column 2′

Backend of ‘Col 1′ in the ‘Fu.. R1 Column 1′: Please click Here to view.

Note: Do the same with item ‘Col 2′

Backend of ‘T-shirt’ in the ‘Col 1′: Please click Here to view.

Note: Do the same with item ‘Dress’

Backend of ‘Col 1′ in the ‘Fu.. R1 Column 2′: Please click Here to view.

Note: Do the same with item ‘Col 2′

Backend of ‘Hat’ in the ‘Col 1′: Please click Here to view.

Note: Do the same with item ‘Shoes’

Backend of ‘Banner 3′in the’Fu.. Row 2′: Please click Here to view.

Copy and paste the following code into the content:

<a title="Static Image" href="#"><img src="{{media url="wysiwyg/image-megamenu/img-megamenu-3.jpg"}}" alt="Static Image" /></a>

Sport Clothing
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Sub list’ in the ‘Sport Clothing’: Please click Here to view.

Accessories
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Sub list’ in the ‘Accessories’: Please click Here to view.

Watch & Jewelry
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Sub list’ in the ‘Watch & Jewelry’: Please click Here to view.

Kitchen
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Sub list’ in the ‘Kitchen’: Please click Here to view.

More Category
Frontend Appearance

Backend Settings: Please click Here to view.

3.3 Configure Extensions

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

In SM topshop Administration Page, please navigate to Stores>> Settings>> Configuration >> MAGENTECH.COM to configure extensions as you want.

SM Listing Tabs

Position: SM Listing Tabs
Frontend Appearance

Backend of SM Listing Tabs: Click Here

Position: SM Basic Products
Frontend Appearance

Backend of SM Basic Products: Click Here

Position: SM Megamenu
Frontend Appearance

Horizontal Megamenu

Vertical Megamenu

Backend of SM Megamenu: Click Here

SM Countdown Product Slider

Position: SM Countdown Product Slider
Frontend Appearance

Backend of SM Countdown Product Slider: Click Here

SM Image Slider

Position: SM Image Slider
Frontend Appearance

Backend of SM Image Slider: Click Here
Go Here to readmore about the SM Image Slider module.

SM Super Categories

Position: SM Super Categories
Frontend Appearance

Backend of SM Super Categories: Click Here

SM Deals

Position: SM Deals
Frontend Appearance

Backend of SM Deals: Click Here

SM Quick View

Position: SM Quick View
Frontend Appearance

Backend of SM Quick View: Click Here

3.4 Configure Static Blocks

The SM topshop front-page has the following static blocks in the theme:

To create a new static block, go to Content>> Elements>> Blocks >> Add new block.

Static Block: hotline

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “hotline”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<p>Call Support Free : (044) 6789 839</p>

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “banner-full-top”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<p><a title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-1/banner-full-top.jpg"}}" alt="Image static" /></a></p>

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “banner-link-deal”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<ul>
<li><a href="#"><img src="{{media url="wysiwyg/home-page-image/home-1/plicy-1.png"}}" alt="" /></a></li>
<li><a href="#"><img src="{{media url="wysiwyg/home-page-image/home-1/plicy-2.png"}}" alt="" /></a></li>
<li><a href="#"><img src="{{media url="wysiwyg/home-page-image/home-1/plicy-3.png"}}" alt="" /></a></li>
</ul>

Static Block: static-image-1

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-image-1″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="row banner-list static-image-1">
<div class="col-lg-4 col-md-4 col-xs-4"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-1/image-1.jpg"}}" alt="Static Image" /></a></div>
<div class="col-lg-8 col-md-8 col-xs-8">
<div class="row">
<div class="col-lg-6 col-md-6 col-xs-6"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-1/image-2.jpg"}}" alt="Static Image" /></a></div>
<div class="col-lg-6 col-md-6 col-xs-6 newsletter-wrap">{{block class="Magento\Newsletter\Block\Subscribe" template="subscribe.phtml"}}</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-1/image-3.jpg"}}" alt="Static Image" /></a></div>
</div>
</div>
</div>

Static Block: static-image-2

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-image-2″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="row banner-list static-image-2">
<div class="col-lg-12 col-md-12"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-1/image-4.jpg"}}" alt="Static Image" /></a></div>
</div>

Static Block: blog-block

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “blog-block”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="box-content latest-post-block">
<div class="slider-latest-blog">
<div class="title-home">
<h2>Recent posts</h2>
</div>
<div class="slider-blog latest-post">
<div class="item">
<div class="blog-item-content">
<div class="image-blog"><a class="img-link" title="Vestibulum sit amet libero vel neque dapibus ultrices" href="#"><img src="{{media url="wysiwyg/blog/blog-7.jpg"}}" alt="Image Blog" /></a></div>
<div class="info-blog">
<div class="postTitle">
<div class="postDate"><span class="month">Mar</span><span class="date">16</span></div>
<h2><a href="#">Vestibulum sit amet libero vel neque dapibus ultrices</a></h2>
</div>
<div class="postContent">Quis qui prosciutto, eiusmod bacon in kielbasa beef enim short loin ground round nostrud sint. Kevin pancetta sunt officia ullamco, meatball ut cow ex velit elit laboris...</div>
<div class="action-post"><a class="btn-readmore" title="Read More" href="#">Read More</a></div>
</div>
</div>
</div>
<div class="item">
<div class="blog-item-content">
<div class="image-blog"><a class="img-link" title="Fusce orci ligula neque dapibus ultrices" href="#"><img src="{{media url="wysiwyg/blog/blog-4.jpg"}}" alt="Image Blog" /></a></div>
<div class="info-blog">
<div class="postTitle">
<div class="postDate"><span class="month">Mar</span><span class="date">16</span></div>
<h2><a href="#">Fusce orci ligula neque dapibus ultrices</a></h2>
</div>
<div class="postContent">Aliquip pork loin prosciutto fatback bresaola culpa ribeye dolor. Cillum fatback drumstick aute. Sirloin beef ribs culpa, nisi ut meatball kevin. Officia deserunt drums...</div>
<div class="action-post"><a class="btn-readmore" title="Read More" href="#">Read More</a></div>
</div>
</div>
</div>
<div class="item">
<div class="blog-item-content">
<div class="image-blog"><a class="img-link" title="Vivamus dictum pulvinar ipsum vitae vestibulum" href="#"><img src="{{media url="wysiwyg/blog/blog-3.jpg"}}" alt="Image Blog" /></a></div>
<div class="info-blog">
<div class="postTitle">
<div class="postDate"><span class="month">Mar</span><span class="date">16</span></div>
<h2><a href="#">Vivamus dictum pulvinar ipsum vitae vestibulum</a></h2>
</div>
<div class="postContent">Pork belly enim tenderloin, boudin short loin cillum ad picanha proident. Sint minim shankle dolore. Ball tip tongue alcatra, strip steak pork loin do filet mignon ullam...</div>
<div class="action-post"><a class="btn-readmore" title="Read More" href="#">Read More</a></div>
</div>
</div>
</div>
<div class="item">
<div class="blog-item-content">
<div class="image-blog"><a class="img-link" title="Morbi in turpis vel ante feugiat placerat" href="#"><img src="{{media url="wysiwyg/blog/blog-1.jpg"}}" alt="Image Blog" /></a></div>
<div class="info-blog">
<div class="postTitle">
<div class="postDate"><span class="month">Mar</span><span class="date">16</span></div>
<h2><a href="#">Morbi in turpis vel ante feugiat placerat</a></h2>
</div>
<div class="postContent">We welcome Lauren Manoogian to Need Supply Co. this fall. This eponymous label of one very talented Brooklyn designer is defined by soft knits and sculptural cuts.</div>
<div class="action-post"><a class="btn-readmore" title="Read More" href="#">Read More</a></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">// <![CDATA[
	jQuery(document).ready(function($) {
	var post_slider = $(".slider-blog.latest-post");
	post_slider.owlCarousel({				
	responsive:{
		0:{
			items:1
		},
		480:{
			items:1
		},
		768:{
			items:2
		},
		992:{
			items:2
		},
		1200:{
			items:3
		}
	},
	autoplay:false,
	loop:false,
	nav : false,
	dots: false,
	autoplaySpeed : 500,
	navSpeed : 500,
	dotsSpeed : 500,
	autoplayHoverPause: true,
	margin:30,
	});	  
	});
// ]]></script>
</div>
</div>

Static Block: brand-block

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “brand-block”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="brand-block">
<div class="title-home">
<h2>Our brand</h2>
</div>
<div class="brand-content">
<ul class="list-brands row">
<li class="col-lg-2 col-md-2 col-sm-3"><a title="Brand" href="#"><img src="{{media url="wysiwyg/brand/br01.jpg"}}" alt="Brand" /></a></li>
<li class="col-lg-2 col-md-2 col-sm-3"><a title="Brand" href="#"><img src="{{media url="wysiwyg/brand/br02.jpg"}}" alt="Brand" /></a></li>
<li class="col-lg-2 col-md-2 col-sm-3"><a title="Brand" href="#"><img src="{{media url="wysiwyg/brand/br03.jpg"}}" alt="Brand" /></a></li>
<li class="col-lg-2 col-md-2 col-sm-3"><a title="Brand" href="#"><img src="{{media url="wysiwyg/brand/br04.jpg"}}" alt="Brand" /></a></li>
<li class="col-lg-2 col-md-2 col-sm-3"><a title="Brand" href="#"><img src="{{media url="wysiwyg/brand/br05.jpg"}}" alt="Brand" /></a></li>
<li class="col-lg-2 col-md-2 col-sm-3"><a title="Brand" href="#"><img src="{{media url="wysiwyg/brand/br06.jpg"}}" alt="Brand" /></a></li>
<li class="col-lg-2 col-md-2 col-sm-3"><a title="Brand" href="#"><img src="{{media url="wysiwyg/brand/br07.jpg"}}" alt="Brand" /></a></li>
<li class="col-lg-2 col-md-2 col-sm-3"><a title="Brand" href="#"><img src="{{media url="wysiwyg/brand/br08.jpg"}}" alt="Brand" /></a></li>
<li class="col-lg-2 col-md-2 col-sm-3"><a title="Brand" href="#"><img src="{{media url="wysiwyg/brand/br09.jpg"}}" alt="Brand" /></a></li>
<li class="col-lg-2 col-md-2 col-sm-3"><a title="Brand" href="#"><img src="{{media url="wysiwyg/brand/br10.jpg"}}" alt="Brand" /></a></li>
</ul>
</div>
</div>

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “about-us-footer”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<p><img src="{{media url="wysiwyg/footer/footer-logo.png"}}" alt="Topshop - Responsive Magento Theme for Multipurpose" /></p>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</p>

Static Block: ft-contact-us

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “ft-contact-us”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="block ft-contact-us">
<div class="title">Store Information</div>
<div class="content">
<p class="address"><em class="fa fa-home"></em>Ranelagh Place, Liverpool, L3 5UL, England</p>
<p class="phone"><em class="fa fa-phone"></em><a title="Telephone" href="#">8 (495) 989 906 743</a></p>
<p class="email"><em class="fa fa-envelope"></em><a title="Mail to: topshop@co.uk.com" href="mailto:topshop@co.uk.com">topshop@co.uk.com</a></p>
</div>
</div>

Static Block: ft-information

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “ft-information”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="block ft-information">
<div class="title">INFORMATION</div>
<div class="content">
<ul>
<li><a title="About Us" href="{{config path="web/secure/base_url"}}about-us.html">About Us</a></li>
<li><a title="Jobs" href="#">Jobs</a></li>
<li><a title="Delivery Information" href="#">Delivery Information</a></li>
<li><a title="Privacy Policy" href="#">Privacy Policy</a></li>
<li><a title="Term and Conditions" href="#">Term and Conditions</a></li>
</ul>
</div>
</div>

Static Block: ft-my-account

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “ft-my-account”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="block ft-my-account">
<div class="title">MY ACCOUNT</div>
<div class="content">
<ul>
<li><a title="My account" href="{{config path="web/secure/base_url"}}customer/account/">My account</a></li>
<li><a title="Login" href="{{config path="web/secure/base_url"}}customer/login/">Login</a></li>
<li><a title="My Cart" href="{{config path="web/secure/base_url"}}checkout/cart/">My Cart</a></li>
<li><a title="My Wishlist" href="{{config path="web/secure/base_url"}}wishlist/">My Wishlist</a></li>
<li><a title="My Compare" href="{{config path="web/secure/base_url"}}catalog/product_compare/">My Compare</a></li>
</ul>
</div>
</div>

Static Block: ft-why-us

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “ft-why-us”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="block ft-why-us">
<div class="title">WHY CHOOSE US</div>
<div class="content">
<ul>
<li><a title="Product Recall" href="#">Product Recall</a></li>
<li><a title="Gift Vouchers" href="#">Gift Vouchers</a></li>
<li><a title="Returns and Exchanges" href="#">Returns and Exchanges</a></li>
<li><a title="Shipping Options" href="#">Shipping Options</a></li>
<li><a title="Terms of Use" href="#">Terms of Use</a></li>
</ul>
</div>
</div>

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “ft-category-footer”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="block ft-category">
<div class="content">
<ul>
<li><label title="WATCHES">WATCHES : </label></li>
<li><a title="Watches" href="#">Watches</a></li>
<li><a title="Titan Watches" href="#">Titan Watches</a></li>
<li><a title="Casio Watches" href="#">Casio Watches</a></li>
<li><a title="Fastrack Watches" href="#">Fastrack Watches</a></li>
<li><a title="Timex Watches" href="#">Timex Watches</a></li>
<li><a title="Fossil Watches" href="#">Fossil Watches</a></li>
<li><a title="Diesel Watches" href="#">Diesel Watches</a></li>
<li><a title="Luxury Watches " href="#">Luxury Watches </a></li>
<li><a title="View all" href="#">View all</a></li>
</ul>
<ul>
<li><label title="CLOTHING">CLOTHING: </label></li>
<li><a title="Shirts" href="#">Shirts</a></li>
<li><a title="Jeans" href="#">Jeans</a></li>
<li><a title="T shirts" href="#">T shirts</a></li>
<li><a title="Kurtis " href="#">Kurtis </a></li>
<li><a title="Sarees" href="#">Sarees</a></li>
<li><a title="Levis Jeans" href="#">Levis Jeans</a></li>
<li><a title="Killer Jeans" href="#">Killer Jeans</a></li>
<li><a title="Pepe Jeans " href="#">Pepe Jeans </a></li>
<li><a title="Arrow Shirts " href="#">Arrow Shirts </a></li>
<li><a title="Ethnic Wear " href="#">Ethnic Wear </a></li>
<li><a title="Formal Shirts  " href="#">Formal Shirts </a></li>
<li><a title="Peter England Shirts  " href="#">Peter England Shirts </a></li>
<li><a title="View all" href="#">View all</a></li>
</ul>
<ul>
<li><label title="FOOTWEAR">FOOTWEAR : </label></li>
<li><a title="Shoes " href="#">Shoes </a></li>
<li><a title="Casual Shoes " href="#">Casual Shoes </a></li>
<li><a title="Adidas Shoes" href="#">Adidas Shoes</a></li>
<li><a title="Gas Shoes" href="#">Gas Shoes</a></li>
<li><a title=" Puma Shoes " href="#"> Puma Shoes </a></li>
<li><a title="Reebok Shoes " href="#">Reebok Shoes </a></li>
<li><a title="Woodland Shoes " href="#">Woodland Shoes </a></li>
<li><a title="Red tape Shoes " href="#">Red tape Shoes </a></li>
<li><a title="Nike Shoes " href="#">Nike Shoes </a></li>
<li><a title="View all" href="#">View all</a></li>
</ul>
</div>
</div>

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “payment-footer”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<p><img src="{{media url="wysiwyg/payment/payment.png"}}" alt="Payment" /></p>

Static Block: static-image-1-index2

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-image-1-index2″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="row banner-list static-image-1-index2">
<div class="col-lg-4 col-md-4 col-sm-4"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-1/image-1.jpg"}}" alt="Static Image" /></a></div>
<div class="col-lg-8 col-md-8 col-sm-8">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-1/image-2.jpg"}}" alt="Static Image" /></a></div>
<div class="col-lg-6 col-md-6 col-sm-6 box-margin-bottom"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-2/image-1.jpg"}}" alt="Static Image" /></a></div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-1/image-3.jpg"}}" alt="Static Image" /></a></div>
</div>
</div>
</div>

Static Block: blog-block-index2

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “blog-block-index2″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="box-content latest-post-block latest-post-block-index2">
<div class="slider-latest-blog">
<div class="title-home">
<h2>Recent posts</h2>
</div>
<div class="slider-blog latest-post">
<div class="item">
<div class="blog-item-content">
<div class="image-blog"><a class="img-link" title="Vestibulum sit amet libero vel neque dapibus ultrices" href="#"><img src="{{media url="wysiwyg/blog/blog-7.jpg"}}" alt="Image Blog" /></a></div>
<div class="info-blog">
<div class="postTitle">
<div class="postDate"><span class="month">Mar</span><span class="date">16</span></div>
<h2><a href="#">Vestibulum sit amet libero vel neque dapibus ultrices</a></h2>
</div>
<div class="postContent">Quis qui prosciutto, eiusmod bacon in kielbasa beef enim short loin ground round nostrud sint. Kevin pancetta sunt officia ullamco, meatball ut cow ex velit elit laboris...</div>
<div class="action-post"><a class="btn-readmore" title="Read More" href="#">Read More</a></div>
</div>
</div>
</div>
<div class="item">
<div class="blog-item-content">
<div class="image-blog"><a class="img-link" title="Fusce orci ligula neque dapibus ultrices" href="#"><img src="{{media url="wysiwyg/blog/blog-4.jpg"}}" alt="Image Blog" /></a></div>
<div class="info-blog">
<div class="postTitle">
<div class="postDate"><span class="month">Mar</span><span class="date">16</span></div>
<h2><a href="#">Fusce orci ligula neque dapibus ultrices</a></h2>
</div>
<div class="postContent">Aliquip pork loin prosciutto fatback bresaola culpa ribeye dolor. Cillum fatback drumstick aute. Sirloin beef ribs culpa, nisi ut meatball kevin. Officia deserunt drums...</div>
<div class="action-post"><a class="btn-readmore" title="Read More" href="#">Read More</a></div>
</div>
</div>
</div>
<div class="item">
<div class="blog-item-content">
<div class="image-blog"><a class="img-link" title="Vivamus dictum pulvinar ipsum vitae vestibulum" href="#"><img src="{{media url="wysiwyg/blog/blog-3.jpg"}}" alt="Image Blog" /></a></div>
<div class="info-blog">
<div class="postTitle">
<div class="postDate"><span class="month">Mar</span><span class="date">16</span></div>
<h2><a href="#">Vivamus dictum pulvinar ipsum vitae vestibulum</a></h2>
</div>
<div class="postContent">Pork belly enim tenderloin, boudin short loin cillum ad picanha proident. Sint minim shankle dolore. Ball tip tongue alcatra, strip steak pork loin do filet mignon ullam...</div>
<div class="action-post"><a class="btn-readmore" title="Read More" href="#">Read More</a></div>
</div>
</div>
</div>
<div class="item">
<div class="blog-item-content">
<div class="image-blog"><a class="img-link" title="Morbi in turpis vel ante feugiat placerat" href="#"><img src="{{media url="wysiwyg/blog/blog-1.jpg"}}" alt="Image Blog" /></a></div>
<div class="info-blog">
<div class="postTitle">
<div class="postDate"><span class="month">Mar</span><span class="date">16</span></div>
<h2><a href="#">Morbi in turpis vel ante feugiat placerat</a></h2>
</div>
<div class="postContent">Quis qui prosciutto, eiusmod bacon in kielbasa beef enim short loin ground round nostrud sint. Kevin pancetta sunt officia ullamco, meatball ut cow ex velit elit laboris...</div>
<div class="action-post"><a class="btn-readmore" title="Read More" href="#">Read More</a></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">// <![CDATA[
	jQuery(document).ready(function($) {
	var post_slider = $(".latest-post-block-index2 .slider-blog.latest-post");
	post_slider.owlCarousel({				
	responsive:{
		0:{
			items:1
		},
		480:{
			items:1
		},
		768:{
			items:2
		},
		992:{
			items:2
		},
		1200:{
			items:2
		}
	},
	autoplay:false,
	loop:false,
	nav : false,
	dots: false,
	autoplaySpeed : 500,
	navSpeed : 500,
	dotsSpeed : 500,
	autoplayHoverPause: true,
	margin:30,
	});	  
	});
// ]]></script>
</div>
</div>

Static Block: static-image-1-index3

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-image-1-index3″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="row banner-list static-image-1-index3">
<div class="col-lg-12 col-md-12 col-sm-6 col-xs-6 box-margin-bottom"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-3/image-1.jpg"}}" alt="Static Image" /></a></div>
<div class="col-lg-12 col-md-12 col-sm-6 col-xs-6"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-3/image-2.jpg"}}" alt="Static Image" /></a></div>
</div>

Static Block: static-image-2-index3

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-image-2-index3″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="row banner-list static-image-2-index3">
<div class="col-lg-12 col-md-12 box-margin-bottom"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-3/image-3.jpg"}}" alt="Static Image" /></a></div>
</div>

Static Block: static-image-3-index3

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-image-3-index3″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="row banner-list box-margin-bottom">
<div class="col-lg-12 col-md-12"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-3/image-4.jpg"}}" alt="Static Image" /></a></div>
</div>

Static Block: static-image-4-index3

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-image-4-index3″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="row banner-list">
<div class="col-lg-12 col-md-12 box-margin-bottom"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-3/image-5.jpg"}}" alt="Static Image" /></a></div>
</div>

Static Block: blog-block-index3

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “blog-block-index3″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="box-content latest-post-block latest-post-block-index3">
<div class="slider-latest-blog">
<div class="title-home">
<h2>Recent posts</h2>
</div>
<div class="slider-blog latest-post">
<div class="item">
<div class="blog-item-content">
<div class="image-blog"><a class="img-link" title="Vestibulum sit amet libero vel neque dapibus ultrices" href="#"><img src="{{media url="wysiwyg/blog/blog-7.jpg"}}" alt="Image Blog" /></a></div>
<div class="info-blog">
<div class="postTitle">
<div class="postDate"><span class="month">Mar</span><span class="date">16</span></div>
<h2><a href="#">Vestibulum sit amet libero vel neque dapibus ultrices</a></h2>
</div>
<div class="postContent">Quis qui prosciutto, eiusmod bacon in kielbasa beef enim short loi...</div>
<div class="action-post"><a class="btn-readmore" title="Read More" href="#">Read More</a></div>
</div>
</div>
</div>
<div class="item">
<div class="blog-item-content">
<div class="image-blog"><a class="img-link" title="Fusce orci ligula neque dapibus ultrices" href="#"><img src="{{media url="wysiwyg/blog/blog-4.jpg"}}" alt="Image Blog" /></a></div>
<div class="info-blog">
<div class="postTitle">
<div class="postDate"><span class="month">Mar</span><span class="date">16</span></div>
<h2><a href="#">Fusce orci ligula neque dapibus ultrices</a></h2>
</div>
<div class="postContent">Nostrud turkey ad dolore deserunt cillum magna cow ball tip. Nostr...</div>
<div class="action-post"><a class="btn-readmore" title="Read More" href="#">Read More</a></div>
</div>
</div>
</div>
<div class="item">
<div class="blog-item-content">
<div class="image-blog"><a class="img-link" title="Vivamus dictum pulvinar ipsum vitae vestibulum" href="#"><img src="{{media url="wysiwyg/blog/blog-3.jpg"}}" alt="Image Blog" /></a></div>
<div class="info-blog">
<div class="postTitle">
<div class="postDate"><span class="month">Mar</span><span class="date">16</span></div>
<h2><a href="#">Vivamus dictum pulvinar ipsum vitae vestibulum</a></h2>
</div>
<div class="postContent">Aliquip pork loin prosciutto fatback bresaola culpa ribeye dolor....</div>
<div class="action-post"><a class="btn-readmore" title="Read More" href="#">Read More</a></div>
</div>
</div>
</div>
<div class="item">
<div class="blog-item-content">
<div class="image-blog"><a class="img-link" title="Morbi in turpis vel ante feugiat placerat" href="#"><img src="{{media url="wysiwyg/blog/blog-1.jpg"}}" alt="Image Blog" /></a></div>
<div class="info-blog">
<div class="postTitle">
<div class="postDate"><span class="month">Mar</span><span class="date">16</span></div>
<h2><a href="#">Morbi in turpis vel ante feugiat placerat</a></h2>
</div>
<div class="postContent">Pork belly enim tenderloin, boudin short loin cillum ad picanha pr...</div>
<div class="action-post"><a class="btn-readmore" title="Read More" href="#">Read More</a></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">// <![CDATA[
	jQuery(document).ready(function($) {
	var post_slider = $(".latest-post-block-index3 .slider-blog.latest-post");
	post_slider.owlCarousel({				
	responsive:{
		0:{
			items:1
		},
		480:{
			items:1
		},
		768:{
			items:1
		},
		992:{
			items:1
		},
		1200:{
			items:1
		}
	},
	autoplay:false,
	loop:false,
	nav : false,
	dots: false,
	autoplaySpeed : 500,
	navSpeed : 500,
	dotsSpeed : 500,
	autoplayHoverPause: true,
	margin:30,
	});	  
	});
// ]]></script>
</div>
</div>

Static Block: static-image-1-index4

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-image-1-index4″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="row banner-list static-image-1-index4">
<div class="col-lg-4 col-md-4 col-sm-4"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-1/image-1.jpg"}}" alt="Static Image" /></a></div>
<div class="col-lg-8 col-md-8 col-sm-8">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-1/image-2.jpg"}}" alt="Static Image" /></a></div>
<div class="col-lg-6 col-md-6 col-sm-6 box-margin-bottom"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-2/image-1.jpg"}}" alt="Static Image" /></a></div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-4/image-1.jpg"}}" alt="Static Image" /></a></div>
</div>
</div>
</div>

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “banner-c-women”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="banner-c-brand">
<div class="banner"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/categories-image/banner_c_women.jpg"}}" alt="Static Image" /></a></div>
</div>

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “banner-c-men”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="banner-c-brand">
<div class="banner"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/categories-image/banner_c_men.jpg"}}" alt="Static Image" /></a></div>
</div>

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “banner-c-shoe”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="banner-c-brand">
<div class="banner"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/categories-image/banner_c_chair.jpg"}}" alt="Static Image" /></a></div>
</div>

Static Block: static-image-2-index4

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-image-2-index4″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="row banner-list static-image-2-index4">
<div class="col-lg-6 col-md-6 col-sm-6"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-4/image-2.jpg"}}" alt="Static Image" /></a></div>
<div class="col-lg-6 col-md-6 col-sm-6"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-4/image-3.jpg"}}" alt="Static Image" /></a></div>
</div>

Static Block: static-image-1-index5

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-image-1-index5″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="row banner-list">
<div class="col-lg-12 col-md-12"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-5/image-1.jpg"}}" alt="Static Image" /></a></div>
</div>

Static Block: static-service-1-index5

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-service-1-index5″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="static-service-1-index5">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 item-service">
<div class="icon"> </div>
<div class="info">
<p class="title">Free Shipping</p>
<p class="desc">On orders over $99.99</p>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4  item-service">
<div class="icon"> </div>
<div class="info">
<p class="title">Money Back 100%</p>
<p class="desc">Within 30 Days after delivery</p>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4  item-service">
<div class="icon"> </div>
<div class="info">
<p class="title">Support 24/7</p>
<p class="desc">Support 100%</p>
</div>
</div>
</div>
</div>

Static Block: static-image-2-index5

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-image-2-index5″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="row banner-list static-image-2-index5">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="row box-margin-bottom">
<div class="col-lg-12 col-md-12"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-5/image-2.jpg"}}" alt="Static Image" /></a></div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-5/image-3.jpg"}}" alt="Static Image" /></a></div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-5/image-4.jpg"}}" alt="Static Image" /></a></div>
</div>

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “vertical-menu-config”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<p>{{block class="Sm\MegaMenu\Block\MegaMenu\View" template="Sm_MegaMenu::megamenu.phtml" theme="2" group_id="2" }}</p>

3.5 How To Edit Copyright in Admin Panel

Frontend Appearance

In SM Topshop Administration Page, please navigate to Stores>> Settings>> Configuration >> MAGENTECH.COM >> SM Topshop >> Advanced to configure this theme’s copyright.

Edit the code here:

TOPSHOP  ©  2016 Magento Themes Demo Store. All Rights Reserved.

3.6 How To Customize the Social symbols in admin panel

Frontend Appearance

In SM topshop Administration Page, please navigate to Stores>> Settings >> Configuration >> MAGENTECH.COM >> SM topshop >> Socials.

4SUPPORT

SUPPORT – If you have any questions that are beyond the scope of this help file, please feel free to send us via: Support Tickets System
FAQs – Go to Here to view more the Frequently Asked Questions.

↧

SP Twitter Slider Ver1.0.1

April 8, 2016, 2:14 am

≫ Next: SM Furnicom

≪ Previous: SM Topshop Magento 2.0

View demo More detail

This guide will help you install SP Twitter Slider Version 1.0.1 module step by step. This module is compatible with the lasted version of Prestashop.

1 Installation – Back to top

The SP Twitter Slider Module installation contains 5 steps as following:

Step 1: Login to your Prestashop admin panel and Go to Back Office >> Modules & Services. At the top of the page, click the “Add a new module” button.

Step 2: Click “Choose a file” button to select your module .zip file “sp_twitter_slider_p1.6.x-res_v1.0.1.zip” that you have downloaded and then push “Upload this module” button.

Step 3: The uploading process will be started. You will see the message that “the module was successfully downloaded”.

Step 4: The new module will be located in the modules list. Search the name of module and Click on the Install button to install the module.

Step 5: Finally, you will see a notification message: “This module is already installed: sp twitter slider”.

2 Configuration – Back to top

Find to the module that you have installed and clicked on Configure button to configure the module.

The parameters are divided into the following groups:

General Options
Other Options
Effect Options

Let’s look at the parameters in detail:

General Options

Title – Input title of the module.
Module Class Suffix – Enter the suffix which is applied to the CSS class of module. This allows to style an individual module easily.
Status – Allow to on/off the module.
Hook into – Select Hook into in the list box. Please click Here to read more How To Create Custom CMS Hook Page.
Screen Name – Input the screen name.
ID – Input the twitter user ID . Please go here to get User ID.
Count – Allow to input total number of tweets to be displayed.

Other Options

Display Avatar – Allow to display Avatar OR not.
Display Follow Button – Allow to display Follow button OR not.
Display Direction Button – Allow to display Direction button Or not.

Effect Options

Start Slide – The zero-based index of the slide that should be initially displayed.
Auto Play – Auto Play Slide show for the module Or not.
Auto Interval timeout – The duration to change to next slide.
Auto Play Hover Pause – Allow to pause effects when users hover OR not.
Effect – Select effect for the module OR not.
Mouse Drag – Allow to on/off mouse drag on PC.

3SUPPORT – Back to top

Thank you so much for purchasing this module. If you have any questions that are beyond the scope of this help file, please send us via: Support Tickets System

Thanks so much!

↧

SM Furnicom

April 13, 2016, 8:06 pm

≫ Next: SP Collection

≪ Previous: SP Twitter Slider Ver1.0.1

View demo More detail

Firstly, a huge thanks for purchasing this theme, your support is truly appreciated!

1 SYSTEM REQUIREMENT

At the basic level, this theme will require the following conditions:

Compatible with Magento Community Edition 1.7.x; 1.8.x and 1.9.x (require: php 5.4 and Memory_limit no less than 256Mb)

2INSTALLATION

There are two ways to install a Magento Theme:

Quickstart Installation: By using this package, you will set the theme exactly like our Demo with sample data.
Manual Installation (including Theme Installation).

2.1 Quickstart Installation:

Please follow steps below:

Step 1: Download the quickstart package
Step 2: Extract and Upload the whole Quickstart package to your server. In Quickstart folder you will see the extracted folder that include all sample data
Step 3: Create a Database for your Magento site

Note: You need to remember the database name to use in the next steps

Step 4: Start installation by opening browser and navigate to your URL (where the Quickstart uploaded) to load default Magento installer. Please follow each step of the Installer so that the installation process can be set.

Step 5: Locale Settings. Please fill fully into Required Fields (“Locale; Time Zone and Default Currency”.)

Step 6: In the Configuration step, input the required fields as below.
- Database Name : sm-furnicom-quickstart( It must be the exact name of database you have just created)
- User name : root
- User password : no need to fill
- Do not use "localhost" in the URL path, otherwise you could not log in to your Admin area (you should use your local IP when setting up your website hosted entirely on your own computer).

Step 7: Create Admin Account. Please fill out Required Fields (“First Name; Last Name; Email; Username; password and confirm password” completely.)

Step 8: Finish Installation and now you you can click Go to Frontend to open Homepage or click Go to Backend to open Admin Panel.

2.2 Manual Installation

Step 1: Please unzip “sm_furnicom_theme.zip” file and upload folders skin; media;lib;js;app from the theme package to the root of your Magento site folder on your server.

Note: You could change the name of this folder. However, if you want your website run correctly, it need to have the same name as the database you choose.
Step 2: Log in to your Admin Panel (e.g. http://yourdomain/index.php/admin/)

Note: If you are using the Admin Panel when copying folders in step 1, you need to log out and log in back.
Step 3: Disable Cache: Go to System >> Cache Management, click ‘Sellect All’ button, then choose ‘Disable’ and click ‘Submit’ button to complete the action.

Step 4: Navigate to System >> Configuration >> Design.

Step 5: In Package tab of Design Section, input the parameter Current Package Name with the actual theme name.

Step 6: You can also change the settings for Header.

Note: After configuring in each steps( for example: Step 4, Step 5, Step6), you need to click “Save Config” button to save your changes

2.3 Theme Setting

Configure SM Furnicom General Setting Theme In Magento admin panel, navigate to SM furnicom Setting and configure theme as you want.

Configure General with Theme color, Font size, color for the link, hover buttons, page, text, title, background … for any store.
Note:
Copy and paste the following Elements into “Google Font Elements”:
```
.header-middle .header-middleright .shipping .inner p
```
Configure Theme Layout with Layout style, Header style& Homepage style ( depend on Default pages on Web tab) to configure
Configure the Product Listing with Layout 1 Column, Layout 2 Columns, Layout 3 Columns,Product Shows Effect On Hover, etc.
Configure the Product Detail To zoom image of product, adjust Zoom Mode, Custom tab, and content, etc.
Configure Rich Snippets
Configure Socials : To connect with social networks such as Facebook, Twitter, Google Plus, Linkedin
Configure Advanced : To show popup, Cpanel, use “Add to cart, Add to wishlist, Add to Compare
Configure Theme Installation

Note: Click the Import Static Blocks and CMS Pages to import all static blocks and CMS pages provided with this theme. The following notification will appear to announce that you have just imported static blocks or pages successfully.

After importing, you need to go to CMS >> Static Block ( or Pages) to configure and select Store View for each block or page.

2.4 Blog

Configure Blog

3CONFIGURATION

Set Default Page

To set a default page for your Magento Site, in the Admin Panel you go to System>>Configuration>>Web>>Default Pages. Please click to see the Backend Settings.
You need to change to the website / store view that you want to change (the dropdown menu in the upper left corner). You will probably have to create a new CMS page if you want to have something different from your default home page.

3.1 Page Configuration

3.1.1 Home Style 1

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-default homestyle1">
<div class="wrap-content1">
	<div class="wow fadeInUp">
        <div class="row">           
			<div class="slider-deal-w col-lg-9 col-md-9">
			    {{block type="deal/list" name="deal.list.default1" template="sm/deal/slider-deal.phtml"}}
			</div>
			<div class="products-w col-lg-3 col-md-3">
			    {{block type="cms/block" block_id="products-popular"}}
			</div>
            {{block type="cms/block" block_id="banner1-1"}}	
        </div>
    </div>		
</div>	
<div class="wrap-content2 full-wrapper">
	<div class="container">
		<div class="wow fadeInUp">
			<div class="slider-basic-wrapper content-box">
			{{block type="basicproducts/list" name="basicproducts.slider.home" template="sm/basicproducts/basic-slider-home.phtml"}}
			</div>
		</div>
		<div class="wow fadeInUp">
		   <div class="content-box hm">
		      {{block type="cms/block" block_id="banner-infos"}}
		   </div>
		</div>
		<div class="wow fadeInUp">
			<div class="slider-basic-wrapper content-box">
			{{block type="basicproducts/list" name="basicproducts.slider.home" template="sm/basicproducts/basic-slider-home.phtml"
			basicproducts_title_text="<strong>Best</strong> Sellers"
			product_order_by="best_sales"
			}}
			</div>
		</div>
	</div>
</div>
<div class="wow fadeInUp">
<div class="testimonial-wrap full-wrapper">
	<div class="container">
		{{block type="cms/block" block_id="testimonial"}}             
	</div>
</div>
</div> 
<div class="wow fadeInUp">
         {{block type="cms/block" block_id="static-content"}}		
</div>

<div class="wrap-content3 full-wrapper">
<div class="container">
<div class="wow fadeInUp">		
	<div class="latest-blog-wrap">
		{{block type="blog/blog" name="latest_post" template="aw_blog/latest-post.phtml"}}	
	</div>			
</div>
<div class="wow fadeInUp">	
        {{block type="cms/block" block_id="brands-tab"}}
</div>

</div>
</div>
	
</div>

Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the Design field::

<reference name="full_top">
	<block type="imageslider/list" name="imageslider.list.default2" template="sm/imageslider/default.phtml">
			</block>
</reference>

Meta Data: Please click to see the Backend Settings.

3.1.2 Home Style 2

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="homestyle2">

<div class="wow fadeInUp">
	<div class="full-wrapper full-wrapper-image center">
		<div class="full-content">
			{{block type="cms/block" block_id="banner2-1"}}
		</div>
	</div>
</div>
<div class="wow fadeInUp">
	<div class="content-box slider-basic-w">
	{{block type="basicproducts/list" name="basicproducts.slider.home" template="sm/basicproducts/basic-slider-home2.phtml"
	basicproducts_title_text="New Arrivals"
	product_order_by="created_at"
	nb_column1="1"
        nb_column2="1"
        nb_column3="1"
        nb_column4="1"
        nb_column5="1"
	product_limitation="16"
	nb_rows="8"
	}}
	</div>
</div>

<div class="wow fadeInUp">
	<div class="list-basic-w full-wrapper">
       <div class="container">
	{{block type="basicproducts/list" name="basicproducts.list.sidebar" template="sm/basicproducts/basic-product-list.phtml"
		product_limitation="6"
		basicproducts_title_text="Best Sellers"
		product_order_dir="ASC"
		product_order_by="best_sales"
		product_title_maxlength="50"
		product_title_display="1"
		product_price_display="1"
		product_reviews_count="1"
		product_addcart_display="0"
		product_addwishlist_display="0"
		product_addcompare_display="0"
		product_readmore_display="0"
		product_description_display="0"
		imgcfg_width="100"
		imgcfg_height="100"
	}}
	</div>
       </div>
</div>
<div class="wow fadeInUp">
	<div class="box-content listingtab-wrapper">
		{{block type="listingtabs/list" name="listingtabs.list.default" template="sm/listingtabs/default_index2.phtml"}}
	</div>
</div>
<div class="wow fadeInUp">
    {{block type="cms/block" block_id="banner2-2"}}
</div>
<div class="wow fadeInUp">

<div class="dailydeal-wrap">
<div class="row">
	<div class="col-lg-7 col-md-7 col-sm-12 col-sx-12">
                {{block type="deal/list" name="deal.list.default2" template="sm/deal/slider-deal2.phtml"
                       product_description_display="1"
                }}
	</div>
	<div class="col-lg-5 col-md-5 col-sm-12 col-sx-12">
                {{block type="cms/block" block_id="static-categories2"}}
	</div>
</div>
</div>
</div>

<div class="wow fadeInUp">		
	<div class="latest-blog-wrap">
		{{block type="blog/blog" name="latest_post" template="aw_blog/latest-post2.phtml"}}	
	</div>			
</div>


</div>

Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the Content field:

<reference name="full_top">
	<block type="imageslider/list" name="imageslider.list.default2" template="sm/imageslider/default.phtml">
			</block>
</reference>

Meta Data: Please click to see the Backend Settings.

3.1.3 Home Style 3

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="homestyle3">
        <div class="wow bounceInUp ">
		      {{block type="cms/block" block_id="banner-infos"}}
	</div>
      <div class="wow fadeInUp">
        <div class="wrap-content1">   
                  <div class="row">        
			<div class="slider-deal-w col-lg-9 col-md-9">
			    {{block type="deal/list" name="deal.list.default1" template="sm/deal/slider-deal.phtml"}}
			</div>
			<div class="products-w col-lg-3 col-md-3">
			    {{block type="cms/block" block_id="products-popular"}}
			</div>
                   </div>
        </div>
    </div>	
<div class="wow fadeInUp">
	<div class="listingtab-wrapper">
		{{block type="listingtabs/list" name="listingtabs.list.default" template="sm/listingtabs/default.phtml"
                          filter_type="categories"
                         product_category="202,203,281"
                         category_preload="202"
                        margin="30"
                         nbi_column1="4"
                         nbi_column2="3"
                         nbi_column3="2"
                         nbi_column4="1"
                 }}
	</div>
</div>

    <div class="wow bounceInDown">
          {{block type="cms/block" block_id="banner1-1"}}	
     </div>

<div class="wow fadeInUp">
	<div class="listingtab-wrapper2">
		{{block type="listingtabs/list" name="listingtabs.list.default3" template="sm/listingtabs/default_index2.phtml"
                         listingtabs_title_text="<strong>product</strong> categories"
			filter_type="categories"
			product_category="264,239,255,267"
			category_preload="264"
       
		}}
	</div>
</div>
<div class="wow fadeInLeft">
<div class="testimonial-wrap full-wrapper">
	<div class="container">
		{{block type="cms/block" block_id="testimonial"}}             
	</div>
</div>
</div>
<div class="wow fadeInUp">
<div class="row">
		<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
			{{block type="basicproducts/list" name="basicproducts.list.default" template="sm/basicproducts/basic-list-home.phtml" 
                        basicproducts_title_text="<strong>New</strong> Arrivals" 
                        product_order_by="created_at"
                        nb_column1="1"
                        nb_column2="1"
                        nb_column3="1"
                        nb_column4="1"
                        }}
		</div>
		
		<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
			{{block type="basicproducts/list" name="basicproducts.list.default" template="sm/basicproducts/basic-list-home.phtml" 
                        basicproducts_title_text="<strong>Best</strong> Selling" 
                        product_order_by="best_sales"
                        nb_column1="1"
                        nb_column2="1"
                        nb_column3="1"
                        nb_column4="1"
                        }}
		</div>
		
		<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 phl-last">
			{{block type="basicproducts/list" name="basicproducts.list.default" template="sm/basicproducts/basic-list-home.phtml" 
                        basicproducts_title_text="<strong>Hot</strong> Sale" 
                        product_order_by="most_viewed"
                        nb_column1="1"
                        nb_column2="1"
                        nb_column3="1"
                        nb_column4="1"
                        }}
		</div>
</div>
</div>

<div class="wrap-content3 full-wrapper">
<div class="container">
<div class="wow fadeInUp">		
	<div class="latest-blog-wrap">
		{{block type="blog/blog" name="latest_post" template="aw_blog/latest-post.phtml"}}	
	</div>			
</div>
</div>
</div>

<div class="wow fadeInUp">	
        {{block type="cms/block" block_id="brands-tab"}}
</div>



</div>

Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the Content field::

<reference name="full_top">

<block type="cms/block" name="custom-slider-img">
	<action method="setBlockId"><block_id>custom-slider-img</block_id></action>
</block>
</reference>

Meta Data: Please click to see the Backend Settings.

3.1.4 Home Style 4

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="homestyle4">
	<div class="row">
        <div class="content-wrap1">
			<div class="wow fadeInLeft">
				<div class="slider-images-w col-lg-9 col-md-8">
		    		{{block type="imageslider/list" name="imageslider.list.default4" template="sm/imageslider/default.phtml"}}
				</div>					
			</div>
			<div class="wow fadeInRight">               
				<div class="products-w col-lg-3 col-md-4">
					{{block type="basicproducts/list" name="basicproducts.list.sidebar4" template="sm/basicproducts/basic-product-list.phtml"
						product_limitation="4"
						basicproducts_title_text="<strong>Popular</strong> Products"
						product_order_dir="ASC"
						product_order_by="top_rating"
						product_title_maxlength="50"
						product_title_display="1"
						product_price_display="1"
						product_reviews_count="1"
						product_addcart_display="0"
						product_addwishlist_display="0"
						product_addcompare_display="0"
						product_readmore_display="0"
						product_description_display="0"
						imgcfg_width="90"
						imgcfg_height="90"
					}}
				</div>	
	        </div>				
		</div>
    </div>

    <div class="wow fadeInUp">
	    <div class="content-wrap2"> 
	    	<div class="row">  
				<div class="products-w col-lg-3 col-md-4">
				    {{block type="basicproducts/list" name="basicproducts.list.sidebar4" template="sm/basicproducts/basic-product-list.phtml"
					product_limitation="3"
					basicproducts_title_text="<strong>Sale</strong> Products"
					product_order_dir="ASC"
					product_order_by="best_sales"
					product_title_maxlength="50"
					product_title_display="1"
					product_price_display="1"
					product_reviews_count="1"
					product_addcart_display="0"
					product_addwishlist_display="0"
					product_addcompare_display="0"
					product_readmore_display="0"
					product_description_display="0"
					imgcfg_width="92"
					imgcfg_height="92"
				}}
				</div>        
				<div class="slider-deal-w">
				    {{block type="deal/list" name="deal.list.default4" template="sm/deal/slider-deal-v4.phtml"}}
				</div>
			</div>
	    </div>
	</div>

       <div class="wow pulse">
       <div class="box-content">
                  {{block type="cms/block" block_id="banner4-1"}}
       </div>
	</div>

<div class="wow fadeInUp">
<div class="box-content">
        {{block type="supercategories/list" name="supercategories.list.default" template="sm/supercategories/default_home4.phtml"}}
</div>
</div>

<div class="wow fadeInUp">
<div class="box-content super-cate-2">
    {{block type="supercategories/list" name="supercategories.list.default" template="sm/supercategories/default_home4.phtml"
    	product_category="203"
    }}
</div>
</div>

<div class="wow fadeInDown">
<div class="testimonial-wrap full-wrapper ">
	<div class="container">
		{{block type="cms/block" block_id="testimonial"}}             
	</div>
</div>
</div>

<div class="wow fadeInUp">
	<div class="listingtab-wrapper">
		{{block type="listingtabs/list" name="listingtabs.list.default.v4" template="sm/listingtabs/default_index4.phtml"
                         listingtabs_title_text="<strong>Best</strong> sellers"
			filter_type="categories"
			product_category="264,239,255,267"
			category_preload="264"
                        margin="30"
                        product_limitation="12"
		}}
	</div>
</div>

 <div class="wow fadeInUp">
          {{block type="cms/block" block_id="banner-infos"}}	
 </div>

<div class="content-wrap3 full-wrapper">
<div class="container">
<div class="wow fadeInUp">		
	<div class="latest-blog-wrap">
		{{block type="blog/blog" name="latest_post" template="aw_blog/latest-post.phtml"}}	
	</div>			
</div>
</div>
</div>

<div class="wow fadeInUp">	
        {{block type="cms/block" block_id="brands-tab"}}
</div>

</div>

Design Tab: Please click to see the Backend Settings.

Meta Data: Please click to see the Backend Settings.

3.1.5 Home Style 5

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="homestyle5">
          <div class="wow fadeInLeft">				
		   {{block type="imageslider/list" name="imageslider.list.default5" template="sm/imageslider/default.phtml"}}			
          </div>

<div class="wow fadeInUp">
<div class="content-wrap1">
<div class="row">
	<div class="col-product1 col-lg-3 col-md-3">
		{{block type="basicproducts/list" name="basicproducts.list.sidebar4" template="sm/basicproducts/basic-product-list.phtml"
			product_limitation="3"
			basicproducts_title_text="<strong>Sale</strong> Products"
			product_order_dir="ASC"
			product_order_by="best_sales"
			product_title_maxlength="50"
			product_title_display="1"
			product_price_display="1"
			product_reviews_count="1"
			product_addcart_display="0"
			product_addwishlist_display="0"
			product_addcompare_display="0"
			product_readmore_display="0"
			product_description_display="0"
			imgcfg_width="92"
			imgcfg_height="92"
		}}
	</div>
	<div class="col-deal col-lg-6 col-md-6">
		<div class="slider-deal-w">
		    {{block type="deal/list" name="deal.list.default4" template="sm/deal/slider-deal-v5.phtml"}}
		</div>
	</div>
	<div class="col-product2 col-lg-3 col-md-3">
		{{block type="basicproducts/list" name="basicproducts.list.sidebar6" template="sm/basicproducts/basic-product-list.phtml"
			product_limitation="3"
			basicproducts_title_text="<strong>Popular</strong> Products"
			product_order_dir="ASC"
			product_order_by="top_rating"
			product_title_maxlength="50"
			product_title_display="1"
			product_price_display="1"
			product_reviews_count="1"
			product_addcart_display="0"
			product_addwishlist_display="0"
			product_addcompare_display="0"
			product_readmore_display="0"
			product_description_display="0"
			imgcfg_width="92"
			imgcfg_height="92"
		}}
	</div>
</div>
</div>
</div>

<div class="wow pulse">
       <div class="box-content">
                  {{block type="cms/block" block_id="banner5-1"}}
       </div>
</div>

<div class="wow fadeInUp">
<div class="box-content super-cate1">
    {{block type="supercategories/list" name="supercategories.list.default51" template="sm/supercategories/default_home5.phtml"
    	product_category="203"
        nbi_column1="3"
       product_limitation="12"
    }}
</div>
</div>

<div class="wow fadeInUp">
<div class="box-content super-cate2">
    {{block type="supercategories/list" name="supercategories.list.default51" template="sm/supercategories/default_home5.phtml"
    	product_category="202"
        nbi_column1="3"
       product_limitation="12"
    }}
</div>
</div>


<div class="wow fadeInUp">
<div class="box-content super-cate3">
    {{block type="supercategories/list" name="supercategories.list.default51" template="sm/supercategories/default_home5.phtml"
    	product_category="281"
        nbi_column1="3"
       product_limitation="12"
    }}
</div>
</div>

<div class="wow fadeInDown">
<div class="box-content">
<div class="testimonial-wrap full-wrapper ">
	<div class="container">
		{{block type="cms/block" block_id="testimonial"}}             
	</div>
</div>
</div>
</div>

<div class="wow fadeInUp">
	<div class="listingtab-wrapper">
		{{block type="listingtabs/list" name="listingtabs.list.default.v5" template="sm/listingtabs/default_index4.phtml"
                         listingtabs_title_text="<strong>Top</strong> selling"
			filter_type="categories"
			product_category="264,239,255,267"
			category_preload="264"
                        margin="30"
                        product_limitation="12"
		}}
	</div>
</div>

 <div class="wow fadeInUp">
          {{block type="cms/block" block_id="banner-infos"}}	
 </div>

<div class="content-wrap3 full-wrapper">
<div class="container">
<div class="wow fadeInUp">		
	<div class="latest-blog-wrap">
		{{block type="blog/blog" name="latest_post" template="aw_blog/latest-post.phtml"}}	
	</div>			
</div>
</div>
</div>

 <div class="wow fadeInUp">
          {{block type="cms/block" block_id="slider-brands"}}	
 </div>

</div>

Design Tab: Please click to see the Backend Settings.

Meta Data: Please click to see the Backend Settings.

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.

Horizontal Megamenu:

Horizontal-mega-menu

Horizontal Megamenu List Please click Here to view.

Horizontal Megamenu’s Backend Please click Here to view.

Home
Frontend Appearance

Backend Settings: Please click Here to view.

Features

Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Dropdown Features’: Please click Here to view.

Copy and paste the following code into the content:

<div class="home-menu-dropdown">
	<ul class="item-home-store layout-home">
		<li class="title-menu-home">Layouts</li>
		<li><a title="Home Style 1" href="{{store url="?___store=default&___from_store=french"}}">Home Style 1</a></li>
		<li><a title="Home Style 2" href="{{store url="?___store=french&___from_store=default"}}">Home Style 2</a></li>
		<li><a title="Home Style 3" href="{{store url="?___store=german&___from_store=default"}}">Home Style 3</a></li>
		<li><a title="Home Style 4" href="{{store url="?___store=argentina&___from_store=default"}}">Home Style 4</a></li>
		<li><a title="Home Style 5" href="{{store url="?___store=bolivia&___from_store=default"}}">Home Style 5</a></li>
		<li><a title="Boxed Layout" href="{{store url="?___store=somaliland&___from_store=default"}}">Boxed Layout</a></li>
	</ul>
	
	<ul class="item-home-store theme-color">
		<li class="title-menu-home">Color Styles</li>
		<li class="brown"><a title="Brown" href="{{store url="?___store=default&___from_store=french"}}">Brown</a></li>
		<li class="red"><a title="Red" href="{{store url="?___store=andorra&___from_store=default"}}">Red</a></li>
		<li class="green"><a title="Green" href="{{store url="?___store=belgium&___from_store=default"}}">Green</a></li>		
		<li class="orange"><a title="Orange" href="{{store url="?___store=benin&___from_store=default"}}">Orange</a></li>
		<li class="blue"><a title="Blue" href="{{store url="?___store=french&___from_store=default"}}">Blue</a></li>
	</ul>
	
	<ul class="item-home-store header-home">
		<li class="title-menu-home">Headers</li>
		<li><a title="Header Style 1" href="{{store url="?___store=default&___from_store=french"}}">Header Style 1</a></li>
		<li><a title="Header Style 2" href="{{store url="?___store=french&___from_store=default"}}">Header Style 2</a></li>
		<li><a title="Header Style 3" href="{{store url="?___store=german&___from_store=default"}}">Header Style 3</a></li>
		<li><a title="Header Style 4" href="{{store url="?___store=argentina&___from_store=default"}}">Header Style 4</a></li>
		<li><a title="Header Style 5" href="{{store url="?___store=bolivia&___from_store=default"}}">Header Style 5</a></li>
		<li><a title="Megamenu" href="{{store url="?___store=default&___from_store=french"}}">Megamenu</a></li>
		<li><a title="Css Menu" href="{{store url="?___store=barbados&___from_store=french"}}">Css Menu</a></li>
	</ul>
	
	<ul class="item-home-store detail-home">
		<li class="title-menu-home">Product Detail Layouts</li>
		<li><a title="Product Detail - Full" href="{{store url="shop/sazen-kutemas.html?detail_style=1&thumbstyle=2""}}">Product Detail - Full</a></li>
		<li><a title="Product Detail - Left Sidebar" href="{{store url="shop/sazen-kutemas.html?detail_style=2&thumbstyle=1"}}">Product Detail - Left Sidebar</a></li>
		<li><a title="Product Detail - Right Sidebar" href="{{store url="shop/sazen-kutemas.html?detail_style=3&thumbstyle=1"}}">Product Detail - Right Sidebar</a></li>
		<li><a title="Thumbnail  - Horizontal" href="{{store url="shop/sazen-kutemas.html?thumbstyle=1"}}">Thumbnail  - Horizontal</a></li>
		<li><a title="Thumbnail - Vertical" href="{{store url="shop/sazen-kutemas.html?thumbstyle=2"}}">Thumbnail - Vertical</a></li>
	</ul>
	
	<ul class="item-home-store detail-home">
		<li class="title-menu-home">Zoom Types</li>
		<li><a title="Product Page Inner Zoom" href="{{store url="shop/sazen-kutemas.html/?___store=default&___from_store=argentina"}}">Product Page Inner Zoom</a></li>
		<li><a title="Product Page Outer Zoom" href="{{store url="shop/sazen-kutemas.html/?___store=andorra&___from_store=default"}}">Product Page Outer Zoom</a></li>
		<li><a title="Product Page Lens Zoom" href="{{store url="shop/sazen-kutemas.html/?___store=bolivia&___from_store=default"}}">Product Page Lens Zoom</a></li>
	</ul>
	
	<div style="clear:both;"> </div>
	
	<ul class="item-home-store layout-home">
		<li class="title-menu-home">Listing Layouts</li>
		<li><a title="Without Sidebar" href="{{store url="shop.html?___store=german&___from_store=default&mode=grid"}}">Without Sidebar</a></li>
		<li><a title="Left Sidebar" href="{{store url="shop.html?___store=default&___from_store=german&mode=grid"}}">Left Sidebar</a></li>
		<li><a title="Right Sidebar" href="{{store url="shop.html?___store=argentina&___from_store=default&mode=grid"}}">Right Sidebar</a></li>
		<li><a title="Left - Right Sidebar" href="{{store url="shop.html?___store=bolivia&___from_store=default&mode=grid""}}">Left - Right Sidebar</a></li>
		
	</ul>
	
	<ul class="item-home-store layout-home">
		<li class="title-menu-home">About Us Layouts</li>
		<li><a title="About Us Style 1" href="{{store url="about-us.html/?___store=default&___from_store=argentina"}}">About Us Style 1</a></li>
		<li><a title="About Us Style 2" href="{{store url="about-us.html/?___store=french&___from_store=default"}}">About Us Style 2</a></li>
		<li><a title="About Us Style 3" href="{{store url="about-us.html/?___store=german&___from_store=default"}}">About Us Style 3</a></li>
		<li><a title="About Us Style 4" href="{{store url="about-us.html/?___store=argentina&___from_store=default"}}">About Us Style 4</a></li>
	</ul>
	
	<ul class="item-home-store layout-home">
		<li class="title-menu-home">Contact Us Layouts</li>
		<li><a title="Contact Us Style 1" href="{{store url="contact-us.html/?___store=default&___from_store=argentina"}}">Contact Us Style 1</a></li>
		<li><a title="Contact Us Style 2" href="{{store url="contact-us.html/?___store=french&___from_store=default"}}">Contact Us Style 2</a></li>
		<li><a title="Contact Us Style 3" href="{{store url="contact-us.html/?___store=german&___from_store=default"}}">Contact Us Style 3</a></li>
		<li><a title="Contact Us Style 4" href="{{store url="contact-us.html/?___store=argentina&___from_store=default"}}">Contact Us Style 4</a></li>
	</ul>
	
	<ul class="item-home-store layout-home">
		<li class="title-menu-home">404 Page Layout</li>
		<li><a title="404 Page Style 1" href="{{store url="404page"}}">404 Page Style 1</a></li>
	</ul>
	
	<ul class="item-home-store detail-home">
		<li class="title-menu-home">Effect Hover Product</li>
		<li><a title="Simple" href="{{store url="shop.html?___store=andorra&___from_store=german&mode=grid"}}">Simple</a></li>
		<li><a title="Display Second Image" href="{{store url="shop.html?___store=default&___from_store=german&mode=grid"}}">Display Second Image</a></li>
		<li><a title="Display Slider Image" href="{{store url="shop.html?___store=barbados&___from_store=german&mode=grid"}}">Display Slider Image</a></li>
	</ul>

</div>

Living Room

Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Group 1′: Please click Here to view.

Backend of ‘Accessories’ in the ‘Group 1′: Please click Here to view.

Note: Do the same with item ‘Office Furniture’, ‘Bed & Bath’

Backend of Clocks in the ‘Accessories’: Please click Here to view.

Note: The item named ‘Decorative Shelving’, ‘Desktop’, ‘Dividers & Screens’, ‘Fireplace’, ‘Glassware & Ceramic’, ‘Mirrors’, ‘Bookcases’, ‘Other Furniture’, ‘Chairs’, ‘Desks’, ‘Office lamps’, ‘Rocking chairs’, ‘Trucks’, ‘Bathtime Goods’, ‘Bed & Bath Accessories’, ‘Beding’, ‘Blankets’, ‘Shower Curtains’, ‘Step Stools’ and ‘Towels & Rugs’ having same menu level (Level 4) as item ‘Clocks’ could have the same configuration. However, you should be aware that the Parent Item of them is different.

Backend of ‘Image Bottom’ in the ‘Living Room’: Please click Here to view.

Copy and paste the following code into the content:

<div class="static-bottom-link">
<a title="Static Image" href="#"><img src="{{media url="wysiwyg/image-megamenu/image-1.jpg"}}" alt="Static Image" /></a>
</div>

Bedrooms

Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Categories’: Please click Here to view.

Backend of ‘Accessories’ in the ‘Categories’: Please click Here to view.

Backend of ‘Mattresses’ in the’Accessories’: Please click Here to view.

Note: The item named ‘Quilts & Coverlets’, ‘Mattress Pads’, ‘Dressers & Chests’, ‘Nightstands’, ‘Duvet Fills’ and ‘Shower Heads’ having same menu level (Level 4) as item ‘Mattress Pads’ could have the same configuration.

Backend of ‘Feature Products’: Please click Here to view.

Copy and paste the following code into the content:

<div class="basicproduct-content-menu">
{{block type="basicproducts/list" name="basicproducts.list.default" template="sm/basicproducts/basic-megamenu.phtml"
	product_source="catalog"
	product_category="208"
	product_order_by="best_sales"
	product_limitation="2"
	product_addcart_display="1"
	product_addwishlist_display="1"
	product_addcompare_display="1"
}}
</div>

Blog

Frontend Appearance

Backend Settings: Please click Here to view.

Contact Us
Frontend Appearance

Backend Setting:Please click Here to view.

Backend of ‘Dropdown’: Please click Here to view.

Copy and paste the following code into the content:

<ul class="item-about-contact">
		<li><a title="Contact Us Style 1" href="{{store url="contact-us.html/?___store=default&___from_store=argentina"}}">Contact Us Style 1</a></li>
		<li><a title="Contact Us Style 2" href="{{store url="contact-us.html/?___store=french&___from_store=default"}}">Contact Us Style 2</a></li>
		<li><a title="Contact Us Style 3" href="{{store url="contact-us.html/?___store=german&___from_store=default"}}">Contact Us Style 3</a></li>
		<li><a title="Contact Us Style 4" href="{{store url="contact-us.html/?___store=argentina&___from_store=default"}}">Contact Us Style 4</a></li>
	</ul>

3.3 Configure Extensions

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

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

SM Basic Products

Position: SM Basic Products
Frontend Appearance

Backend of SM Basic Products: Click Here
Go Here to readmore about the SM Basic Products module.

Position: SM Megamenu
Frontend Appearance

Backend of SM Megamenu: Click Here

SM CartPro

Position: SM CartPro
Frontend Appearance

Backend of SM CartPro: Click Here
Go Here to readmore about the SM CartPro module.

SM Deal

Position: SM Deal
Frontend Appearance

Backend of SM Deal: Click Here
Go Here to readmore about the SM Deal module.

SM Image Slider

Position: SM Image Slider
Frontend Appearance

Backend of SM Image Slider: Click Here
Go Here to readmore about the SM Image Slider module.

SM Quickview

Frontend Appearance

When you put your cursor on a product in the frontend pages, you will see the quickview button appear and you could click on this button to view the product

Backend of SM Quickview: Click Here
Go Here to readmore about the SM Quickview module.

SM Shopby

Frontend Appearance

When you go to the Shop page, you will see the module on the left side of the page.

Backend of SM Shopby: Click Here

SM Listing Tabs

Position: SM Listing Tabs
Frontend Appearance

Backend of SM Listing Tabs : Click Here
Go Here to readmore about the SM Listing Tabs module.

SM Super Categories

Position: SM Super Categories
Frontend Appearance

Backend of SM Image Slider: Click Here

3.4 Configure Static Blocks

The SM Furnicom front-page has the following static blocks in the theme:

To create a new static block, go to CMS >> Static Blocks >> Add new block

Note: Since updating to Magento 1.9.2.4, all codes like this {{block }} are not working correctly. To solve this problem, please go into System >> Permissions >> Blocks and add your blocks in that list

Static Block: header-livechat

To create the static block, go to CMS >> Static Blocks with Title: Furnicom – Header Live chat and Identifier * : “header-livechat”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="livechat">
<a href="#"><img src="{{media url="wysiwyg/header-img/livechat.png"}}" alt="" /></a>
</div>

Static Block: header-hotline

To create the static block, go to CMS >> Static Blocks with Title: Furnicom – Header hotline and Identifier * : “header-hotline”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="hotline">
           <p>
                Call our customer service at: <span>096-999-8386</span>
          </p>
</div>

Static Block: header-shipping

To create the static block, go to CMS >> Static Blocks with Title: Furnicom – Header Free Shipping and Identifier * : “header-shipping”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="shipping">
	<i class="fa fa-truck"></i>
	<div class="inner">
		<p>Everyday Free Shipping</p>
		& No Sales Tax
	</div>
</div>

Static Block: header-socials

To create the static block, go to CMS >> Static Blocks with Title: Furnicom – Header Socials and Identifier * : “header-socials”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="socials-wrap">	
	<ul>		
			<li class="li-social facebook-social">
				<a title="Facebook" href="https://www.facebook.com/MagenTech" target="_blank">
					<span class="fa fa-facebook icon-social"></span>					
				</a>
			</li>
			<li class="li-social twitter-social">
				<a title="Twitter" href="https://twitter.com/smartaddons" target="_blank">
					<span class="fa fa-twitter icon-social"></span>					
				</a>
			</li>
			<li class="li-social linkedin-social">
				<a title="Linkedin" href="#" target="_blank">
					<span class="fa fa-linkedin icon-social"></span>					
				</a>
			</li>
			<li class="li-social google-social">
				<a title="Google" href="#" target="_blank">
					<span class="fa fa-google-plus icon-social"></span>					
				</a>
			</li>
			<li class="li-social pinterest-social">
				<a title="Pinterest" href="#" target="_blank">
					<span class="fa fa-pinterest icon-social"></span>					
				</a>
			</li>				
	</ul>
</div>

Static Block: pretext-deal

To create the static block, go to CMS >> Static Blocks with Title: Furnicom – Pretex Deal custom and Identifier * : “pretext-deal”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="pretext-inner">
	<p>Mauris ut tincidunt nisi, id auctor libero. Etiam aliquet felis et consectetur faucibus. Praesent aliquam, lec tempus consequat,deserunt jowl prosciutto boudin.</p>
	<div class="top-categories">
		<a href="#"><img src="{{media url="wysiwyg/home-page-image/cat1.png"}}" alt="" /></a>
		<a href="#"><img src="{{media url="wysiwyg/home-page-image/cat2.png"}}" alt="" /></a>
		<a href="#"><img src="{{media url="wysiwyg/home-page-image/cat3.png"}}" alt="" /></a>
		<a href="#"><img src="{{media url="wysiwyg/home-page-image/cat4.png"}}" alt="" /></a>
	</div>

</div>

To create the static block, go to CMS >> Static Blocks with Title: Furnicom – home 1 – Banner 1 and Identifier * : “banner 1-1″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="banner1-w">
	<div class="banner banner1-1">
		<a href="#"><img src="{{media url="wysiwyg/home-page-image/home1/banner1-1.jpg"}}" alt="" /></a>
	</div>
	<div class="banner banner1-2">
		<a href="#"><img src="{{media url="wysiwyg/home-page-image/home1/banner1-2.jpg"}}" alt="" /></a>
	</div>
	<div class="banner banner1-3">
		<a href="#"><img src="{{media url="wysiwyg/home-page-image/home1/banner1-3.jpg"}}" alt="" /></a>
	</div>
</div>

To create the static block, go to CMS >> Static Blocks with Title: Furnicom – home 1 – banner infomation – and Identifier * : “banner-infos”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="banner-infos">
	<div class="banner-info banner-info1">
                <img src="{{media url="wysiwyg/home-page-image/icon1.png"}}" alt="" />
		<div class="banner-cont">
			<a data-hover="FREE SHIPPING" href="#">FREE SHIPPING</a>
			<p>Vestibulum dolor purus porta</p>
		</div>
	</div>
	<div class="banner-info banner-info2">
               <div class="inner">
               <img src="{{media url="wysiwyg/home-page-image/icon2.png"}}" alt="" />
		<div class="banner-cont">
			<a data-hover="MONEY BACK GUARANTEE" href="#">MONEY BACK GUARANTEE</a>
			<p>Vestibulum dolor purus porta</p>
		</div>
               </div>
	</div>
	<div class="banner-info banner-info3">
                <img src="{{media url="wysiwyg/home-page-image/icon3.png"}}" alt="" />
		<div class="banner-cont">
			<a data-hover="24 HOURS SUPPORT" href="#">24 HOURS SUPPORT</a>
			<p>Vestibulum dolor purus porta</p>
		</div>
	</div>
</div>

Static Block: testimonial

To create the static block, go to CMS >> Static Blocks with Title: Furnicom – home 1 – testimonial and Identifier * : “testimonial”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="testimonials">	
	<div class="testimonial-slider">
		<div class="item">
			<img src="{{media url="wysiwyg/testimonial/client1.png"}}" alt="" />
			<div class="item-inner">
				<p class="client-des">Fusce lorem ante, condientum in massa, posuere bibendum. Maecenas euismod vulputate eu rhoncus. Pellentesque commodo posuere maximus. Phasellus pellentesque pellentesque.</p>
				<p class="client-name"><strong>Anna Kendrick</strong> - Designer</p>
			</div>
		</div>
	    <div class="item">
			<img src="{{media url="wysiwyg/testimonial/client2.png"}}" alt="" />
			<div class="item-inner">
				<p class="client-des">Consectetur adipisicing elit, lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna. Sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
				<p class="client-name"><strong>Abraham</strong> - Marketing</p>
			</div>
		</div>
		<div class="item">
			<img src="{{media url="wysiwyg/testimonial/client3.png"}}" alt="" />
			<div class="item-inner">
				<p class="client-des">Sed do eiusmod tempor incididunt ut labore et dolore magna, lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
				<p class="client-name"><strong>Anna Kendrick</strong> - CEO</p>
			</div>
		</div>
	</div>	
	
<script>
	jQuery(document).ready(function($) {
		var owl_testimonial = $(".testimonial-slider");
		owl_testimonial.owlCarousel({
			
			responsive:{
				0:{
					items:1
				},
				480:{
					items:1
				},
				768:{
					items:1
				},
				992:{
					items:1
				},
				1200:{
					items:1
				}
			},

			autoplay:false,
			loop:true,
			nav : true, // Show next and prev buttons
			dots: false,
			autoplaySpeed : 500,
			navSpeed : 500,
			dotsSpeed : 500,
			autoplayHoverPause: true,
			margin:30,

		});	  
	});	
</script>
</div>

Static Block: static-content

To create the static block, go to CMS >> Static Blocks with Title: Furnicom – home 1 – Hot categories and Identifier * : “static-content”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="static-content-wrap">
	<div class="static-content static-content1">
		<div class="h-cont content1-1 h-margin">
			<img src="{{media url="wysiwyg/home-page-image/home1/banner2-0.jpg"}}" alt="" />
			<div class="inner">
				<div class="title-home">
					<h2>Dining room</h2>
				</div>
				<ul>
					<li><a href="#">Large Coffee Tables</a></li>
					<li><a href="#">Small Coffee Tables</a></li>
					<li><a href="#">Coffee Table sets</a></li>
					<li><a href="#">End Tables</a></li>
					<li><a href="#">Console Tables</a></li>
					<li><a href="#">Set Of Tables</a></li>
				</ul>
			</div>
		</div>
		<div class="h-cont content1-2">
			<img src="{{media url="wysiwyg/home-page-image/home1/banner2-1.jpg"}}" alt="" />
			
			<div class="inner">
				<div class="title-home">
					<h2>Living room</h2>
				</div>
				<ul>
					<li><a href="#">Coffee Table sets</a></li>
					<li><a href="#">End Tables</a></li>
					<li><a href="#">Console Tables</a></li>
					<li><a href="#">Set Of Tables</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div class="static-content static-content2">
		<div class="content2-1 h-margin">
			<div class="title-home">
				<div class="title-home">
					<h2><strong>Hot</strong> Categories</h2>
				</div>
				<div class="desc">
					Duis euismod eu nibh at pharetra. Vivamus placerat ac metus et placerat. Nulla molestie massa id est posuere, maximus hendrerit est rhoncus.
				</div>
				<a href="#" class="button btn-viewall">
					View all categories
				</a>
			</div>
		</div>
		<div class="h-cont content2-2">
            <img src="{{media url="wysiwyg/home-page-image/home1/banner2-2.jpg"}}" alt="" />
            <div class="inner">
				<div class="title-home">
					<h2>Bed room</h2>
				</div>
				<ul>
					<li><a href="#">Nightstands</a></li>
					<li><a href="#">Beds</a></li>
					<li><a href="#">Headboards</a></li>
					<li><a href="#">Chests & Dressers</a></li>
					<li><a href="#">Nightstands</a></li>
					<li><a href="#">Bedroom Sets</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div class="static-content static-content3">
		<div class="h-cont content3-1 h-margin">
			<img src="{{media url="wysiwyg/home-page-image/home1/banner2-3.jpg"}}" alt="" />
			<div class="inner">
				<div class="title-home">
					<h2>Reading room</h2>
				</div>
				<ul>
					<li><a href="#">Small Coffee Tables</a></li>
					<li><a href="#">Coffee Table sets</a></li>
					<li><a href="#">End Tables</a></li>
					<li><a href="#">Console Tables</a></li>
					<li><a href="#">Set Of Tables</a></li>
				</ul>
			</div>
		</div>
		<div class="h-cont content3-2">
			<img src="{{media url="wysiwyg/home-page-image/home1/banner2-4.jpg"}}" alt="" />
			<div class="inner">
				<div class="title-home">
					<h2>Bathroom</h2>
				</div>
				<ul>
					<li><a href="#">Bathroom Faucets</a></li>
					<li><a href="#">Bathroom Mirrors</a></li>
					<li><a href="#">Bathroom Sinks</a></li>
					<li><a href="#">Bathroom Vanities</a></li>
					<li><a href="#">Showers</a></li>
				</ul>
			</div>
		</div>
	</div>
</div>

Static Block: brand-tab

To create the static block, go to CMS >> Static Blocks with Title: Furnicom – home 1- brands tab – and Identifier * : “brand-tab”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="brands-tab">

  <!-- Nav tabs -->
  <ul class="nav-brand-tabs" role="tablist">
<li class="brands-title">
	<h2><strong>Featured</strong> Brands</h2>
</li>
    <li class="br1 active-fix active"><a href="#brand1" data-toggle="tab"><img src="{{media url="wysiwyg/brand/br1.jpg"}}" alt="" /></a></li>
    <li class="br2"><a href="#brand2" data-toggle="tab"><img src="{{media url="wysiwyg/brand/br2.jpg"}}" alt="" /></a></li>
    <li class="br3"><a href="#brand3" data-toggle="tab"><img src="{{media url="wysiwyg/brand/br3.jpg"}}" alt="" /></a></li>    
  </ul>
  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane fade in active" id="brand1"><img src="{{media url="wysiwyg/brand/brand1.jpg"}}" alt="" /></div>
    <div class="tab-pane fade" id="brand2"><img src="{{media url="wysiwyg/brand/brand2.jpg"}}" alt="" /></div>
    <div class="tab-pane fade" id="brand3"><img src="{{media url="wysiwyg/brand/brand3.jpg"}}" alt="" /></div>
    <div class="tab-pane fade" id="brand4"><img src="{{media url="wysiwyg/brand/brand4.jpg"}}" alt="" /></div>
    <div class="tab-pane fade" id="brand5"><img src="{{media url="wysiwyg/brand/brand5.jpg"}}" alt="" /></div>
    <div class="tab-pane fade" id="brand6"><img src="{{media url="wysiwyg/brand/brand6.jpg"}}" alt="" /></div>
  </div>
  <!-- Nav tabs -->
  <ul class="nav-brand-tabs">
    <li class="br4"><a href="#brand4" data-toggle="tab"><img src="{{media url="wysiwyg/brand/br4.jpg"}}" alt="" /></a></li>
    <li class="br5"><a href="#brand5" data-toggle="tab"><img src="{{media url="wysiwyg/brand/br5.jpg"}}" alt="" /></a></li>
    <li class="br6"><a href="#brand6" data-toggle="tab"><img src="{{media url="wysiwyg/brand/br6.jpg"}}" alt="" /></a></li>
  </ul>

</div>

To create the static block, go to CMS >> Static Blocks with Title: Furnicom – Footer support and Identifier * : “footer-support”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<p>NEED HELP? CALL OUR AWARD-WINNING</p>
<p><span>SUPPORT TEAM 24/7 AT (844) 555-8386</span></p>

Static Block: spotlight 1

To create the static block, go to CMS >> Static Blocks with Title: Furnicom – Footer col 1 – and Identifier * : “spotlight 1″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="spotlight spotlight1 col-lg-3 col-md-3 col-sm-6 col-xs-12">
	<div class="block-title">
		Our Services
	</div>
	<div class="block-cont">
		<ul>
			<li><a href="#">Delivery Information</a></li>
			<li><a href="#">Returns</a></li>
			<li><a href="#">Terms & Conditions</a></li>
			<li><a href="#">Shipping & Refund</a></li>
			<li><a href="#">Specials</a></li>
		</ul>
	</div>
</div>

Static Block: spotlight 2

To create the static block, go to CMS >> Static Blocks with Title: Furnicom – Footer col 2 – and Identifier * : “spotlight 2″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="spotlight spotlight2 col-lg-3 col-md-3 col-sm-6 col-xs-12">
       <div class="block-title">
		Extras
	</div>
	<div class="block-cont">
		<ul>
			<li><a href="{{store url="contact-us.html"}}">Contact us</a></li>
			<li><a href="#">Returns</a></li>
			<li><a href="#">Specials</a></li>
			<li><a href="#">Brands</a></li>
			<li><a href="#">Gift Voucher</a></li>
		</ul>
	</div>
	
</div>

Static Block: spotlight 3

To create the static block, go to CMS >> Static Blocks with Title: Furnicom – Footer col 3 – and Identifier * : “spotlight 3″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="spotlight spotlight3 col-lg-3 col-md-3 col-sm-6 col-xs-12">
	<div class="block-title">
		My account
	</div>
	<div class="block-cont">
		<ul>
			<li><a href="{{store url="sales/order/history/"}}">My orders</a></li>
			<li><a href="#">My credit slips</a></li>
			<li><a href="{{store url="customer/address/new/"}}">My addresses</a></li>
			<li><a href="#">My personal info</a></li>			
		</ul>
	</div>
</div>

Static Block: spotlight 4

To create the static block, go to CMS >> Static Blocks with Title: Furnicom – Footer col 4 – and Identifier * : “spotlight 4″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="spotlight spotlight4 col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="inner">
	<div class="block-title">
		Contact us
	</div>
	<div class="block-cont">
		<div class="contactus">
			<p class="first"><i class="fa fa-map-marker"></i><span>Megnor Comp Pvt Limited,
			Trade Centre, Udhana Darwaja</span></p>
			<p><i class="fa fa-mobile"></i><span>(91)-261 3023333</span></p>
			<p><i class="fa fa-envelope"></i><span>demo@furnicom.com</span></p>
		</div>
		<div class="payment">
			<a href="#"><img src="{{media url="wysiwyg/payment/pay1.png"}}" alt="" /></a>
                        <a href="#"><img src="{{media url="wysiwyg/payment/pay2.png"}}" alt="" /></a>
                        <a href="#"><img src="{{media url="wysiwyg/payment/pay3.png"}}" alt="" /></a>
                        <a href="#" class="pay4"><img src="{{media url="wysiwyg/payment/pay4.png"}}" alt="" /></a>
                        <a href="#" class="pay5"><img src="{{media url="wysiwyg/payment/pay5.png"}}" alt="" /></a>
                         <a href="#" class="pay5"><img src="{{media url="wysiwyg/payment/pay6.png"}}" alt="" /></a>
		</div>
	</div>
</div>
</div>

Static Block: apps

To create the static block, go to CMS >> Static Blocks with Title: Furnicom – Footer apps – and Identifier * : “apps”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="apps">
	<div class="footer-title">
		Download Our App
	</div>
	<div class="app-cont">
		<a href="#"><img src="{{media url="wysiwyg/payment/app1.png"}}" alt="" /></a>
		<a href="#"><img src="{{media url="wysiwyg/payment/app2.png"}}" alt="" /></a>
	</div>
</div>

To create the static block, go to CMS >> Static Blocks with Title: Furnicom – home 2 – Banner 1 – and Identifier * : “banner 2-1″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="banner1-w">
	<div class="banner banner1-1">
		<a href="#"><img src="{{media url="wysiwyg/home-page-image/home2/banner1-1.jpg"}}" alt="" /></a>
	</div>
	<div class="banner banner1-2">
		<a href="#"><img src="{{media url="wysiwyg/home-page-image/home2/banner1-2.jpg"}}" alt="" /></a>
	</div>
	<div class="banner banner1-3">
		<a href="#"><img src="{{media url="wysiwyg/home-page-image/home2/banner1-3.jpg"}}" alt="" /></a>
	</div>
</div>

To create the static block, go to CMS >> Static Blocks with Title: Furnicom – home 2 – Banner 2 – and Identifier * : “banner 2-2″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="banner banner2">
		<a href="#"><img src="{{media url="wysiwyg/home-page-image/home2/banner2.jpg"}}" alt="" /></a>
	</div>

Static Block: static-categories 2

To create the static block, go to CMS >> Static Blocks with Title: Furnicom – home 2 – static categories – Policyshop Home 2 and Identifier * : “static-categories 2″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="static-categories">
	<div class="static-cate static-cate-1">
		<a href="{{store url="living-room.html"}}">
			<span>Living room</span>
		</a>
	</div>
	<div class="static-cate static-cate-2">
		<a href="{{store url="living-room.html"}}">
			<span>Office</span>
		</a>
	</div>
	<div class="static-cate static-cate-3">
		<a href="{{store url="living-room.html"}}">
			<span>Armchair</span>
		</a>
	</div>
	<div class="static-cate static-cate-4">
		<a href="{{store url="diningroom.html"}}">
			<span>Dinning room</span>
		</a>
	</div>
	<div class="static-cate static-cate-5">
		<a href="{{store url="living-room.html"}}">
			<span>Shelf</span>
		</a>
	</div>
	<div class="static-cate static-cate-6">
		<a href="{{store url="bedrooms.html"}}">
			<span>Bedroom</span>
		</a>
	</div>
	<div class="static-cate static-cate-7">
		<a href="{{store url="shop.html"}}">
			<span>Sofa</span>
		</a>
	</div>
	<div class="static-cate static-cate-8">
		<a href="{{store url="shop.html"}}">
			<span>Wall decor</span>
		</a>
	</div>
	<div class="static-cate static-cate-9">
		<a href="{{store url="shop.html"}}">
			<span>Nightstand</span>
		</a>
	</div>
</div>

Static Block: custom-slider-image

To create the static block, go to CMS >> Static Blocks with Title: Furnicom – home 3 – custom slider images – and Identifier * : “custom-slider-image”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="wow pulse">
<div class="custom-slider-img-w">	
	<div class="custom-slider-img">
		<div class="item">
			<a href="#"><img src="{{media url="wysiwyg/slider-home/home-v3/slide1.jpg"}}" alt="" /></a>
		</div>
	    <div class="item">
			<a href="#"><img src="{{media url="wysiwyg/slider-home/home-v3/slide2.jpg"}}" alt="" /></a>
		</div>
		<div class="item">
			<a href="#"><img src="{{media url="wysiwyg/slider-home/home-v3/slide3.jpg"}}" alt="" /></a>
		</div>
		<div class="item">
			<a href="#"><img src="{{media url="wysiwyg/slider-home/home-v3/slide4.jpg"}}" alt="" /></a>
		</div>
	</div>	
	
<script>
	jQuery(document).ready(function($) {
		var owl_testimonial = $(".custom-slider-img");
		owl_testimonial.owlCarousel({
			
			responsive:{
				0:{
					items:1
				},
				480:{
					items:1
				},
				768:{
					items:1
				},
				992:{
					items:2
				},
				1200:{
					items:2
				}
			},

			autoplay:true,
			loop:true,
			nav : true, // Show next and prev buttons
			dots: true,
			autoplaySpeed : 500,
			navSpeed : 500,
			dotsSpeed : 500,
			autoplayHoverPause: true,
			margin:0,

		});	  
	});	
</script>
</div>
</div>

To create the static block, go to CMS >> Static Blocks with Title: Furnicom – home 4 – banner 1 – and Identifier * : “banner 4-1″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="banner4-1">
	<div class="banner banner41 col-lg-8 col-md-8 col-sm-8 col-xs-12 no-padding">
                     <a href="#"><img src="{{media url="wysiwyg/home-page-image/home4/banner4-1.jpg"}}" alt="" /></a>
	</div>
	<div class="banner banner42 col-lg-4 col-md-4 col-sm-4 col-xs-12 no-padding">
                     <a href="#"><img src="{{media url="wysiwyg/home-page-image/home4/banner4-2.jpg"}}" alt="" /></a>
	</div>
</div>

To create the static block, go to CMS >> Static Blocks with Title: Furnicom – home 5 – banner 1 – and Identifier * : “banner 5-1″

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<div class="banner5-1">
	<div class="banner banner51 col-lg-4 col-md-4 no-padding">
        <a href="#"><img src="{{media url="wysiwyg/home-page-image/home5/banner5-1.jpg"}}" alt="" /></a>
	</div>
	<div class="banner banner52 col-lg-8 col-md-8 no-padding">
        <a href="#"><img src="{{media url="wysiwyg/home-page-image/home5/banner5-2.jpg"}}" alt="" /></a>
	</div>
</div>

3.5 How To Edit Copyright in Admin Panel

Frontend Appearance

In the Administrator page, Please navigate to SM Furnicom Setting; find SM Furnicom Setting Module to configure the “Copyright” parameter as image below:

3.6 How To Customize the Social symbols in admin panel

Frontend Appearance

In the Administrator page, please go to SM Furnicom Setting; find SM Furnicom Setting Module to configure the “Social Style” parameter as image below:

3.7 Customize HTML

TOP-LINK

Frontend Appearance

In your Website’s Directory, go to app\design\frontend\sm-furnicom\default\template\page\html\header-style folder. In this folder, you could open the files named header-1.phtml, header-2.phtml, header-3.phtml, header-4.phtml, header-5.phtml by your editor program to configure this part.

4SUPPORT

SUPPORT – If you have any questions that are beyond the scope of this help file, please feel free to send us via: Support Tickets System
FAQs – Go to Here to view more the Frequently Asked Questions.

↧

SP Collection

April 14, 2016, 8:07 pm

≫ Next: SM Image Slider Magento 2

≪ Previous: SM Furnicom

View demo More detail

This guide will help you install SP Collection version 1.0.0 module step by step.

1 Installation – Back to top

Firstly, you must install Prestashop version 1.6.x. Please Click Here to read more about How To Install Prestashop version 1.6.x
Secondly, when you are ready to install SP Collection, please follow 5 steps as following:

Step 1: Login to your Prestashop admin panel and go to Back Office >> Modules and Services >> Modules and Services . At the top of the page, click the Add a new module button.

Step 2: Click “Choose a file” button to select your module .zip file named as “sp_collection_p1.6-res_v1.0.0.zip” that you have downloaded, then click “Upload this module” button.

Step 3: The new module will be located in the module list. Please search the name of module and click on the Install button to install the module.

Step 4: When seeing a notification message as following, please click “Proceed with the installation” button to finish the installation process:

Step 5: When the uploading process is done, you will see the message denoting that:“Module(s) installed successfully”. Please click “Edit” button to configure this module.

2 Configuration – Back to top

You could see the appearance of SP Collection module as following:

To configure this module, please find the module that you have completely installed in the module list and start setting its options. The parameters are divided into the following groups:

GENERAL OPTIONS
SOURCE OPTIONS
CATEGORIES OPTIONS
PRODUCT OPTIONS
EFFECT OPTIONS

Let’s look at the parameters in detail:

GENERAL OPTIONS

Title – Input title for the module.
Display Title Module – Enable/Disable title of module.
Module Class Suffix – A suffix is applied to the CSS class of module. This allows for individual module styling.
Status – Set status enable/disable for the module.
Hook into – Select Hook into in list box. Please click Here to read more How To Create Custom CMS Hook Page.
Open Link – Target to open links:
- New window – Open the link in the new window tab.
- Same window – Open the link in the same window tab.
- Popup window – Open the link in new pop-up window.

SOURCE OPTIONS

Select Categories – Allow you to select Categories.
Count Category – Allow to set the number of categories to be displayed in this block.
Product Field to Order By – Allow to set Product Field to Order By: “Name/ID/Date Add/Price/Sales/Position/Random”.
Ordering Direction – Allow to order Ascending/Descending direction for field.
Count Product – Allow to set the number of product to be displayed in this block.
Item Rows – Allow to set the item rows

CATEGORIES OPTIONS

Size image (W x H) – Select Size of image in list box.
Categories Order By – Set Categories to Order By: “Name/ID/Random”.
Categories Ordering Direction – Allow to order ascending/descending direction for categories.

Note: To view the size of image or edit size of image (after editing size of image >> press “Regenerate Thumbnails”), please go to PREFERENCES >> Images as the image below:

PRODUCTS OPTIONS

Size image (W x H) – Select Size of image in list box.

Display Name – Allow to show/hide name of product.
Name Maxlength – The maxlength of title can be showed. Choose “0″ for showing full title.
Display Description – Allow to show/hide description of product.
Description Maxlength – The Maxlength of description can be showed. Choose “0″ for showing full description.
Display Price – Allow to show/hide price of product.
Display Add to Cart Button – Allow to show/hide Add to Cart button of product.
Display Add to Wishlist Button – Allow to show/hide Wishlist button of product.
Display Add to Compare Button – Allow to show/hide Add to Compare button of product.
Display Detail Link – Allow to show/hide linke for details.
Display New – Allow to show/hide image new.
Display Sale – Allow to show/hide image sale.

Effect Options

Auto Play – Allow to enable/disable auto play for slider.
Auto Interval Time-out – Allow to set speed of timer. Large = Slower.
Auto Play Speed – Allow to set the auto play speed of slider.
Auto Play Hover Pause – Allow to on/off auto play for slider .
Start Position Item – Allow to set item that is displayed at first when you run slider..
Mouse Drag – Allow to on/off mouse drag on PC
Touch Drag – Allow to on/off touch drag on devices
Show Navigation – Allow to show/hide navigation for the module .
Loop – Allow to run a loop or not.

3SUPPORT – Back to top

↧

SM Image Slider Magento 2

April 18, 2016, 12:00 am

≫ Next: SM Listing Tabs 2

≪ Previous: SP Collection

View demo More detail

This guide will help you install SM Image Slider step by step.

1REQUIREMENT

At the basic level, this module will require the following condition:

Compatible with Magento Community Edition 2.0: Please follow Magento 2.0 Installation Guide to install if you do not have one.
Composer (latest stable version)
Apache 2.2 or late
PHP: 5.5.x,5.6.x and Memory_limit no less than 256Mb)

In the future if the conditions change, please check the Magento 2 documentation

2INSTALLATION

Step 1: Download and extract the extension’s package on your computer and navigate inside the folder.
Step 2: Upload the folder named as app from the package to the root of your Magento site on your server
Step 3: On your server, right click and select ‘Use composer here’ to open Command Prompt

1. Please type the following command into the dialog to clear the compiled code and cache:
```
php bin\magento setup:upgrade
```
2. After running successfully the first command, type the following command into the dialog to set up fresh static content to deploy on our Magento store
```
php bin/magento setup:static-content:deploy
```

Step 4: Go to Administratin page to configure the extension

Important Note:

After installing extension, you should logout first and then login Admin Panel to ensure all functions work normally.
You should disable all caches in cache management in the installation and configuration process.

3CONFIGURATION

3.1 Module Demo

You could see the appearance of SM Image Slider module as following:

3.2 Module Configuration

Notes: We used the images of module’s installation on Magento 2.0.x to illustrate

In the Administrator Page, navigate to Stores -> Settings -> Configuration and find SM Image Slider to configure.
The parameters are divided into the following groups:

General settings
Source Options
Product Options – For Theme 2
Image Options
Effect Options
Advanced Options

Let’s look at the parameters in detail:

General settings

Enable/Disable - Choose to publish/unpublish the module parameter.
Display Title - Allow to show/hide title of the module.
Title - Enter the title of the module.
Target - Allow to display the target link in Same Window/ New Window/ Popup Window
Theme - Choose theme which displays this module
Column - Set the number of columns for devices:
- For devices having screen width from 768px up to greater.
- For devices having screen width less than or equal 767px.

Source Options

Media Source - Input “Title, Link, Media, Content, Action”.

Note: Please go to the installation directory to get the image’s source as you want. For example: “C:\xampp\htdocs\magento-2.0\magento\media\wysiwyg\image.jpg”

Effect Option

Auto Play - Allow to Enable/Disable auto play mode
Start - Allow to set page that is displayed at first when you run slideshow.
Step - Set the number of items for each slide transition
Speed - Allow to set the speed of slide.
Interval - The duration to change to next slide.
Stop on Hover - Allow to Stop effects when users hover Or not
Navigation - Allow to Enable/Disable the next/previous button
Loop - Allow to Enable/Disable to loop products
Dot - Allow to Enable/Disable one page scroll with dot navigation style.
Margin Right - Allow to set right margin of the image
Nav Speed - Allow to set the speed of Navigation
Mouse Drag - Allow to use the cursor to navigate pages of products in this module
Dots Speed - Allow to set the speed of dot navigation style
Config for Theme 1.
- Auto Height - Set the value for the height
Config for Theme 2.
- Merge - Allow to double the size of an image to the others in this module
- Type Show For Module - Allow to choose Wide/Boxed for slides

Advanced Options

Pre-text - The content to show at the top of module
Post-text - The content to show at the end of module
Caching - Allow to choose to cache the content of module
Cache Time - Allow to choose the time (in seconds) before the module is recached

3.3 Page Configuration

To display this module on front page, go to Content >>Elements >> Pages.

Create a new page in Page Management section, go to Content>> Elements>> Pages

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:

<block class="Sm\ImageSlider\Block\ImageSlider" name="imageslider" template="Sm_ImageSlider::default.phtml">
   </block>

Design Tab: Please click to see the Backend Settings .

4SUPPORT

Thank you so much for using this module, your support is truly appreciated. If you have any questions that are beyond the scope of this document, please feel free to contact us via our Support Tickets System

↧

SM Listing Tabs 2

April 18, 2016, 7:25 pm

≫ Next: SM Hot Collections Magento 2

≪ Previous: SM Image Slider Magento 2

View demo More detail

This guide will help you install SM Listing Tabs step by step.

1REQUIREMENT

At the basic level, this module will require the following condition:

Compatible with Magento Community Edition 2.0.x: Please follow Magento 2.0 Installation Guide to install if you do not have one.
Composer (latest stable version)
Apache 2.2 or late
PHP: 5.5.x,5.6.x and Memory_limit no less than 256Mb)

In the future if the conditions change, please check the Magento 2 documentation

2INSTALLATION

Step 1: Download and extract the extension’s package on your computer and navigate inside the folder.
Step 2: Upload the folder named as app from the package to the root of your Magento site on your server
Step 3: On your server, right click and select ‘Use composer here’ to open Command Prompt

1. Please type the following command into the dialog to clear the compiled code and cache:
```
php bin\magento setup:upgrade
```
2. After running successfully the first command, type the following command into the dialog to set up fresh static content to deploy on our Magento store
```
php bin/magento setup:static-content:deploy
```

Step 4: Go to Administratin page to configure the extension

Important Note:

After installing extension, you should logout first and then login Admin Panel to ensure all functions work normally.
You should disable all caches in cache management in the installation and configuration process.

3EXTENSION CONFIGURATION – Back to top

3.1 Layout Module

3.2 Module Configuration

Note:We used the images of module’s installtion on Magento 2.0.x to illustrate

After installing, go to Stores -> Settings -> Configuration and find SM Listing Tabs to configure.
The parameters are divided into the following groups:

General settings
Source Options
Tabs Options
Product Options
Image Options
Effect Options
Advanced Options

Let’s look at the parameters in detail:

General Options

Enable Extensions – Allow to enable/disable the module.
Display Title – Allow to enable/disable the title.
Title – Enter the title of the module.
Target - Allow to display the target link in Same Window/ New Window/ Popup Window
Class Suffix – Allow uses to add suffix for class.
Show Type Loadmore Or Slider – to load more product in tab.
Column – Set the number of columns for devices:
- For devices have screen width from 1200px up to greater.
- For devices have screen width from 992px up to 1199px.
- For devices have screen width from 768px up to 991px.
- For devices have screen width from 480px up to 767px.
- For devices have screen width less than or equal 479px.

Source Options

Filter Type – Allow you to Type of Filter.
Select Category – Allow you to select Category. The SM Amazing Slideshow is added for showing product
Category Preload – Allow to preload category.
Child Category Products: Include or Exclude Products from Child Categories.
Category Depth: Allow to select the number of child category levels to return.
Featured Products: Allow to Show/Hide/Only Featured Products.
Product Field to Order By: Set Product Field to Order By.
Ordering Direction: Allow to order ascending/descending direction.
Product Limitation: Allow to set product limitation.

Tabs Options

Tab All Display – Allow you display all tabs or NOT.
Category title max length – Allow to set the max length of title.
Categories Order By – Set Categories Order By: Name/Position/Random.
Categories Ordering Direction – Allow to order ASC(ascending)/ DESC(descending) direction.
Display Icon – Allow to display icon or NOT.
Order to Get – Allow to order to get image with options such as category_image, category_thumbnail, category_description.
Resize – Allow you resize category image or NOT.
Image Width – Allow to set image width.
Image Height – Allow to set image height.
Background Color: Allow to set background color.
Placeholder: If items do not have image, it will get image nophoto.

Products Options
Product Title

Display – Allow to display title of product OR not.
Max Length – Allow to set the max length of title.

Product Description

Display – Allow to display title of description OR not.
Max Length – Allow to set the max length of description.

Others

Display Price – Allow to display price OR not.
Display Reviews Summary – Allow to display reviews summary OR not.
Display Add To Cart – Allow to display Add To Cart OR not.
Display Add Wishlist – Allow to display Wishlist OR not.
Display Add Compare – Allow to display Add Compare OR not.
Display Readmore Link – Allow to display Readmore link OR not.
Readmore Text – Allow to input name of Readmore text. For example: Details.

Image Options
Get Image from Product Image

Get Image from Product Image – Allow to display image of product or NOT.

Get Image from Product Description

Get Image from Product Description – Allow to display Product Description or NOT.
Order to Get – Allow to order to get image with options such as “product_image, product_description”.
Resize – Allow you resize product image or NOT.
Image Width – Allow to set image width.
Image Height – Allow to set image height.
Background Color: Allow to set background color.
Image Replacement: Only when the product has no image, the module will take photos from placeholder to replace.

Effect Options

Effect – Allow to select effect.
Speed – Allow to set speed of slide.
Interval – Allow to set interval timer.

Config When Type Module is Slider

Display Navigation – Allow to Display Navigation OR Not.
Display Loop – Allow to Display to Loop OR Not.
Margin Item – Allow to set margin of the image.
Slide By – Allow to choose the number of products displayed when clicking “Next” button.
Auto Play – Allow you to set for slideshow auto play OR NOT.
Pause On Hover: Allow to Pause effects when users hover Or not.
Auto Play Speed: Allow to set speed of timer (larger = slower).
Navigation Speed: Allow to set the speed of Navigation.
Start Position Item: Allow to choose the first item by position number.
Mouse Drag: Allow to Enable/Disable Mouse Drag.
Touch Drag: Allow to Enable/Disable Touch Drag.

Advanced Options

Pre-text – The content to show at the top of module.
Post-text – The content to show at the end of module.
Caching – Allow to choose to cache the content of module.
Cache Time – Allow to choose the time (in seconds) before the module is recached.

4SUPPORT

↧

2.1 Quickstart Installation:

2.2 Manual Installation

2.3 Theme Setting

2.4 Blog

Configure Blog

3.1 Page Configuration

3.2 Configure Megamenu

3.2.1 Horizontal Megamenu:

3.2.2 Vertical Megamenu:

3.3 Configure Extensions

3.4 Configure Static Blocks

Static Block: Maxshop – About Footer

Static Block: Maxshop – Account Footer

Static Block: Maxshop – Bottom Services

Static Block: Maxshop – Brand

Static Block: Maxshop – Brand Slider

Static Block: Maxshop – Description Footer

Static Block: Maxshop – FAQs

Static Block: Maxshop – Header Slider

Static Block: Maxshop – Header V5 – Vertical Config

Static Block: Maxshop – Hotline

Static Block: Maxshop – Infomation Footer

Static Block: Maxshop – Slider Testimonial

Static Block: Maxshop – Static Image Home Right

Static Block: Maxshop – Static Banner Right Home V5

Static Block: Maxshop – Static Banner Right

Static Block: Maxshop – Top Static Image

Static Block: Maxshop – Testimonial Home V5

3.5 How To Edit Copyright in Admin Panel

3.6 How To Customize the Social symbols in admin panel

3.7 Customize HTML

TOP-LINK

2.1 Quickstart Installation:

2.2 Manual Installation

2.3 Theme Setting

2.4 Blog

Configure Blog

3.1 Page Configuration

3.2 Configure Megamenu

3.2.1 Horizontal Megamenu:

3.2.2 Vertical Megamenu:

3.3 Configure Extensions

3.4 Configure Static Blocks

Static Block: static-image-2

Static Block: static-1f-layout1

Static Block: image-static-sidebar

Static Block: static-2f-layout1

Static Block: testimonials-layout1

Static Block: static-3f-layout1

Static Block: static-image-1

Static Block: policyshop-layout1

Static Block: static-4f-layout1

Static Block: ft-contact-us

Static Block: ft-information

Static Block: ft-opentime

Static Block: payment-footer

Static Block: links-pagedeals

Static Block: policy-shop2

Static Block: banner-home1

Static Block: pretext-mobiles

Static Block: brand-basicproduct2

Static Block: banner-home2

Static Block: pretext-gift

Static Block: banner-home3

Static Block: pretext-fashion

Static Block: banner-home4

Static Block: pretext-furniture

Static Block: banner-home5

Static Block: brand-slider-home2

Static Block: message-footer2

Static Block: static-image-1-index3

Static Block: static-image-2-index3

Static Block: static-image-3-index3

Static Block: policy-shop4

Static Block: static-image-1-index4

Static Block: static-testimonials-index4

Static Block: static-image-1-index5

Static Block: static-image-2-index5

Static Block: static-imgcategory-index5

3.5 How To Edit Copyright in Admin Panel