© SNSTheme.com
Demo

SNS Simen
Responsive eCommerce Bootstrap Template

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please contact us via comment on ThemeForest or create a topic to our forum: http://snstheme.com/forums/. Thanks so much!

  • Created: 03 February 2016
  • By: SNSTheme.Com
  • Current Package Version is 1.0

1. Template Features

HTML5

CSS3

Bootstrap 3

Less

2. Install Instructions

2.1. Package structure

When you download theme from our store and unzip, you will be got full of main files for theme installation. They're:

  1. Documentation : contains userguide
  2. sns_simen.zip : contains the HTML, CSS, Javascript files for template
  3. PSD : contains all source files of the theme

2.2. Template Installation

Extract sns_simen.zip file to your folder. At your folder you can open the template

3. File Structure

After extract sns_simen.zip file to your folder you will find following folder structure:

Folder Description
/ Contains all html files and following folders
/bootstrap Contains all assets of bootstrap framework
/css Contains all compiled css files including the styles and minified versions
/fonts Contains all the not imported fonts
/images Contains all images the template is using
/js Contains the template JavaScript file and additional plugins
/less Contains all UIkit theme LESS files

4. HTML Markup

This template is based on the Bootstrap Framework and includes all components provided by Bootstrap. For more information about Bootstrap you can check here.

Every HTML site follows the same basic markup structure. The following code gives you an example:

<!DOCTYPE html>
<html>
    <!-- Meta tags, CSS and scripts references -->
    <head>
        ...
    </head>
    <body>
        <!-- HEADER -->
        <div id="sns_header" class="wrap">
            <!-- Header Top -->
            <div class="sns_header_top">
               ...
            </div>
            <!-- Header Logo -->
            <div id="sns_header_logo">
               ...
            </div>
            <!-- Menu -->
            <div id="sns_menu">
               ...
            </div>
        </div>
        <!-- END HEADER -->
        <!-- SLIDESHOW -->
        <div id="sns_slideshow" class="wrap">
            ...
        </div>
        <!-- END SLIDESHOW -->
        <!-- CONTENT -->
        <div id="sns_content" class="wrap layout-m">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 col-main" id="sns_main">
                        ...
                    </div>
                </div>
            </div>
        </div>
        <!-- END CONTENT -->
        <!-- PARTNETRS -->
        <div id="sns_partners" class="wrap">
            ...
        </div>
        <!-- END PARTNETRS -->
        <!-- FOOTER -->
        <div id="sns_footer" class="footer_style vesion2 wrap">
            ...
        </div>
        <!-- END FOOTER -->
    </body>
</html>

5. CSS and LESS CSS

All css files include in the <head> tag. While css/style.css file is compile from css/style.less file


<head>
    ...
    <!-- Style Sheet -->
    <link rel="stylesheet" type="text/css" href="font/font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="js/owl-carousel/owl.carousel.css">
    <link rel="stylesheet" href="js/owl-carousel/owl.theme.css">
    ...
</head>

6. Javascript

All js files include before the </body> end tag


	...
	<div>
        <!-- Scripts -->
        <script src="js/jquery-1.9.1.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script src="js/less.min.js"></script>
        <script src="js/owl-carousel/owl.carousel.min.js"></script>
        <script src="js/sns-extend.js"></script>
        <script src="js/custom.js"></script>
    </body>
</html>

7. Customize

Logo


 <!-- Header Logo -->
<div id="sns_header_logo">
    <div class="container">
        <div class="container_in">
            <div class="row">
                <h1 id="logo" class="responsv col-md-3">
                    <a href="index.html" title="Magento Commerce">
                     <img alt="" src="images/logo.jpg"> 
                    </a>
                </h1>
                ...

Main menu

To change the navigation you need to change it within the main menu(#sns_custommenu) and within the mobile offcanvas navigation(#sns_mommenu).


<!-- Menu -->
<div id="sns_menu">
    <div class="visible-md visible-lg" id="sns_custommenu">
        ...
    </div>
    <div class="menu-offcanvas hidden-md hidden-lg" id="sns_mommenu">
        ...
    </div>
</div>

Conclusion

We have done a ton of work to make our template very easy in configuring, updating and customization, please rate it (on the downloads page). Good mark will be appreciated.

Thank you,
SNS Group