© Arrowhitech JSC 2015.

Overview

Molly 2 Documentation v2.1

ArrowHiTech Jsc has achieved more than 6 years of experience working on Magento commerce and completed 2000+ Magento projects so far. Thanks to our rich experience in the realm, our proficient team of Magento developers and managers have designed and developed a lot of useful extensions exploiting great features of Magento.

Version: 1.7+
Author: Magesolution.

Install Magento

If you haven't got a Magento website yet, you will have to install a copy of Magento Community Edition open source e-commerce web application before using Molly Responsive Magento theme.

If you already have installed Magento you can skip this section

To install Magento, follow these steps:

Check if your server is compatible with Magento 2

Operating systems (Linux x86-64)

Linux distributions such as RedHat Enterprise Linux (RHEL), CentOS, Ubuntu, Debian, and so on

Composer (latest stable version)

Composer is required for developers who wish to contribute to the Magento 2 codebase or anyone who wishes to develop Magento extensions

Web servers

Database

MySQL 5.6 (Oracle or Percona)

PHP

PHP documentation: CentOS, Ubuntu

Required PHP extensions:

PHP OPcache

We strongly recommend you verify the PHP OPcache is enabled for performance reasons. The OPcache is enabled in many PHP distributions. To verify if it is installed, see our PHP documentation for CentOS or Ubuntu.

If you must install it separately, see the PHP OPcache documentation.

PHP settings

We recommend particular PHP configuration settings, such as memory_limit, that can avoid common problems when using Magento.

For more information, see our recommendations for CentOS and Ubuntu.

SSL

Mail server

Mail Transfer Agent (MTA) or an SMTP server

Magento can utilize the following technologies:

Optional but recommended:

php_xdebug2.2.0 or later (development environments only; can have an adverse effect on performance)

There is a known issue with xdebug that can affect Magento installations or access to the storefront or Magento Admin after installation.

PHPUnit (as a command-line tool) 4.1 or later

Download Magento 2

You can download magento 2 here: https://www.magentocommerce.com/download. If you want to use sample data please download "Full Release with Sample Data (ZIP with sample data)" package, if not please download "Full Release (ZIP with no sample data)" package

Transfer the Magento archive to your server

To transfer the Magento software archive to your server:

Extract the software on your server

Log in to your Magento server as, or switch to, the Magento file system owner and extract the software package in the web server docroot using one of the following commands:

File format Command to extract
.tar.gz tar zxf <filename>
.zip unzip <filename>
.tar.bz2 tar jxf <filename>

The Magento software extracts to the directory you created. After the file has extracted, either delete the Magento archive or move it to another directory.

Set file system ownership and permissions

This topic discusses how to set read-write permissions for the web server group before you install the Magento software. This is necessary so the Setup Wizard or command line can write files to the Magento file system.

The procedure you use is different, depending on whether you use shared hosting and have one user or if you use a private server and have two users.

If you're using a Magento version earlier than 2.0.6, see Appendix—Magento file system ownership and appendix (legacy) instead.

Running the Setup Wizard

The Setup Wizard is a multi-page wizard that enables you to go back and forward one page at a time. You cannot skip pages, and you must enter all required information on every page before you can proceed to the next page.

In the event of errors, you can run the installer again or you can return to a previous page to fix errors on that page.

Getting started

To install the Magento software using the Setup Wizard:

Finish

When your Magento installation is completed successfully you can start theme installation procedure.

1. Install Theme

1.1 Upload Pack

Using a FTP client to upload content of "Upload" folder to the root folder on your Web Server (usually named public_html).


1.2 Refresh Cache

Go to System -> Cache management. Select all, choose refresh action and submit.


1.3 Enable Module and Deploy theme

1.4 Install Theme

Go to MGS -> Theme Setting

At Install Theme section, you can see a button call "Install Molly theme", click to this button





1.5 Import Home Page

Go to MGS -> Theme Setting [Import]

Click to "Molly", you can see all homepages with thumbnail. Click to button to import homepage as you want, if you want to import homepage for special store view, please switch to store view first




1.5 Set Theme

Go to Stores -> Configuraton -> Design [General section]

At Design Theme, choose "Molly" theme, Save config


2. Install Full Demo

To import full demo, first, you need install Magento, install theme (Please read Install Magento and Install Theme) then download database and media of the theme:

Media: https://www.dropbox.com/s/8qg0j4kbkz55j5n/media.zip?dl=0

Database: https://www.dropbox.com/s/cfn7uca2mdb4x6i/molly.sql.zip?dl=0



After download sql file and media file, please import sql file you have downloaded to your phpmyadmin:

Note: In some case, you will have to run command upgrade:
bin/magento setup:upgrade ( or php bin/magento setup:upgrade if the first command not work )

3. Add Content To Homepage

3.1 Change Header Version

1. Go go admin MGS -> Theme Setting -> Select store view you want to use. 2. Choose Header version.

3.2 Edit Home Page

Go to Back-End -> Menu -> Content -> Pages -> Select CMS page as Homepage -> Import code or edit code



3.3 Add Static Block To Homepage

Import with code

{{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="static_block_identifier"}}

3.4 Add owl carousel slider

You can download this video to create revolution slide by yourself
http://www.mediafire.com/download/e91f40fd4ydqxct/owl-slider.mp4
If you choose use owl carousel slider.
First you create a static block with the content as images that you want to use for slider. You should add "class='img-responsive'" as attribute of img tag:
Example: <img class="img-responsive" src="{{media url="wysiwyg/home_3_owl_img_1.jpg"}}" alt="" /> Then you go to MGS -> Theme Setting -> Banner Slider section and fill identifier of static block that you just created to "Static Block Identifier" field.
Continue you go to CONTENT -> Pages and add slider to homepage you want by use widget:



3.5 Add testimonial

First you go to admin MGS -> Manage Items ( under Testimonial ) to create testimonial you want.
Then you go to CONTENT -> Pages and edit homepage you want to use then add the code follow:
{{block class="MGS\Testimonial\Block\Testimonial" testimonials_count="3" row="1" custom_class="testimonial-slide" nav="true" dots="true" autoplay="false" template="slide.phtml"}}

3.6 Add promobanners

First you go to admin MGS -> Manage Banners ( under Promo Banners ) to create promobanner you want.
Then you go to CONTENT -> Pages and edit homepage then you can add promobanner to homepage by using widget



3.7 Add brand list

First you go to admin MGS -> Configuration ( under Shop By Brand ) to config for brand.
Then you go to admin MGS -> Manage Brands ( under Shop By Brand ) to create the brand you want.
Continue you go to CONTENT -> Pages and edit homepage then you can add brand list to homepage by using widget



3.8 Add portfolio

First you go to admin MGS -> Portfolio Items ( under Portfolio ) to create portfolio you want.
Continue you go to CONTENT -> Pages and edit homepage then add the code follow:

