## Smart Elect Magento Theme (mag100226_2)

## Magento 2 Theme Installation Help - TemplateMela

Thank you for purchasing theme from TemplateMela. If you have any questions, please feel free to contact us via our support form https://www.templatemela.com/support. Thanks again for your purchase.

Website: www.templatemela.com
Support email: support@templatemela.com

## Installation

- Install Magento2 On Your server. Click Here For Step By step Guide For magento Installation.

- Copy the directories from "Theme Files (provided in to ZIP file) to your magento root Directory , so your theme path will be
  Theme Path:
  app/code/Megnor
  app/design/frontend/Megnor/mag100226_2

- Now to Disable the Cache
  open command line in root Folder of magento
  Run commands via ssh using putty or others.
  php bin/magento cache:disable

- To Activate Megnor Extensions
  open command line in folder root of magento
  run commands via ssh using putty or others
  php bin/magento setup:upgrade
  php bin/magento setup:di:compile

- Now For Generating Static CSS and JS
  open command line in folder root of magento
  run commands via ssh using putty or others
  php bin/magento setup:static-content:deploy

- Now get processing permition
  open command line in folder root of magento
  run commands via ssh using putty or others
  chmod -R 777 var pub

## Activate Theme

Now we have to set our Template from Admin panel
Method Under Admin Panel Go to Content > Configuration , click on Edit at Default Store View in Design Configuration table, select the theme(Megnor mag100226_2) within the dropdown list, click Save Config

## Homepage Setting

- You have to set Homepage Layout from Admin panel.

Goto Admin panel > Content > Pages > home (select home as URL Key).
Select Design from Tab, Select "1 columns" from Layout Drop Down.
<referenceContainer name="page.wrapper" > <container name="upper-block" before="main.content" > <block class="Magento\Cms\Block\Block" name="tm_slider"> <arguments> <argument name="block_id" xsi:type="string">tm_slider</argument> </arguments> </block> <block class="Magento\Cms\Block\Block" name="tm_easy_access"> <arguments> <argument name="block_id" xsi:type="string">tm_easy_access</argument> </arguments> </block> </container> </referenceContainer> <referenceContainer name="main"> <block class="Magento\Cms\Block\Block" name="subbanner_cms"> <arguments><argument name="block_id" xsi:type="string">tm_subbanner_cms</argument></arguments> </block> <block class="Magento\Cms\Block\Block" name="producttab_cms"> <arguments> <argument name="block_id" xsi:type="string">tm_product_tab</argument> </arguments> </block> <block class="Magento\Cms\Block\Block" name="sub_adbanner"> <arguments> <argument name="block_id" xsi:type="string">tm_sub_adbanner</argument> </arguments> </block> <block class="Magento\Cms\Block\Block" name="latest_product" > <arguments> <argument name="block_id" xsi:type="string">tm_latest_product</argument> </arguments> </block> <block class="Magento\Cms\Block\Block" name="advertise_banner_cms"> <arguments> <argument name="block_id" xsi:type="string">tm_advertise_banner_cms</argument> </arguments> </block> <block class="Magento\Cms\Block\Block" name="tm_special_cms"> <arguments> <argument name="block_id" xsi:type="string">tm_special_cms</argument> </arguments> </block> <block class="Magento\Cms\Block\Block" name="blog_cms"> <arguments> <argument name="block_id" xsi:type="string">tm_blog</argument> </arguments> </block> </referenceContainer>
and Under Content, Show/Hide Editor and in HTML write below code.
<div>&nbsp;</div>
and Click on "Save Page" Button.

## Static Block Settings

- You have to Create Below Static Block from Admin panel.

1) Create Static Block for Header Static CMS.
Goto Admin panel > Content > Blocks. Click on Add New Block Button and write below detail.
Block Title :- tm_header-staticlink_cms
Identifier :- tm_header-staticlink_cms
Content :- Click on this button and Add Below Code in HTML Content:
<div class="header-static"> <div><a href="#">Offer Zone</a></div> <div><a href="#">Track Order</a></div> <div><a href="#">Gift Card</a></div> </div> and Click on "Save Block" Button.
2) Create Static Block for Home Page Slider CMS.
Goto Admin panel > Content > Blocks. Click on Add New Block Button and write below detail.
Block Title :- tm_slider
Identifier :- tm_slider
Content :- Click on this button and Add Below Code in HTML Content:
<div class="flexslider"> <div id="spinner"></div> <ul class="slides"> <li><a href="#"><img src="{{view url=images/mainbanner1.jpg}}" alt="" /></a></li> <li><a href="#"><img src="{{view url=images/mainbanner2.jpg}}" alt="" /></a></li> </ul> </div> and Click on "Save Block" Button.
3) Create Static Block for Home Page Shipping CMS.
Goto Admin panel > Content > Blocks. Click on Add New Block Button and write below detail.
Block Title :- tm_Headerlink_CMS
Identifier :- tm_Headerlink_CMS
Content :- Click on this button and Add Below Code in HTML Content:
<div class="header_customlink"> <div class="customlink-inner"> <div class="headerlinks_inner"> <div class="headertoggle_img"></div> </div> <ul> <li><a href="{{store url=''}}">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="{{store url='contact'}}">Contact Us</a></li> <li><a href="{{store url='brand'}}">Brands</a></li> <li><a href="#">Returns</a></li> </ul> </div> </div> and Click on "Save Block" Button.
4) Create Static Block for Home Page Subbanner CMS.
Goto Admin panel > Content > Blocks. Click on Add New Block Button and write below detail.
Block Title :- tm_subbanner_cms
Identifier :- tm_subbanner_cms
Content :- Click on this button and Add Below Code in HTML Content:
<div class="tm_subbanner_cms"> <div class="subbanner-cms"> <div class="subbanner-outer"> <div class="subbanner1"> <div class="subbanner1-1 subbanner"> <div class="title">PC &amp; mobile</div> <ul class="sub-cat-list"> <li><a href="#">mobile battery</a></li> <li><a href="#">acer laptop</a></li> <li><a href="#">stationary items</a></li> <li><a href="#">computers</a></li> </ul> <div class="sub-view-all"><a href="#">View all</a></div> </div> <div class="sub-side-banner"><a href="#"><img class="img-respo" src="{{view url=images/subbanner-pro1.png}}" alt="Subbanner1" /></a></div> </div> </div> <div class="subbanner-outer"> <div class="subbanner2"> <div class="subbanner2-2 subbanner"> <div class="title">CCTV camera</div> <ul class="sub-cat-list"> <li><a href="#">mobile battery</a></li> <li><a href="#">acer laptop</a></li> <li><a href="#">stationary items</a></li> <li><a href="#">computers</a></li> </ul> <div class="sub-view-all"><a href="#">View all</a></div> </div> <div class="sub-side-banner"><a href="#"><img class="img-respo" src="{{view url=images/subbanner-pro2.png}}" alt="Subbanner1" /></a></div> </div> </div> <div class="subbanner-outer"> <div class="subbanner3"> <div class="subbanner3-3 subbanner"> <div class="title">headphone</div> <ul class="sub-cat-list"> <li><a href="#">mobile battery</a></li> <li><a href="#">acer laptop</a></li> <li><a href="#">stationary items</a></li> <li><a href="#">computers</a></li> </ul> <div class="sub-view-all"><a href="#">View all</a></div> </div> <div class="sub-side-banner"><a href="#"><img class="img-respo" src="{{view url=images/subbanner-pro3.png}}" alt="Subbanner1" /></a></div> </div> </div> </div> </div> and Click on "Save Block" Button.
5) Create Static Block for Latest Product CMS.
Goto Admin panel > Content > Blocks. Click on Add New Block Button and write below detail.
Block Title :- tm_latest_product
Identifier :- tm_latest_product
Content :- Click on this button and Add Below Code in HTML Content:
<div class="tm_latest_product">{{widget type="Magento\Catalog\Block\Product\Widget\NewWidget" display_type="new_products" products_count="10" template="product/widget/new/content/new_carousel.phtml"}}</div> and Click on "Save Block" Button.
6) Create Static Block for Advertisements CMS.
Goto Admin panel > Content > Blocks. Click on Add New Block Button and write below detail.
Block Title :- tm_advertise_banner_cms
Identifier :- tm_advertise_banner_cms
Content :- Click on this button and Add Below Code in HTML Content:
<div class="tm_advertise_banner_cms"> <div class="ad_banner"><a href="#"><img class="img-respo" src="{{view url=images/sub6.jpg}}" alt="" /></a></div> </div> and Click on "Save Block" Button.
7) Create Static Block for Blog CMS.
Goto Admin panel > Content > Blocks. Click on Add New Block Button and write below detail.
Block Title :- tm_blog
Identifier :- tm_blog
Content :- Click on this button and Add Below Code in HTML Content:
<div class="tm_blog"> <div class="blog"> <div class="blog_inner">{{widget type="Megnor\Blog\Block\Widget\Recent" title="Latest News" number_of_posts="7" template="Megnor_Blog::widget/list_home.phtml"}}</div> </div> </div> and Click on "Save Block" Button.
8) Create Static Block for Footer logo CMS.
Goto Admin panel > Content > Blocks. Click on Add New Block Button and write below detail.
Block Title :- tm_footer_logo
Identifier :- tm_footer_logo
Content :- Click on this button and Add Below Code in HTML Content:
<div class="footer-logo-img"><a href="#"><img class="img-respo" src="{{view url=images/footer-logo.png}}" alt="" /></a></div> <div class="footer-logo-desc"> <p>Lorem Ipsum has been the industry's standard my text ever since the 1500s, when annknown printer took a galley of it to matook a galley of ita type specimen book.</p> </div> <div class="social-icons"> <div class="social-heading">follow us</div> <ul class="social-content"> <li class="social-icon facebook"><a href="#"><span>facebook</span></a></li> <li class="social-icon twitter"><a href="#"><span>twitter</span></a></li> <li class="social-icon googleplus"><a href="#"><span>google plus</span></a></li> <li class="social-icon linkedin"><a href="#"><span>linkedin</span></a></li> </ul> </div> and Click on "Save Block" Button.
9) Create Static Block for Footer Static Link 1 CMS.
Goto Admin panel > Content > Blocks. Click on Add New Block Button and write below detail.
Block Title :- tm_footer_staticlink1
Identifier :- tm_footer_staticlink1
Content :- Click on this button and Add Below Code in HTML Content:
<div id="block_1" class="footer-area"> <h6>our links</h6> <ul> <li><a href="#">brands</a></li> <li><a href="#">gift certificates</a></li> <li><a href="#">affiliates</a></li> <li><a href="#">my accounts</a></li> <li><a href="#">order history</a></li> <li><a href="#">wish list</a></li> <li><a href="#">newsletter</a></li> </ul> </div> and Click on "Save Block" Button.
10) Create Static Block for Footer Static Link 2 CMS.
Goto Admin panel > Content > Blocks. Click on Add New Block Button and write below detail.
Block Title :- tm_footer_staticlink2
Identifier :- tm_footer_staticlink2
Content :- Click on this button and Add Below Code in HTML Content:
<div id="block_2" class="footer-area"> <h6>categories</h6> <ul> <li><a href="#">mobile</a></li> <li><a href="#">tablet</a></li> <li><a href="#">desktop</a></li> <li><a href="#">pc</a></li> <li><a href="#">workstation</a></li> <li><a href="#">play station</a></li> <li><a href="#">gaming laptops</a></li> </ul> </div> and Click on "Save Block" Button.
11) Create Static Block for Footer Static Link 3 CMS.
Goto Admin panel > Content > Blocks. Click on Add New Block Button and write below detail.
Block Title :- tm_footer_staticlink3
Identifier :- tm_footer_staticlink3
Content :- Click on this button and Add Below Code in HTML Content:
<div id="block_3" class="footer-area"> <h6>store locator</h6> <ul> <li><a href="#">Germany</a></li> <li><a href="#">USA</a></li> <li><a href="#">India</a></li> <li><a href="#">French</a></li> <li><a href="#">Japan</a></li> <li><a href="#">China</a></li> <li><a href="#">Russia</a></li> </ul> </div> and Click on "Save Block" Button.
12) Create Static Block for Footer Contact CMS.
Goto Admin panel > Content > Blocks. Click on Add New Block Button and write below detail.
Block Title :- tm_footer_contactus
Identifier :- tm_footer_contactus
Content :- Click on this button and Add Below Code in HTML Content:
<div id="block_4" class="footer-area"> <h6 class="contact-heading">Contact Us</h6> <div class="store-details"> <ul> <li class="address">15, My Company, Smart Elect,42-puffin street, Puffinville, France</li> <li class="phoneno">0123-456-789</li> <li class="email"><a href="#">support@yourstore.com</a></li> </ul> </div> <div class="payment_block"> <div class="payment-heading">payment</div> <ul> <li class="visa"><a href="#"><span>Visa</span></a></li> <li class="paypal"><a href="#"><span>Paypal</span></a></li> <li class="mastro"><a href="#"><span>Mastro</span></a></li> <li class="discover"><a href="#"><span>Discover</span></a></li> <li class="express"><a href="#"><span>Express</span></a></li> </ul> </div> </div> and Click on "Save Block" Button.
13) Create Static Block for Newsletter CMS.
Goto Admin panel > Content > Blocks. Click on Add New Block Button and write below detail.
Block Title :- tm_newsletter_heading
Identifier :- tm_newsletter_heading
Content :- Click on this button and Add Below Code in HTML Content:
<div class="news-left"> <div class="news-heading">signup and get free voucher <span>worth $250</span> for newly</div> <div class="news-text"><label><span>&lowast;</span>Voucher is valid only for new customer on new Registration</label></div> </div> and Click on "Save Block" Button.
14) Create Static Block for Mega Menu Banner CMS.
Goto Admin panel > Content > Blocks. Click on Add New Block Button and write below detail.
Block Title :- tm_megamenu_banner_bottom
Identifier :- tm_megamenu_banner_bottom
Content :- Click on this button and Add Below Code in HTML Content:
<div class="megamenu-banner"><a href="#"><img class="img-respo" src="{{view url=images/megamenu-banner.jpg}}" alt="Megamenu Banner" /></a></div> and Click on "Save Block" Button.
15) Create Static Block for Custommenu Menu CMS.
Goto Admin panel > Content > Blocks. Click on Add New Block Button and write below detail.
Block Title :- tm_custommenu
Identifier :- tm_custommenu
Content :- Click on this button and Add Below Code in HTML Content:
<div class="static-block1"><a href="#">Deal Of the Day</a> <ul class="custom-link"> <li><a href="#">Flat 20% Off</a></li> <li><a href="#">Flat 35% Off</a></li> <li><a href="#">Extra 20% Off</a></li> <li><a href="#">Extra 30% Off</a></li> <li><a href="#">Minimum 50% Off</a></li> </ul> </div> <div class="custom_banner"><img src="{{view url='images/custome-menu.jpg}}" alt="" /></div> and Click on "Save Block" Button.
16) Create Static Block for Left Banner CMS.
Goto Admin panel > Content > Blocks. Click on Add New Block Button and write below detail.
Block Title :- left_banner
Identifier :- left_banner
Content :- Click on this button and Add Below Code in HTML Content:
<div class="left-banner1"><a href="#"><img class="img-respo" src="{{view url='images/left_banner1.jpg}}" alt="" /></a></div> and Click on "Save Block" Button.
17) Create Static Block for Product Page Custom Tab CMS.
Goto Admin panel > Content > Blocks. Click on Add New Block Button and write below detail.
Block Title :- Custom Tab
Identifier :- Custom Tab
Content :- Click on this button and Add Below Code in HTML Content:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing. Sed quam odio, tempus ac, aliquam molestie, varius ac, tellus. Vestibulum ut nulla aliquam risus rutrum interdum. Pellentesque lorem. Curabitur sit amet erat quis risus feugiat viverra. Pellentesque augue justo, sagittis et, lacinia at, venenatis non, arcu. Nunc nec libero. In cursus dictum risus. Etiam tristique nisl.</p> and Click on "Save Block" Button.
18) Create Static Block for Product Page Right Side Advertisiment CMS.
Goto Admin panel > Content > Blocks. Click on Add New Block Button and write below detail.
Block Title :- pro-page-right-cms
Identifier :- pro-page-right-cms
Content :- Click on this button and Add Below Code in HTML Content:
<div class="right-banner-product"> <div id="right-banner-inner" class="right-banner-inner"> <ul class="slides"> <li><a href="#"><img class="img-respo" src="{{view url='images/Right-Banner-1.jpg}}" alt="" /></a></li> <li><a href="#"><img class="img-respo" src="{{view url='images/Right-Banner-2.jpg}}" alt="" /></a></li> </ul> </div> <div class="pro-page-sale-cms"> <div class="text1">sale</div> <div class="text2">save upto</div> <div class="text3">35% off</div> <div class="text4">on all collection</div> </div> </div> and Click on "Save Block" Button.
19) Create Static Block for Easy access CMS.
Goto Admin panel > Content > Blocks. Click on Add New Block Button and write below detail.
Block Title :- tm_easy_access
Identifier :- tm_easy_access
Content :- Click on this button and Add Below Code in HTML Content:
<div class="easy-access-outer"> <div class="easy-access container-width"> <div class="easy-access-heading">easy access :</div> <ul class="access-trending"> <li><a href="#">trending items</a></li> <li><a href="#">deal of the day</a></li> <li><a href="#">special discount</a></li> <li><a href="#">featured items</a></li> <li><a href="#">offer zone</a></li> </ul> </div> </div> and Click on "Save Block" Button.
20) Create Static Block for Sbu Ad banner CMS.
Goto Admin panel > Content > Blocks. Click on Add New Block Button and write below detail.
Block Title :- tm_sub_adbanner
Identifier :- tm_sub_adbanner
Content :- Click on this button and Add Below Code in HTML Content:
<div class="sub-adbanner-cms"> <div class="sub-adbanner1 sub-adbanner"> <div class="sub-adbanner-img"><a><img src="{{view url=images/sub1.jpg}}" alt="sub-adbanner-img1" /></a></div> <div class="sub-adbanner-content"> <div class="sub-adbanner-button"><a href="#">best product</a></div> <div class="sub-adbanner-msg">surveillance<br />camera</div> </div> </div> <div class="sub-adbanner2 sub-adbanner"> <div class="sub-adbanner-img"><a><img src="{{view url=images/sub2.jpg}}" alt="sub-adbanner-img2" /></a></div> <div class="sub-adbanner-content"> <div class="sub-adbanner-button"><a href="#">best product</a></div> <div class="sub-adbanner-msg">stimulated<br />battery</div> </div> </div> </div> and Click on "Save Block" Button.
21) Create Static Block for Footer offer CMS.
Goto Admin panel > Content > Blocks. Click on Add New Block Button and write below detail.
Block Title :- tm_footer_offer_cms
Identifier :- tm_footer_offer_cms
Content :- Click on this button and Add Below Code in HTML Content:
<div class="festive-offer-cms"> <div class="festive-offer-inner"> <div><img class="img-respo" src="{{view url=images/sale.png}}" alt="Megamenu Banner" /></div> <div class="offer-heading">festive deals on</div> <div class="offer-link">view items</div> </div> </div> and Click on "Save Block" Button.