{{block class="MGS\Portfolio\Block\Portfolio" title="Our Portfolio" portfolio_count="8" per_row="4" custom_class="abc" note_text="We work with Love & Passion!" template="widget.phtml"}}

3.9 Add blog

First you go to admin MGS -> Configuration ( under Blog ) to config setting for blog.
Then you go to admin MGS -> Manage Posts ( under Blog ) to create blogs you want.
Continue you go to CONTENT -> Pages and edit homepage then you can add brand list to homepage by using widget



4. Molly Home Page Setup

Note: To change version homepage for your store view, you make follow: Go to admin Stores -> Configuration then make follow below:
Last click "Save Config" button.

4.1 Home page 1

All content in cms page of homepage 1 is covered by: <div class="home1"> <div class="container"> </div> </div>

Block 1: Vertical Menu

1. Go to admin content -> MGS -> Megamenu -> Click Add Menu.
2. Create new Vertical Menu
3. Click Save 4. On list menu in your site -> Coppy code on row "Code to add to Static blocks" of your menu. 5. Menu -> Content -> Block -> Add new Block

Block 2: 3 service box block

Create static block with code:

<div class="col-md-4 col-sm-4 col-xs-12"> <div class="service-inline"><span class="icon pe-7s-box2">&nbsp;</span> <h5 class="title">FREE SHIPPING ON ALL ORDRES</h5> <p class="content">Get Free Shipping on all orders over $75 and free returns to our UK returns centre! Items are dispatched from the US and will arrive in 5-8 days.</p> </div> </div> <div class="col-md-4 col-sm-4 col-xs-12"> <div class="service-inline"><span class="icon pe-7s-wallet">&nbsp;</span> <h5 class="title">AMAZING CUSTOMER SERVICE</h5> <p class="content">Get Free Shipping on all orders over $75 and free returns to our UK returns centre! Items are dispatched from the US and will arrive in 5-8 days.</p> </div> </div> <div class="col-md-4 col-sm-4 col-xs-12"> <div class="service-inline"><span class="icon pe-7s-delete-user">&nbsp;</span> <h5 class="title">NO CUSTOMS OR DUTY FEES</h5> <p class="content">Get Free Shipping on all orders over $75 and free returns to our UK returns centre! Items are dispatched from the US and will arrive in 5-8 days.</p> </div> </div>

Add static block to cms page as homepage

Block 3: New Products of Categories Block

Insert this code to the homepage follow Owl slider

{{block class="MGS\Mpanel\Block\Products\Category\NewProducts" title="NEW ARRIVALS" category_ids="4,5,6" products_count="8" per_row="4" custom_class="tabs-colon" nav="true" dots="false" autoplay="0" note_text="Trending Fashion In This Season" template="products/category/tabs-slider-new.phtml}} Custom tabs

Block 4: Shop By Categories Static Block (Horizontal vs Vertical)

Create static block with code:

<div class="promo-static padding-5"> <div class="title-center"> <h3 class="heading"><span>SHOP BY CATEGORIES</span></h3> <div class="text-desc"><span>Trending Fashion In This Season</span></div> </div> <div class="row categories-landding"> <div class="col-md-6 col-sm-12 col-xs-12"> <div class="row row-pd5"> <div class="col-md-6 col-sm-6 col-xs-12 hidden-xs"> <div class="cate-content vertical"><a href="#"><img class="img-responsive" src="{{media url="wysiwyg/categories_1_1.jpg"}}" alt="" /></a> <div class="text"> <h2 class="cate-name">Fashion</h2> <p class="text-desc">(15 products)</p> </div> </div> </div> <div class="col-md-6 col-sm-6 col-xs-12 hidden-xs"> <div class="cate-content vertical"><a href="#"><img class="img-responsive" src="{{media url="wysiwyg/categories_1_2.jpg"}}" alt="" /></a> <div class="text"> <h2 class="cate-name">Interior</h2> <p class="text-desc">(23 products)</p> </div> </div> </div> </div> </div> <div class="col-md-6 col-sm-12 col-xs-12"> <div class="cate-content horizontal"><a href="#"><img class="img-responsive" src="{{media url="wysiwyg/categories_1_4.jpg"}}" alt="" /></a> <div class="text"> <h2 class="cate-name">Accessories<span class="text-desc">&nbsp;(9 products)</span></h2> </div> </div> <div class="cate-content horizontal"><a href="#"><img class="img-responsive" src="{{media url="wysiwyg/categories_1_3.jpg"}}" alt="" /></a> <div class="text"> <h2 class="cate-name">Office<span class="text-desc">&nbsp;(20 products)</span></h2> </div> </div> </div> </div> </div>

Add static block to cms page as homepage

Block 5: Banner "Do you love us?"

Create static block with code:

<div class="promo-banner hidden-xs"><a><img class="img-responsive" src="http://magesolution.com/molly/media/promobanners/banner_home_2.jpg" alt="Molly Banner Buy Theme" /></a> <div class="text-container text-right"> <div class="text-hover"><span class="h1 text-desc" style="font-weight: 300;"> <span style="font-style: normal; color: #72584b;">Do You Love Us?</span> <span style="color: #444444;">Puschase This Theme!</span> </span> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu pulvinar massa.</p> </div> <div class="view-more"><button class="btn btn-primary btn-lg btn-promo-banner" style="background-color: #a0522d; border-color: #A0522D;" onclick="setLocation('')"><span>Purchase</span></button></div> </div> </div>

Add static block to cms page as homepage

Block 5: Blog Update

Create static block with code:

<div class="title-center"> <h3 class="heading"><span>BLOG UPDATES</span></h3> <div class="text-desc"><span>Trending Fashion In This Season</span></div> </div> <div class="padding30">&nbsp;</div> <div class="text-center"> <div class="widget-latest-post"> <div class="row"> <div id="latest-post-carousel" class="latest-post-carousel"> <div class="item blog-view-container col-md-6 col-sm-6 col-xs-12"> <div class="latest-post-img"><a class="blog_link_img" href="#"> <img class="img-responsive" src="http://magesolution.com/molly/media/blog/blog_thumb_tl2_9.jpg" alt="" /> </a> <a class="read-more" href="#"><span class="fa fa-search">&nbsp;</span>Read more</a> <div class="day-desc"><span class="day">14</span> <span class="month">Dec</span></div> </div> <div class="latest-post-decs"> <div class="latest-name"><a href="http://magesolution.com/molly/blog/another-post-with-gallery/">Another post with gallery</a></div> <div class="latest-date"> <div class="post-info text-desc"><span class="user-author">Justin Nguyen</span> <span><a class="comments" href="#">1 Comment</a></span></div> </div> <p class="short-content">Cras ut magna quis metus tristique vulputate. Ut a sapien scelerisque, fermentum lorem a, aliquet mi. Ut lobortis lorem nisl, vel euismod ligula or...</p> </div> </div> <div class="item blog-view-container col-md-6 col-sm-6 col-xs-12"> <div class="latest-post-img"><a class="blog_link_img" href="#"> <img class="img-responsive" src="http://magesolution.com/molly/media/blog/blog_thumb_tl2_1.jpg" alt="" /> </a> <a class="read-more" href="http://magesolution.com/molly/blog/another-post-with-gallery1/"><span class="fa fa-search">&nbsp;</span>Read more</a> <div class="day-desc"><span class="day">14</span> <span class="month">Dec</span></div> </div> <div class="latest-post-decs"> <div class="latest-name"><a href="#">Another post with gallery</a></div> <div class="latest-date"> <div class="post-info text-desc"><span class="user-author">Justin Nguyen</span> <span><a class="comments" href="#">4 Comments</a></span></div> </div> <p class="short-content">Cras ut magna quis metus tristique vulputate. Ut a sapien scelerisque, fermentum lorem a, aliquet mi. Ut lobortis lorem nisl, vel euismod ligula or...</p> </div> </div> </div> </div> </div> </div>

Add static block to cms page as homepage

Block 6: Newsletter

Create static block with code:

<div class="col-md-6 col-sm-12 col-xs-12 no-padding"> <div class="newletter-center"> <div class="text"> <h3 class="heading"><span>NEWSLETTER</span></h3> <p>Sign up to receive the coupon 15% off for your first purchase via email and get informations about bicycle.</p> </div> {{block class="Magento\Newsletter\Block\Subscribe" template="subscribe.phtml"}} <br /> <p class="text-desc">*Discount applies only to orders over $100</p> </div> </div>

Add static block to cms page as homepage

Block 7: Banner (right newsletter)

Create static block with code:

<div class="promo-banner col-md-6 col-sm-12 col-xs-12 no-padding"><a><img class="img-responsive" src="http://magesolution.com/molly/media/promobanners/banner_l_s.jpg" alt="Molly Banner Right Newsletter Center" /></a> <div class="text-container text-right"> <div class="text-hover"><span class="h1" style="font-size: 50px; color: #fff;">SALE OFF</span> <span class="h1" style="font-size: 50px; color: #fff;">UP TO <span style="color: #000;">50%</span></span> <p style="font-size: 20px; font-weight: 900; color: #fff;">SUMMER FINAL SALE OFF</p> </div> </div> </div>

Add static block to cms page as homepage

Block 8: On Sale

Step 1: Create Sale Attribute

Go to Back-End -> Menu -> Store -> Product -> Add new attribute -> Add sale attribute (Yes/No)

Step 2: Set Attribute

Go to Back-End -> Menu -> Store -> Attribute Set -> Select Groups -> Add sale attribute -> drag the attributes "Sale" from 'Unassigned Attributes' to 'Groups'


Step 3: Reindex data

If you have save attribute please overlook step 1,2 and 3

Step 4: Update products you want to show as sale product with attribute sale

Final: Add code to cms home page

<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">{{block class="MGS\Mpanel\Block\Products\Attributes" attribute="sale" title="On Sale" products_count="3" custom_class="attribute-slide" template="products/list.phtml"}}</div> Custom Block list product

Block 9: Featured

Follow example sale block with attribute sale

Block 10: New Product

Follow example sale block with attribute sale

4.2 Home page 2

All content in cms page of homepage 5 is covered by: <div class="home2"> </div>

Block 1: New Products of Categories Block

Insert this code to the homepage follow revolution

<div class="container"> <div class="row">{{block class="MGS\Mpanel\Block\Products\Category\NewProducts" title="NEW ARRIVALS" category_ids="4,5,6" products_count="8" per_row="4" custom_class="tabs-colon" nav="true" dots="false" autoplay="0" note_text="Trending Fashion In This Season" template="products/category/tabs-slider-new.phtml}}</div> </div> Custom tabs

Block 2: Shop by categories

Create static block with code:

<div class="promo-static padding-5"> <div class="title-inline"> <h3 class="heading"><span>SHOP BY CATEGORIES</span></h3> <div class="text-desc"><span>Trending Fashion In This Season</span></div> </div> <div class="row categories-landding"> <div class="cate-content horizontal col-sm-6 col-xs-12"><a href="#"><img class="img-responsive" src="{{media url="wysiwyg/shop_by_cate_home1_1.jpg"}}" alt="" /></a> <div class="text"> <h2 class="cate-name">Fashion <span class="text-desc">(15 products)</span></h2> </div> </div> <div class="cate-content horizontal col-sm-6 col-xs-12"><a href="#"><img class="img-responsive" src="{{media url="wysiwyg/shop_by_cate_home1_2.jpg"}}" alt="" /></a> <div class="text"> <h2 class="cate-name">Interior <span class="text-desc">(9 products)</span></h2> </div> </div> <div class="cate-content horizontal col-sm-6 col-xs-12"><a href="#"><img class="img-responsive" src="{{media url="wysiwyg/shop_by_cate_home1_3.jpg"}}" alt="" /></a> <div class="text"> <h2 class="cate-name">Office <span class="text-desc">(25 products)</span></h2> </div> </div> <div class="cate-content horizontal col-sm-6 col-xs-12"><a href="#"><img class="img-responsive" src="{{media url="wysiwyg/shop_by_cate_home1_4.jpg"}}" alt="" /></a> <div class="text"> <h2 class="h1 cate-name">Accessories <span class="text-desc">(18 products)</span></h2> </div> </div> </div> </div> <p>Add static block to cms page as homepage</p> <div class="container"> <div class="row">{{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="CATEGORIE BLOCK IDENTIFIER"}}</div> </div>

Block 3: Service

Create static block with code:

<div class="col-md-4 col-sm-4 col-xs-12"> <div class="service-inline"><span class="icon pe-7s-box2">&nbsp;</span> <h5 class="title">FREE SHIPPING ON ALL ORDRES</h5> <p class="content">Get Free Shipping on all orders over $75 and free returns to our UK returns centre! Items are dispatched from the US and will arrive in 5-8 days.</p> </div> </div> <div class="col-md-4 col-sm-4 col-xs-12"> <div class="service-inline"><span class="icon pe-7s-wallet">&nbsp;</span> <h5 class="title">AMAZING CUSTOMER SERVICE</h5> <p class="content">Get Free Shipping on all orders over $75 and free returns to our UK returns centre! Items are dispatched from the US and will arrive in 5-8 days.</p> </div> </div> <div class="col-md-4 col-sm-4 col-xs-12"> <div class="service-inline"><span class="icon pe-7s-delete-user">&nbsp;</span> <h5 class="title">NO CUSTOMS OR DUTY FEES</h5> <p class="content">Get Free Shipping on all orders over $75 and free returns to our UK returns centre! Items are dispatched from the US and will arrive in 5-8 days.</p> </div> </div>

Add static block to cms page as homepage

<div class="service-static"> <div class="container"> <div class="row">{{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="SERVICE BLOCK IDENTIFIER"}}</div> </div> </div>

Block 4: Promo Banner

Create static block with code:

<div class="col-md-4 col-sm-6 col-xs-12 hidden-xs button-border-hover-colour-peru"> <div class="promo-banner"><a><img class="img-responsive" src="{{media url="wysiwyg/banner_home_1_1.jpg"}}" alt="" /></a> <div class="text-container text-right"> <div class="text-hover"> <p class="text-desc" style="font-size: 30px; font-style: italic; line-height: 23px; color: #fff;">brand-new</p> <span class="h1" style="color: #cd853f;">COLLECTION</span> <span class="h1" style="color: #fff;">2015</span></div> <div class="view-more"><button class="btn btn-primary btn-lg btn-promo-banner" onclick="setLocation('')"><span>Shop now</span></button></div> </div> </div> </div> <div class="col-md-4 col-sm-6 col-xs-12 hidden-xs button-border-hover-colour-salmon"> <div class="promo-banner"><a><img class="img-responsive" src="{{media url="wysiwyg/banner_home_1_2.jpg"}}" alt="" /></a> <div class="text-container text-right"> <div class="text-hover"><span class="h1" style="font-size: 48px; color: #f08080;">SALE OFF</span> <span class="h1">UP TO 30%</span></div> <div class="view-more"><button class="btn btn-primary btn-lg btn-promo-banner" onclick="setLocation('')"><span>Shop now</span></button></div> </div> </div> </div> <div class="col-md-4 col-sm-6 col-xs-12 hidden-xs"> <div class="promo-banner"><a><img class="img-responsive" src="{{media url="wysiwyg/banner_home_1_3.jpg"}}" alt="" /></a> <div class="text-container text-left">&nbsp;</div> </div> </div>

Add static block to cms page as homepage

<div class="service-static"> <div class="container"> <div class="row">{{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="SERVICE BLOCK IDENTIFIER"}}</div> </div> </div>

Block 5: On Sale

Step 1: Create Sale Attribute

Go to Back-End -> Menu -> Store -> Product -> Add new attribute -> Add sale attribute (Yes/No)

Step 2: Set Attribute

Go to Back-End -> Menu -> Store -> Attribute Set -> Select Groups -> Add sale attribute -> drag the attributes "Sale" from 'Unassigned Attributes' to 'Groups'


Step 3: Reindex data

If you have save attribute please overlook step 1,2 and 3

Step 4: Update products you want to show as sale product with attribute sale

Final: Add code to cms home page

<div class="text-left container-fluid">{{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="PROMO BANNER BLOCK IDENTIFIER"}}</div> Custom Block list product

Block 6: Featured

Follow example sale block with attribute featured

Block 7: New Product

Follow example sale block with attribute new

Block 8: Testimonials

Go to Back-End -> Menu -> Testimonials -> Manage Items -> Add item to add new or edit Testimonials

To show testimonials to homepage you can add code to cms home page

<div style="background-image: url('{{media url="wysiwyg/bg_testimonial_home1.jpg"}}'); background-repeat: no-repeat; background-size: cover; background-position: center center; padding-top: 75px; padding-bottom: 70px;">{{block class="MGS\Testimonial\Block\Testimonial" testimonials_count="3" row="1" custom_class="testimonial-slide" nav="true" dots="true" autoplay="false" template="slide.phtml"}}</div> Custom Testimonials

Block 9: Office Things

Block 10: New Collection 2015

Create static block with code:

<div class="new_collection" style="color: #f7f7f7;"><span class="h1 big-text">NEW COLLECTION 2015</span> <p class="text-desc">Fashion for Guys &amp; Ladies</p> <br /> <button class="btn btn-default btn-lg" onclick="setLocation('#')" type="button">VIEW COLLECTION</button></div>

Add static block to cms page as homepage

<div style="background-image: url('img-background'); background-repeat: no-repeat; background-size: cover; background-position: center center;"> {{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="NEW COLLECTION 2015 BLOCK IDENTIFIER"}} </div>

Office things

Add code to cms home page

<div class="container"> <div class="row">{{block class="MGS\Mpanel\Block\Products\Attributes" attribute="office_things" title="OFFICE THINGS" products_count="8" per_row="5" note_text="Lorem ipsum dolor sit amet" nav="true" dots="false" autoplay="false" template="products/slide/simple.phtml"}}</div> </div> Custom Testimonials

Block 9: Office Things

Block 10: New Collection 2015

Create static block with code:

4.3 Home page 3

All content in cms page of homepage 5 is covered by: <div class="home3"> <div class="container"> </div> </div>

Block 1: Slider Block

Follow step 3.4 Add owl carousel slider.

Static block code

<div><img class="img-responsive" src="{{media url="wysiwyg/home_3_owl_img_1.jpg"}}" alt="" /></div> <div><img class="img-responsive" src="{{media url="wysiwyg/home_3_owl_img_2.jpg"}}" alt="" /></div>

Block 2: Service Static Block

Create static block with code:

<div class="col-md-4 col-sm-4 col-xs-12"> <div class="service-inline"><span class="icon pe-7s-box2">&nbsp;</span> <h5 class="title">FREE SHIPPING ON ALL ORDRES</h5> <p class="content">Get Free Shipping on all orders over $75 and free returns to our UK returns centre! Items are dispatched from the US and will arrive in 5-8 days.</p> </div> </div> <div class="col-md-4 col-sm-4 col-xs-12"> <div class="service-inline"><span class="icon pe-7s-wallet">&nbsp;</span> <h5 class="title">AMAZING CUSTOMER SERVICE</h5> <p class="content">Get Free Shipping on all orders over $75 and free returns to our UK returns centre! Items are dispatched from the US and will arrive in 5-8 days.</p> </div> </div> <div class="col-md-4 col-sm-4 col-xs-12"> <div class="service-inline"><span class="icon pe-7s-delete-user">&nbsp;</span> <h5 class="title">NO CUSTOMS OR DUTY FEES</h5> <p class="content">Get Free Shipping on all orders over $75 and free returns to our UK returns centre! Items are dispatched from the US and will arrive in 5-8 days.</p> </div> </div>

Add static block to cms page as homepage

{{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="home2_molly_service"}}

Block 3: New Products of Categories Block

Insert this code to the homepage follow revolution

{{block class="MGS\Mpanel\Block\Products\Category\NewProducts" title="NEW ARRIVALS" category_ids="4,5,6" products_count="8" per_row="4" custom_class="tabs-colon" nav="true" dots="false" autoplay="0" note_text="Trending Fashion In This Season" template="products/category/tabs-slider-new.phtml}} Custom tabs

Block 4: Promo Static Block

Create static block with code:

<div class="promo-banner hidden-xs"><a><img class="img-responsive" src="http://magesolution.com/molly/media/promobanners/banner_home_2.jpg" alt="Molly Banner Buy Theme" /></a> <div class="text-container text-right"> <div class="text-hover"><span class="h1 text-desc" style="font-weight: 300;"> <span style="font-style: normal; color: #72584b;">Do You Love Us?</span> <span style="color: #444444;">Puschase This Theme!</span> </span> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu pulvinar massa.</p> </div> <div class="view-more"><button class="btn btn-primary btn-lg btn-promo-banner" style="background-color: #a0522d; border-color: #A0522D;" onclick="setLocation('')"><span>Purchase</span></button></div> </div> </div>

Add static block to cms page as homepage

{{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="home1_molly_promo"}}

Block 5: Counter Static Block

Create static block with code:

<div class="col-md-3 col-sm-6 col-xs-12"> <div class="number-count text-center first"><span class="icon pe-7s-smile">&nbsp;</span> <p class="text-desc">Happy Customers</p> <div class="counter">1503</div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="number-count text-center"><span class="icon pe-7s-diamond">&nbsp;</span> <p class="text-desc">Shoes Sold</p> <div class="counter">1109</div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="number-count text-center"><span class="icon pe-7s-coffee">&nbsp;</span> <p class="text-desc">Coffee Cups</p> <div class="counter">9193</div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="number-count text-center"><span class="icon pe-7s-chat">&nbsp;</span> <p class="text-desc">Facebook Fans</p> <div class="counter">1908</div> </div> </div>

Add static block to cms page as homepage

{{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="home3_molly_counter"}}

Block 6: On Sale

Step 1: Create Sale Attribute

Go to Back-End -> Menu -> Store -> Product -> Add new attribute -> Add sale attribute (Yes/No)

Step 2: Set Attribute

Go to Back-End -> Menu -> Store -> Attribute Set -> Select Groups -> Add sale attribute -> drag the attributes "Sale" from 'Unassigned Attributes' to 'Groups'


Step 3: Reindex data

If you have save attribute please overlook step 1,2 and 3

Step 4: Update products you want to show as sale product with attribute sale

Final: Add code to cms home page

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">{{block class="MGS\Mpanel\Block\Products\Attributes" attribute="sale" title="On Sale" products_count="3" custom_class="attribute-slide" template="products/list.phtml"}} </div> Custom Block list product

Block 7: Featured

Follow example sale block with attribute featured

Block 8: New Product

Follow example sale block with attribute new

4.4 Home page 4

All content in cms page of homepage 5 is covered by: <div class="home4"> </div>

Block 2: Service Static Block

Create static block with code:

<div class="col-md-4 col-sm-6 col-xs-12"> <div class="service-box"><span class="icon pe-7s-box2">&nbsp;</span> <h5 class="title" style="color: #444444;">FREE SHIPPING ON ALL ORDRES</h5> <a class="text-desc" href="#">More information here </a></div> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <div class="service-box"><span class="icon pe-7s-wallet">&nbsp;</span> <h5 class="title" style="color: #444444;">AMAZING CUSTOMER SERVICE</h5> <a class="text-desc" href="#">More information here </a></div> </div> <div class="col-md-4 col-sm-12 col-xs-12"> <div class="service-box"><span class="icon pe-7s-delete-user">&nbsp;</span> <h5 class="title" style="color: #444444;">NO CUSTOMS OR DUTY FEES</h5> <a class="text-desc" href="#">More information here </a></div> </div>

Add static block to cms page as homepage

<div class="container"> <div class="row">{{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="home1_molly_service"}}</div> </div>

Block 3: Shop By Categories

Create promo banner

Go to admin MGS -> Manage Banners then create 4 promobanners with "Effect" as "Effect 11" and content sequence is:

<h2 class="cate-name">SALE OFF 60% <span class="text-desc">(9 products)</span></h2> <h2 class="cate-name">Interior <span class="text-desc">(15 products)</span></h2> <h2 class="cate-name">Office <span class="text-desc">(25 products)</span></h2> <h2 class="cate-name">Fashion <span class="text-desc">(30 products)</span></h2>

After create promobanners successfully, create a static block and add 4 promobanners to static block:

<div class="promo-static padding-5"> <div class="title-inline"> <h3 class="heading"><span>SHOP BY CATEGORIES</span></h3> <div class="text-desc"><span>Trending Fashion In This Season</span></div> </div> <div class="row categories-landding"> <div class="cate-content horizontal col-sm-6 col-xs-12">{{widget type="MGS\Promobanners\Block\Widget\Banner" banner_id="1" template="banner.phtml"}}</div> <div class="cate-content horizontal col-sm-6 col-xs-12">{{widget type="MGS\Promobanners\Block\Widget\Banner" banner_id="2" template="banner.phtml"}}</div> <div class="cate-content horizontal col-sm-6 col-xs-12">{{widget type="MGS\Promobanners\Block\Widget\Banner" banner_id="3" template="banner.phtml"}}</div> <div class="cate-content horizontal col-sm-6 col-xs-12">{{widget type="MGS\Promobanners\Block\Widget\Banner" banner_id="4" template="banner.phtml"}}</div> </div> </div>

Continue add static block to cms page by code follow:

<div class="container">{{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="molly_shop_cate_promobanner"}}</div>

Block 4 and 5: Deals

You also create promobanner as above with content as blank and Effect 11 then add to cms page with code follow:

<div class="deals-special"> <div class="col-md-6 no-padding col-sm-6 col-xs-12">{{widget type="MGS\Promobanners\Block\Widget\Banner" banner_id="6" template="banner.phtml"}}</div> <div class="col-md-6 no-padding col-sm-6 col-xs-12">{{block class="MGS\Mpanel\Block\Products\Deals" title="Hot Deal Everyday" products_count="1" per_row="1" custom_class="" note_text="Get Free Shipping on all orders over $75 and free returns to our UK returns centre! " template="products/deals/special.phtml"}}</div> </div>

Block 6: New Products

Add the code follow to cms page:

<div class="container">{{block class="MGS\Mpanel\Block\Products\Grid\NewProducts" title="NEW PRODUCTS" products_count="8" custom_class="tabs-colon" note_text="Trending Fashion In This Season" template="products/grid/new.phtml}}</div>

Block 7 and 8: Newsletter

Create a static block with code follow:

<div class="col-md-6 col-sm-6 col-xs-12 no-padding"> <div class="newletter-center"> <div class="text"> <h3 class="heading"><span>NEWSLETTER</span></h3> <p>Sign up to receive the coupon 15% off for your first purchase via email and get informations about bicycle.</p> </div> {{block class="Magento\Newsletter\Block\Subscribe" template="subscribe.phtml"}} <br /> <p class="text-desc">*Discount applies only to orders over $100</p> </div> </div>

Create a promobanner as guide above with Effect 11 and content blank

After add the code follow to cms page:

<div class="newsletter-promo">{{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="home1_molly_newsletter"}} <div class="col-md-6 col-sm-6 col-xs-12 no-padding">{{widget type="MGS\Promobanners\Block\Widget\Banner" banner_id="5" template="banner.phtml"}}</div> </div>

Block 9: From our blog

Create a static block with code follow:

<div class="title-inline"> <h3 class="heading"><span>FROM OUR BLOG</span></h3> <div class="text-desc"><span>Lorem ipsum dolor sit amet</span></div> </div> <div class="padding30">&nbsp;</div> <div class="widget-latest-post"> <div class="row"> <div id="latest-post-carousel" class="latest-post-carousel"> <div class="item blog-view-container col-md-4 col-sm-4 col-xs-12"> <div class="latest-post-img"><a class="blog_link_img" href="#"><img class="img-responsive" src="{{media url="wysiwyg/blog_thumb_tl1_1.jpg"}}" alt="" /></a> <a class="read-more" href="#"><span class="fa fa-search">&nbsp;</span>Read more</a> <div class="day-desc"><span class="day">14</span> <span class="month">Dec</span></div> </div> <div class="latest-post-decs"> <div class="latest-name"><a href="#">Another post with gallery</a></div> <div class="latest-date"> <div class="post-info text-desc"><span class="user-author">Justin Nguyen</span> <span><a class="comments" href="#">1 Comment</a></span></div> </div> <p class="short-content">Cras ut magna quis metus tristique vulputate. Ut a sapien scelerisque, fermentum lorem a, aliquet mi. Ut lobortis lorem nisl, vel euismod ligula or...</p> </div> </div> <div class="item blog-view-container col-md-4 col-sm-4 col-xs-12"> <div class="latest-post-img"><a class="blog_link_img" href="#"><img class="img-responsive" src="{{media url="wysiwyg/blog_thumb_tl1_2.jpg"}}" alt="" /></a> <a class="read-more" href="#"><span class="fa fa-search">&nbsp;</span>Read more</a> <div class="day-desc"><span class="day">14</span> <span class="month">Dec</span></div> </div> <div class="latest-post-decs"> <div class="latest-name"><a href="#">Another post with gallery</a></div> <div class="latest-date"> <div class="post-info text-desc"><span class="user-author">Justin Nguyen</span> <span><a class="comments" href="#">1 Comment</a></span></div> </div> <p class="short-content">Cras ut magna quis metus tristique vulputate. Ut a sapien scelerisque, fermentum lorem a, aliquet mi. Ut lobortis lorem nisl, vel euismod ligula or...</p> </div> </div> <div class="item blog-view-container col-md-4 col-sm-4 col-xs-12"> <div class="latest-post-img"><a class="blog_link_img" href="#"><img class="img-responsive" src="{{media url="wysiwyg/blog_thumb_tl1_3.jpg"}}" alt="" /></a> <a class="read-more" href="#"><span class="fa fa-search">&nbsp;</span>Read more</a> <div class="day-desc"><span class="day">14</span> <span class="month">Dec</span></div> </div> <div class="latest-post-decs"> <div class="latest-name"><a href="#">Another post with gallery</a></div> <div class="latest-date"> <div class="post-info text-desc"><span class="user-author">Justin Nguyen</span> <span><a class="comments" href="#">4 Comments</a></span></div> </div> <p class="short-content">Cras ut magna quis metus tristique vulputate. Ut a sapien scelerisque, fermentum lorem a, aliquet mi. Ut lobortis lorem nisl, vel euismod ligula or...</p> </div> </div> </div> </div> </div>

Add the code follow to cms page:

<div class="container">{{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="home4_molly_post"}}</div>

Block 10: Brands

Create Brands:

Go to admin MGS -> Manage Brands then click to "Add New Brand" so that create your brand

Contine add the code follow to cms page:

<div class="container">{{widget type="MGS\Brand\Block\Widget\Brand" title="OUR CLIENTS" brand_ids="1,2,3,4,5,6" show_brand_name="0" view_as="owl_carousel" items="5" image_width="216" image_height="164" autoplay="1" stop_on_hover="1" navigation="1" template="widget/default.phtml"}}</div>

Block 11: Service Block

Create a static block with code follow:

<div class="col-md-3 col-sm-6 col-xs-12"> <div class="service-inline"> <span class="icon pe-7s-wallet">&nbsp;</span> <h5 class="title">MONEY GUARANTEE</h5> <p class="text-desc">30 days money guarantee!</p> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="service-inline"> <span class="icon pe-7s-magic-wand">&nbsp;</span> <h5 class="title">ONLINE SUPPORT</h5> <p class="text-desc">We support online 24/7</p> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="service-inline"> <span class="icon pe-7s-rocket">&nbsp;</span> <h5 class="title">PAYMENT SECURE</h5> <p class="text-desc">Secure all your payment</p> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="service-inline"> <span class="icon pe-7s-cloud-download">&nbsp;</span> <h5 class="title">UK FREE DELIVERY</h5> <p class="text-desc">Free on all orders over £99.99</p> </div> </div>

Then add the code follow to cms page:

<div class="service-static" style="background-color: #292929;"> <div class="container">{{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="home4_molly_service"}}</div> </div>

4.5 Home page 5

All content in cms page of homepage 5 is covered by: <div class="home5"></div>

Block 2: Home5 Molly Promo

Create 3 promobanner with code follow:

Promobanner 1: Promobanner 2: Promobanner 3:

Create a static block with code:

<div class="title-inline" style="padding-left: 12px; padding-right: 12px;"> <h3 class="heading"><span>FEATURED CATEGORIES</span></h3> <div class="text-desc"><span>Lorem ipsum dolor sit amet</span></div> </div> <div class="padding40">&nbsp;</div> <div class="col-md-4 col-sm-4 col-xs-12">{{widget type="MGS\Promobanners\Block\Widget\Banner" banner_id="banner-fashion" template="banner.phtml"}}</div> <div class="col-md-4 col-sm-4 col-xs-12">{{widget type="MGS\Promobanners\Block\Widget\Banner" banner_id="banner-interior" template="banner.phtml"}}</div> <div class="col-md-4 col-sm-4 col-xs-12">{{widget type="MGS\Promobanners\Block\Widget\Banner" banner_id="banner-office" template="banner.phtml"}}</div>

Add the code to cms page:

<div class="50">&nbsp;</div> <div class="container"> <div class="row">{{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="home5_molly_promo"}} </div> </div> </div>

Block 3: FEATURED PRODUCTS

First create a attribute with "attribute code" is "featured_product", this attribute has the "Catalog Input Type for Store Owner" field as "Yes/No" then select products "Featured Product" is yes.

Add to cms page by code follow:

<div class="padding60">&nbsp;</div> <div class="container">{{block class="MGS\Mpanel\Block\Products\Attributes" attribute="featured_product" title="FEATURED PRODUCTS" products_count="8" per_row="4" custom_class="attribute-slide" note_text="Lorem ipsum dolor sit amet" nav="true" dots="false" autoplay="false" template="products/slide/simple.phtml"}}</div>

Block 4: Promobanner

You also create promobanner as above with content as blank and Effect 10 then go to cms page and add this promobanner by add widget:

Block 5: Promobanner

You also create promobanner as above with:

Then add to cms page by widget.

Block 6: BACK IN STOCK

You also create a attribute similar as featured_product with attribute code is "back_in_stock" then you also select products which you want "back_in_stock" as "yes"

Then add the code follow to cms page:

<div class="container">{{block class="MGS\Mpanel\Block\Products\Attributes" attribute="back_in_stock" title="BACK IN STOCK" products_count="5" per_row="5" load_more="1" note_text="Lorem ipsum dolor sit amet" custom_class="custom-class" template="products/attribute.phtml"}}</div>

Block 7: Service Static Block

Create a static block with code follow:

<div class="col-md-3 col-sm-6 col-xs-12"> <div class="service-inline"> <span class="icon pe-7s-wallet">&nbsp;</span> <h5 class="title">MONEY GUARANTEE</h5> <p class="text-desc">30 days money guarantee!</p> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="service-inline"> <span class="icon pe-7s-magic-wand">&nbsp;</span> <h5 class="title">ONLINE SUPPORT</h5> <p class="text-desc">We support online 24/7</p> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="service-inline"> <span class="icon pe-7s-rocket">&nbsp;</span> <h5 class="title">PAYMENT SECURE</h5> <p class="text-desc">Secure all your payment</p> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="service-inline"> <span class="icon pe-7s-cloud-download">&nbsp;</span> <h5 class="title">UK FREE DELIVERY</h5> <p class="text-desc">Free on all orders over £99.99</p> </div> </div>

Add the code follow to cms page:

<div class="service-static" style="background-color: #292929;"> <div class="container">{{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="home4_molly_service"}}</div>

4.6 Home page Electronic



Section 1: Slider & Banner "Best Product in month"

Step 1: Create layout bootstrap. <div style="padding-top: 20px;"> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-12 hidden-sm hidden-xs">&nbsp;</div> <div class="col-lg-6 col-md-8 col-xs-12"> // Insert Widget Slider Here </div> <div class="col-lg-3 col-md-4 hidden-sm hidden-xs"> // Insert Widget Banner here </div> </div> </div> </div> Step 2: (Block 1: Slider) Create static block slider Step 3: (Block 1: Slider) Setting banner and add to home page with Widget "Slider MGS".
Please follow guide at 3.5 Add owl carousel slide or download video guide at here: Mediafire Link
Step 4: (Block 2: Promobanner Best Product in month) Create Promobanner.
Go to MGS -> Promo Banner -> Manage Banners -> Add Banner
Step 5: (Block 2: Promobanner Best Product in month) Use widget "MGS Promo Banner" insert banner to this position (review at step 1, you can see this position)

Section 2: Hot Deals + Banner "FINAL SALE OFF" + Categories product Smart phone

Step 1: Create layout bootstrap.
<div style="padding-top: 20px; padding-bottom: 30px;"> <div class="container"> <div class="row"> <div class="col-md-3 col-xs-12"> // Insert Hot Deals Here </div> <div class="col-md-9 col-sm-12 hidden-xs text-colour-white"> <div style="margin-bottom: 50px;"> // Insert Hot Banner "FINAL SALE OFF" Here </div> <div class="custom-electronic"> // Insert Categories product Smart phone Here </div> </div> </div> </div> </div> Step 2: (Block 3: HOT DEALS) Insert code to show deals
{{block class="MGS\Mpanel\Block\Products\Deals" title="Hot Deal Everyday" products_count="2" per_row="1" custom_class="" template="products/deals/sidebar.phtml"}} Step 3: (Block 4: "FINAL SALE OFF") Create Promobanner.
Go to MGS -> Promo Banner -> Manage Banners -> Add Banner
Step 4: (Block 4: "FINAL SALE OFF") Use widget "MGS Promo Banner" insert banner to this position (review at step 1, you can see this position)

Step 5: (Block 5: Categories product Smart phone) Insert code to show Categories product slider
{{block class="MGS\Mpanel\Block\Products\Attributes" attribute="smart_phone" title="SMARTPHONE" products_count="8" per_row="4" nav="true" dots="false" note_text="&nbsp;&nbsp;&nbsp;&nbsp;" autoplay="false" template="products/slide/simple.phtml"}}
Step 6: (Block 5: Categories product Smart phone) Create Product attribute "smart_phone", type Yes/No. Set product to show with value is "Yes".
Create product attribute video guide: Video Youtube

Section 3: Two Banner "Smart Phone Generation" & "Best Camera for you"

Step 1: Create layout bootstrap. <div style="margin-bottom: 31px;"> <div class="container"> <div class="row"> <div class="col-md-6 col-sm-6 col-xs-12" style="margin-bottom: 30px;"> // Banner "Smart Phone Generation" </div> <div class="col-md-6 col-sm-6 col-xs-12" style="margin-bottom: 30px;"> // Banner "Best Camera for you" </div> </div> </div> </div> Step 2: (Block 6: "Smart Phone Generation") Create Promobanner.
Go to MGS -> Promo Banner -> Manage Banners -> Add Banner
Step 3: (Block 6: "Smart Phone Generation") Use widget "MGS Promo Banner" insert banner to this position (review at step 1, you can see this position)

Step 4: (Block 7: "Best Camera for you") Create Promobanner.
Go to MGS -> Promo Banner -> Manage Banners -> Add Banner
Step 5: (Block 7: "Best Camera for you") Use widget "MGS Promo Banner" insert banner to this position (review at step 1, you can see this position)

Section 4: Laptop product slider

Step 1: Create layout bootstrap. <div class="container"> // Insert block product slider </div> Step 2: (Block 8: Laptop product slider) Insert code to show Categories product slider
{{block class="MGS\Mpanel\Block\Products\Attributes" attribute="lap_top" title="LAPTOP" products_count="8" per_row="5" nav="true" dots="false" note_text="Trending Fashion In This Season" autoplay="false" template="products/slide/simple.phtml"}}
Step 3: (Block 8: Laptop product slider) Create Product attribute "lap_top", type Yes/No. Set product to show with value is "Yes".
Create product attribute video guide: Video Youtube

Section 5: Tab Product

Step 1: Create layout bootstrap. <div class="container tab-electronic"> <div style="margin-bottom: 18px; margin-top: 25px;"> <div class="title-inline"> <h3 class="heading"><span>TOP SELLING</span></h3> <div class="text-desc"><span>Trending Fashion In This Season</span></div> </div> </div> // Static block tab menu : molly_tab_menu_product // Widget Tab product </div> Step 2: Insert Widget Tab Product
Click Button "Insert Widget..." -> Catalog Products List

Click Button "Insert Widget". Step 3: Create static block molly_tab_menu_product (Menu tab)
At step 2, After insert widget, Magento create for you a snippet code.
{{widget type="Magento\CatalogWidget\Block\Product\ProductsList" products_count="10" template="product/widget/content/grid_tab.phtml" conditions_encoded="a:2:[i:1;a:4:[s:4:`type`;s:50:`Magento|CatalogWidget|Model|Rule|Condition|Combine`;s:10:`aggregator`;s:3:`all`;s:5:`value`;s:1:`1`;s:9:`new_child`;s:0:``;]s:4:`1--1`;a:4:[s:4:`type`;s:50:`Magento|CatalogWidget|Model|Rule|Condition|Product`;s:9:`attribute`;s:12:`category_ids`;s:8:`operator`;s:2:`==`;s:5:`value`;s:38:`80, 81, 82, 83, 84, 85, 86, 87, 88, 89`;]]"}} You can see "`value`;s:38:`80, 81, 82, 83, 84, 85, 86, 87, 88, 89`;". This is list categories id to show on block. We use it to create tab product menu.

Create new static block follow code example <ul class="nav nav-tabs tab-product tab-electronic"> <li class="active"><a href="#panel-product-80" data-toggle="tab" data-number="1"> <span class="pe-7s-monitor">&nbsp;</span> <span>Computer</span> </a></li> <li><a href="#panel-product-81" data-toggle="tab" data-number="2"> <span class="pe-7s-phone">&nbsp;</span> <span>Mobiles</span> </a></li> <li><a href="#panel-product-82" data-toggle="tab" data-number="3"> <span class="pe-7s-camera">&nbsp;</span> <span>Camera</span> </a></li> <li><a href="#panel-product-83" data-toggle="tab" data-number="4"> <span class="pe-7s-browser">&nbsp;</span> <span>Tablet</span> </a></li> <li><a href="#panel-product-84" data-toggle="tab" data-number="5"> <span class="pe-7s-airplay">&nbsp;</span> <span>Aircon</span> </a></li> <li><a href="#panel-product-85" data-toggle="tab" data-number="6"> <span class="pe-7s-plug">&nbsp;</span> <span>Home</span> </a></li> <li><a href="#panel-product-86" data-toggle="tab" data-number="7"> <span class="pe-7s-lintern">&nbsp;</span> <span>Cameras</span> </a></li> <li><a href="#panel-product-87" data-toggle="tab" data-number="8"> <span class="pe-7s-wristwatch">&nbsp;</span> <span>Watch</span> </a></li> <li><a href="#panel-product-88" data-toggle="tab" data-number="9"> <span class="pe-7s-headphones">&nbsp;</span> <span>Headphone</span> </a></li> <li><a href="#panel-product-89" data-toggle="tab" data-number="10"> <span class="pe-7s-album">&nbsp;</span> <span>Album</span> </a></li> </ul> Step 4: Insert static block menu tab to content with Widget(Before Categories Grid tab)

Section 6: Brand

Step 1: Create layout bootstrap. <div class="owl-button-border" style="padding-bottom: 50px;"> <div class="container"> // Insert brand Here </div> </div> Step 2: Insert brand with Widget "MGS BRAND LIST". You can see guide at 3.8 Add brand list.

5. Static Block

5.1 Home2 Molly Title Logo

Edit static block molly_titlelogo

5.2 Molly social


5.3 Home2 Molly contact phone


5.4 Molly footer newsletter


5.5 Molly footer about


5.6 Molly footer info


5.7 Molly footer instagram


5.8 Molly footer contacts


5.9 Molly responsive nav


5.10 Share this Block


5.11 Custom Static Block Top


5.12 Custom Static Block Bottom


5.13 Custom Col Right Block


5.14 Contact Infomation Block


5.15 Newsletter Popup


6. Custom Style

To add custom style go to MGS -> Theme Setting -> Custom Style, at the 'Add Custom Style', you add below style to textarea field. .cms-noroute-index .page-wrapper > #maincontent.container { width: 100%; padding: 0; } .cms-noroute-index .footer { margin: 0; } .portfolio-category-view .breadcrumbs, .portfolio-index-view .breadcrumbs { background-image: url('http://magesolution.com/molly2/media/wysiwyg/bg_bredcrumb_1.jpg') }

7. Theme Settings

7.1 General Setting

Go go admin MGS -> General Setting





Show or hide customer navigation links




7.2 Theme Setting

Go go admin MGS -> Theme Setting



Options for background of pages, you can to use color code or images to set background



Options for fonts of page elements: default font, heading 1, heading 2, heading 3, heading 4, heading 5, heading 6, price, menu

We use google font for them.


Option allow you to add new font and add custom style for your pages (if you know how to use style sheet)

7.3 Color Setting

Go go admin MGS -> Color Setting


Set default color for theme



Set color for header sections



Color for background, text, links... of top links section



Set background for middle header content




Set color for top search elements




Set color for top cart elements




Set color for background, links of menu items




Set color for text, link, buttons of main content



8. How To

8.1 Setup Multi Languages

To setup multi languages, please see example here: http://magento.stackexchange.com/questions/98291/magento-2-different-languages-for-website/98307#98307

8.2 Setup Currency

To setup currency, you can go to Stores -> Configuration, choose Currency Setup tab. Set Allowed Currencies are the currency you want on your store.

Go to Stores -> Currency Rates, press import. Wait for the system to import currency exchange rate then press Save.

Go to System -> Cache Management and refresh the cache. Now you should see currency dropdown on the top left corner.




8.3 Enable Translate Inline

To enable translate inline for any store view, go to Stores -> Configuration, Click to Advanced tag on left menu, click to Developer

Switch to store view you want to translate at top of page.

At Translate Inline section, choose "Yes" for "Enabled for Storefront"



8.4 Create Store Locator

First you go to admin MGS -> Manage Stores ( under Store Locator ) to create store locator you want.

Then you created successfully stores locator of you, you can follow link: site_domain/storelocator

8.5 Setting Megamenu

Add new Megamenu items

From admin panel, go to Mage MGS -> Megamenu -> Manage Megamenu Items -> Click button "Add Megamenu Item"


Setting


Custom Setting