## Product tab Settings

### How to Add Product Tab

Create Static Block for Product Tab.
Goto Admin panel > Content > Blocks. Click on Add New Block Button and write below detail.
Block Title :- tm_product_tab
Identifier :- tm_product_tab
Content :- Click on this button and Add Below Code in HTML Content:
<div class="tm_product_tab"> <div class="tabberlive_outer_sub"> <div class="tab-main-title"> <div class="tab-title">Top Products</div> <ul class="tabbernav_product"> <li class="tab1"><a class="tab-text selected" title="tab_product" href="#category1"><span>Accessories</span></a></li> <li class="tab2"><a class="tab-text" title="tab_product" href="#category2"><span>MP3 Players</span></a></li> <li class="tab3"><a class="tab-text" title="tab_product" href="#category3"><span>Headphones</span></a></li> </ul> </div> <div class="product_tabs"> <div id="category1" class="tab_product" style="display: none;"><!--Follow Below steps to create widget--></div> <div id="category2" class="tab_product" style="display: none;"><!--Follow Below steps to create widget--></div> <div id="category3" class="tab_product" style="display: none;"><!--Follow Below steps to create widget--></div> </div> </div> </div> now here above content you have to add Widget for particular tab, For that you have to follow same steps from Product Widget Setting Click On Insert Widget
Now Insert Widget

Widget
- Widget Type : Select Catalog Product List if you want product.
- Title : Enter Title Of Widget.
- Display Page Control : If you make this option is yes, then Pagination is displayed in widget.
- Number of Products to Display : Total Number of Product You want to be display in widget.
- Template : Select Template You want to load on widget.
- Cache Life Time : if not set. To refresh instantly, clear the Blocks HTML Output cache.
- Condition : Set If you Want to Category filter the Product.

now Click on "Insert Widget" Button. For every tab you have to insert widget for diffrent category id, after all finish Click on "Save Block" Button.

## Special products Settings

### How to Add Special products CMS

Create Static Block for Special Products CMS.
Goto Admin panel > Content > Blocks. Click on Add New Block Button and write below detail.
Block Title :- tm_special_cms
Identifier :- tm_special_cms
Content :- Click on this button and Add Below Code in HTML Content:
<div class="tm_special"> <div class="tabberlive_outer_sub"> <div class="main-title"> <div class="title">best of smart elect</div> </div> <div class="special-widget-block"><!--Follow Below steps to create widget--></div> </div> </div> now here above content you have to add Widget for Special, For that you have to follow same steps from Special Product Widget Setting Click On Insert Widget
Now Insert Widget

Widget
- Widget Type : Select Catalog Product List if you want product.
- Title : Enter Title Of Widget.
- Display Page Control : If you make this option is yes, then Pagination is displayed in widget.
- Number of Products to Display : Total Number of Product You want to be display in widget.
- Template : Select Template You want to load on widget.
- Cache Life Time : if not set. To refresh instantly, clear the Blocks HTML Output cache.
- Condition : Set If ALL these conditions are FALSE. Now click on the Add sign and Select Special price from the list

now Click on "Insert Widget" Button. For every tab you have to insert widget for diffrent category id, after all finish Click on "Save Block" Button.
Note: If you want carousel on product tabs or Bestseller widget then replace "grid.phtml" with "carousel.phtml" in tm_product_tab block after adding Widget.
Important Note: Remember to clear cache From Admin Panel > System > Cache Management

## Need More Help?

Once again, thank you so much for purchasing the theme. We are glad to help you if you have any questions relating to this theme.You can contact us and submit technical Supprot Ticket from our support desk https://www.templatemela.com/support/