Getting Started

Installation

Layout Position

home 1 Home Style 1
home 2 Home Style 2
home 3 Home Style 3
home 4 Home Style 4
home 5 Home Style 5
home 6 Home Style 6
home 7 Home Style 7

Homepage Configuration

  • To configure the default home page for your store, please go to Stores>> Settings >>Configuration>>General>>Web>>Default Pages tab, select the desired page in the CMS Home Page field and save configuration.
  • 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.

From the top menu, please select Content >> Elements >> Pages. Here you can find all the store pages that you have imported, so you don't need to add them. You only need to update the pages HTML and XML content as you wish.

  • Step 1. Open any of them in order to get the access to the content.


  • Step 2. Edit the content as you desire


  • Step 3. Press Save Page button to save your configuration

  • How to edit description?
    To edit description, please go to Admin Panel > Content > Elements > Blocks > Search Identifier "newsletter-popup-description".
    You can edit code HTML in your cms contents.
    <div class="news-top-title text-theme-color">Daily Promotion</div>
    <div class="news-bottom-title">SIGN UP NEWSLETTER</div>

  • To edit the "Banner", please go to Admin Panel > Content > Elements > Blocks > Search with Identifier "block-h1-banner1".
    You can edit code HTML in your cms contents.
    <div class="bannerhome1 bannerhome">
    <div class="img-effect img-banner1"><a class="img-class banner1" href="#"> <img src="{{media url="wysiwyg/home-page-image/home-1/banner-img1.jpg"}}" alt=""> </a></div>
    <div class="img-effect img-banner2"><a class="img-class banner1" href="#"> <img src="{{media url="wysiwyg/home-page-image/home-1/banner-img2.jpg"}}" alt=""> </a></div>
    <div class="img-effect img-banner3"><a class="img-class banner1" href="#"> <img src="{{media url="wysiwyg/home-page-image/home-1/banner-img3.jpg"}}" alt=""> </a></div>
    </div>

  • To edit the "BEST SELLERS", please go to Content >> Elements >> Pages >> Edit Pages.
  • You can edit code HTML in your cms contents.
    {{block class="Sm\BasicProducts\Block\BasicProducts" name="basicproducts" template="Sm_BasicProducts::basic-accordion.phtml" product_category="11,20" product_limitation="5" title="Best Sellers"}}

  • To edit the "Electronics", please go to Content >> Elements >> Pages >> Edit Pages.
  • You can edit code HTML in your cms contents.
    {{block class="Sm\BasicProducts\Block\BasicProducts" name="basicproducts1" template="Sm_BasicProducts::basic-slider.phtml" title="Electronics" product_category="46" nb_column1="4" nb_column2="3" nb_column3="3" nb_column4="2"}}

  • To edit the "JEWELRY WATCHES ", please go to Content >> Elements >> Pages >> Edit Pages.
  • You can edit code HTML in your cms contents.
    {{block class="Sm\BasicProducts\Block\BasicProducts" name="basicproducts2" template="Sm_BasicProducts::basic-slider.phtml" title="JEWELRY WATCHES " product_category="119" nb_column1="4" nb_column2="3" nb_column3="3" nb_column4="2"}}			

  • To edit the "Bags Bhoes", please go to Content >> Elements >> Pages >> Edit Pages.
  • You can edit code HTML in your cms contents.
    {{block class="Sm\BasicProducts\Block\BasicProducts" name="basicproducts3" template="Sm_BasicProducts::basic-slider.phtml" title="bags shoes" product_category="11,20" nb_column1="5" nb_column2="4" nb_column3="3" nb_column4="2"}}		

  • To edit the "Top Selling", please go to Content >> Elements >> Pages >> Edit Pages.
  • You can edit code HTML in your cms contents.
    {{block class="Sm\ListingTabs\Block\ListingTabs" template="Sm_ListingTabs::default.phtml" title="Top Selling" type_show="slider" type_listing="all" display_countdown="0" type_filter="categories" order_by="ordered_qty" filter_type="categories" limitation="6" category_tabs="46,117,119,120,121,142,143,144,145,147" nb_rows="1" pretext="pretext-tabs1" margin="0" nb_column5="4" nb_column4="4" nb_column3="3" nb_column2="2" nb_column1="1" nav="true" dots="false"}}	

  • To edit the "Brand", please go to Admin Panel > Content > Elements > Blocks > Search with Identifier "slider-brand".
    You can edit code HTML in your cms contents.
    <div class="slider-brand-bottom-wrapper">
    <div class="slider-brand-bottom">
    <div class="item"><a title="Image Brand" href="#"><img src="{{media url="wysiwyg/brand/brand-item-1.jpg"}}" alt="Image Brand"></a></div>
    <div class="item"><a title="Image Brand" href="#"><img src="{{media url="wysiwyg/brand/brand-item-2.jpg"}}" alt="Image Brand"></a></div>
    <div class="item"><a title="Image Brand" href="#"><img src="{{media url="wysiwyg/brand/brand-item-3.jpg"}}" alt="Image Brand"></a></div>
    <div class="item"><a title="Image Brand" href="#"><img src="{{media url="wysiwyg/brand/brand-item-4.jpg"}}" alt="Image Brand"></a></div>
    <div class="item"><a title="Image Brand" href="#"><img src="{{media url="wysiwyg/brand/brand-item-5.jpg"}}" alt="Image Brand"></a></div>
    <div class="item"><a title="Image Brand" href="#"><img src="{{media url="wysiwyg/brand/brand-item-1.jpg"}}" alt="Image Brand"></a></div>
    <div class="item"><a title="Image Brand" href="#"><img src="{{media url="wysiwyg/brand/brand-item-2.jpg"}}" alt="Image Brand"></a></div>
    <div class="item"><a title="Image Brand" href="#"><img src="{{media url="wysiwyg/brand/brand-item-3.jpg"}}" alt="Image Brand"></a></div>
    <div class="item"><a title="Image Brand" href="#"><img src="{{media url="wysiwyg/brand/brand-item-5.jpg"}}" alt="Image Brand"></a></div>
    </div>
    </div>
    

  • To edit the "My Account", please go to Admin Panel > Content > Elements > Blocks > Search with Identifier "slider-brand".
    You can edit code HTML in your cms contents.
    <div class="block ft-my-account">
    <div class="footer-title">
    <h2>my account</h2>
    </div>
    <div class="content-block-footer">
    <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/account/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/index/">My Compare</a></li>
    </ul>
    </div>
    </div>
    
    Note: Do the same with other static block

  • To edit copyright, in admin panel please go to Stores >> Configuarion >> MAGENTECH.com >> Theme Core Configuration >> Advanced >> Custom Copyright


  • To edit "About us" page, please go to Admin Panel > Content > Elements > Blocks > Search with Identifier "about-us-page".
    You can edit code HTML in your cms contents.
    <div class="row box-1-about">
    <div class="col-md-9 welcome-about-us">
    <div class="title-about-us">
    <h2>Welcome To Shop</h2>
    </div>
    <div class="content-about-us">
    <div class="image-about-us"><img src="{{media url="wysiwyg/about-us.jpg"}}" alt="About Us"></div>
    <div class="des-about-us">Nulla auctor mauris ut dui luctus semper. In hac habitasse platea dictumst. Duis pellentesque ligula a risus suscipit dignissim. Nunc non nisl lacus. Integer pharetra lacinia dapibus. Donec eu dolor dui, vel posuere mauris.<br><br>Pellentesque semper congue sodales. In consequat, metus eget con sequat ornare, augue dolor blandit purus, vitae lacinia nisi tellus in erat. Nulla ac justo eget massa aliquet sodales. Maecenas mattis male suada sem, in fringilla massa dapibus quis. Suspendisse aliquam leo id neque auctor molestie. Etiam at nulla tellus.<br><br>Nulla auctor mauris ut dui luctus semper. In hac habitasse platea dictumst. Duis pellentesque ligula a risus suscipit dignissim.</div>
    </div>
    </div>
    <div class="col-md-3 why-choose-us">
    <div class="title-about-us">
    <h2>Why Choose Us</h2>
    </div>
    <div class="content-why">
    <ul class="why-list">
    <li><a title="Shipping & Returns" href="#">Shipping & Returns</a></li>
    <li><a title="Secure Shopping" href="#">Secure Shopping</a></li>
    <li><a title="International Shipping" href="#">International Shipping</a></li>
    <li><a title="Affiliates" href="#">Affiliates</a></li>
    <li><a title="Group Sales" href="#">Group Sales</a></li>
    </ul>
    </div>
    </div>
    <div class="col-md-12 our-member">
    <div class="title-about-us">
    <h2>Our Member</h2>
    </div>
    <div class="short-des">Consectetur adipiscing elit. Donec pellentesque venenatis elit, quis aliquet mauris malesuada vel. Donec vitae libero dolor, eget dapibus justo.<br>Aenean facilisis aliquet feugiat. Suspendisse lacinia congue est ac semper. Nulla ut elit magna, vitae volutpat magna.</div>
    <div class="overflow-owl-slider1">
    <div class="wrapper-owl-slider1">
    <div class="row slider-ourmember">
    <div class="item-about col-lg-6 col-md-6 col-sm-6">
    <div class="item respl-item">
    <div class="item-inner">
    <div class="w-image-box">
    <div class="item-image"><a title="Jennifer lawrence" href="#"><img src="{{media url="wysiwyg/cl-image-1.jpg"}}" alt="Jennifer lawrence"></a></div>
    </div>
    <div class="info-member">
    <h2 class="cl-name"><a title="Jennifer lawrence" href="#">Jennifer lawrence</a></h2>
    <p class="cl-job">Art Director</p>
    <p class="cl-des">Donec dignissim, enim ac semper tempus, ligula neque pulvinar mi, sed facilisis arcu placerat consequat</p>
    <ul>
    <li> </li>
    <li> </li>
    <li> </li>
    <li> </li>
    </ul>
    </div>
    </div>
    </div>
    </div>
    <div class="item-about col-lg-6 col-md-6 col-sm-6">
    <div class="item respl-item">
    <div class="item-inner">
    <div class="w-image-box">
    <div class="item-image"><a title="Jennifer lawrence" href="#"><img src="{{media url="wysiwyg/cl-image-2.jpg"}}" alt="Jennifer lawrence"></a></div>
    </div>
    <div class="info-member">
    <h2 class="cl-name"><a title="Jennifer lawrence" href="#">Jennifer lawrence</a></h2>
    <p class="cl-job">Design Leader</p>
    <p class="cl-des">Donec dignissim, enim ac semper tempus, ligula neque pulvinar mi, sed facilisis arcu placerat consequat</p>
    <ul>
    <li> </li>
    <li> </li>
    <li> </li>
    <li> </li>
    </ul>
    </div>
    </div>
    </div>
    </div>
    <div class="item-about col-lg-6 col-md-6 col-sm-6">
    <div class="item respl-item">
    <div class="item-inner">
    <div class="w-image-box">
    <div class="item-image"><a title="Jennifer lawrence" href="#"><img src="{{media url="wysiwyg/cl-image-3.jpg"}}" alt="Jennifer lawrence"></a></div>
    </div>
    <div class="info-member">
    <h2 class="cl-name"><a title="Jennifer lawrence" href="#">Jennifer lawrence</a></h2>
    <p class="cl-job">Tech Leader</p>
    <p class="cl-des">Donec dignissim, enim ac semper tempus, ligula neque pulvinar mi, sed facilisis arcu placerat consequat</p>
    <ul>
    <li> </li>
    <li> </li>
    <li> </li>
    <li> </li>
    </ul>
    </div>
    </div>
    </div>
    </div>
    <div class="item-about col-lg-6 col-md-6 col-sm-6">
    <div class="item respl-item">
    <div class="item-inner">
    <div class="w-image-box">
    <div class="item-image"><a title="Jennifer lawrence" href="#"><img src="{{media url="wysiwyg/cl-image-4.jpg"}}" alt="Jennifer lawrence"></a></div>
    </div>
    <div class="info-member">
    <h2 class="cl-name"><a title="Jennifer lawrence" href="#">Jennifer lawrence</a></h2>
    <p class="cl-job">Manager</p>
    <p class="cl-des">Donec dignissim, enim ac semper tempus, ligula neque pulvinar mi, sed facilisis arcu placerat consequat</p>
    <ul>
    <li> </li>
    <li> </li>
    <li> </li>
    <li> </li>
    </ul>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="col-md-12 happy-about-us">
    <div id="slider-happy-about-us" class="happy-ab carousel slide" data-ride="carousel">
    <div class="title-happy-about">
    <h2>Happy customer says</h2>
    </div>
    <div class="sm_imageslider slider-happy-client">
    <div class="item active">
    <div class="ct-why">
    <div class="client-say">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue, justo non cursus adipiscing, dui nibh scelerisque justo, quis pretium turpis neque eget nulla. Curabitur dictum consectetur metus nec dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue, justo non cursus adipiscing, dui nibh scelerisque justo non cursus adipiscing, dui nibh scelerisque justo, quis pretium turpis.</div>
    <p class="client-info-about"><span class="name">- Mama Duo - </span>Social Media Strategist</p>
    </div>
    </div>
    <div class="item">
    <div class="ct-why">
    <div class="client-say">In congue, justo non cursus adipiscing, dui nibh scelerisque justo, quis pretium turpis neque eget nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dictum consectetur metus nec dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue, justo non cursus adipiscing, dui nibh scelerisque justo non cursus adipiscing, dui nibh scelerisque justo, quis pretium turpis.</div>
    <p class="client-info-about"><span class="name">- Join Doe - </span>Social Media Strategist</p>
    </div>
    </div>
    <div class="item">
    <div class="ct-why">
    <div class="client-say">Dui nibh scelerisque justo, in congue, justo non cursus adipiscing, quis pretium turpis neque eget nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dictum consectetur metus nec dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue, justo non cursus adipiscing, dui nibh scelerisque justo non cursus adipiscing, dui nibh scelerisque justo, quis pretium turpis.</div>
    <p class="client-info-about"><span class="name">- Join Doe - </span>Social Media Strategist</p>
    </div>
    </div>
    <div class="item">
    <div class="ct-why">
    <div class="client-say">In congue, justo non cursus adipiscing, dui nibh scelerisque justo, quis pretium turpis neque eget nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dictum consectetur metus nec dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue, justo non cursus adipiscing, dui nibh scelerisque justo non cursus adipiscing, dui nibh scelerisque justo, quis pretium turpis.</div>
    <p class="client-info-about"><span class="name">- Join Doe - </span>Social Media Strategist</p>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>

  • To edit "Contact Us", please go to Admin Panel > Content > Elements > Blocks > Search with Identifier "contact-us-info".
    You can edit code HTML in your cms contents.
    <div class="contact-us-page">
    <div class="title-bonus-page">
    <h2>Contact Us</h2>
    </div>
    <div class="row">
    <div class="col-lg-6 col-md-6">
    <div class="google-map">{{block class="Magento\\Cms\\Block\\Block" block_id="contact-googlemap"}}</div>
    <p class="contact-description">Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam<br>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat sed do eiusmod tempor incididunt ut labore dolore</p>
    </div>
    <div class="col-lg-6 col-md-6">{{block class="Magento\Contact\Block\ContactForm" template="Magento_Contact::form-contact.phtml"}}</div>
    </div>
    <div class="row info-bottom-contact">
    <div class="col-md-3 col-sm-6 store-info">
    <ul class="list-info">
    <li class="item-info main-info">
    <div class="info-content">
    <h2><a title="Main office" href="#">Main office</a></h2>
    <div class="des-info">Sed ut perspiciatis unde omnis 123456 Street Name, Los Angeles</div>
    </div>
    </li>
    <li class="item-info email-info">
    <div class="info-content">
    <h2>Email</h2>
    <div class="des-info"><a class="mailto" title="Send Email" href="mailto:Support1@shopname.com">Support1@shopname.com</a><br><a class="mailto" title="Send Email" href="mailto:Support2@shopname.com">Support2@shopname.com</a></div>
    </div>
    </li>
    <li class="item-info phone-info">
    <div class="info-content">
    <h2>Phone</h2>
    <div class="des-info"><a class="call-phone" title="Call: 0123-4567-8910" href="tel:0123-4567-8910">0123-4567-8910</a><br><a class="call-phone" title="Call: 0123-4567-8910" href="tel:0123-4567-8910">0123-4567-8910</a></div>
    </div>
    </li>
    </ul>
    </div>
    <div class="col-md-3 col-sm-6 store-info">
    <ul class="list-info">
    <li class="item-info main-info">
    <div class="info-content">
    <h2><a title="Branch 01" href="#">Branch 01</a></h2>
    <div class="des-info">Sed ut perspiciatis unde omnis 123456 Street Name, Los Angeles</div>
    </div>
    </li>
    <li class="item-info email-info">
    <div class="info-content">
    <h2>Email</h2>
    <div class="des-info"><a class="mailto" title="Send Email" href="mailto:Support1@shopname.com">Support1@shopname.com</a><br><a class="mailto" title="Send Email" href="mailto:Support2@shopname.com">Support2@shopname.com</a></div>
    </div>
    </li>
    <li class="item-info phone-info">
    <div class="info-content">
    <h2>Phone</h2>
    <div class="des-info"><a class="call-phone" title="Call: 0123-4567-8910" href="tel:0123-4567-8910">0123-4567-8910</a><br><a class="call-phone" title="Call: 0123-4567-8910" href="tel:0123-4567-8910">0123-4567-8910</a></div>
    </div>
    </li>
    </ul>
    </div>
    <div class="col-md-3 col-sm-6 store-info">
    <ul class="list-info">
    <li class="item-info main-info">
    <div class="info-content">
    <h2><a title="Branch 02" href="#">Branch 02</a></h2>
    <div class="des-info">Sed ut perspiciatis unde omnis 123456 Street Name, Los Angeles</div>
    </div>
    </li>
    <li class="item-info email-info">
    <div class="info-content">
    <h2>Email</h2>
    <div class="des-info"><a class="mailto" title="Send Email" href="mailto:Support1@shopname.com">Support1@shopname.com</a><br><a class="mailto" title="Send Email" href="mailto:Support2@shopname.com">Support2@shopname.com</a></div>
    </div>
    </li>
    <li class="item-info phone-info">
    <div class="info-content">
    <h2>Phone</h2>
    <div class="des-info"><a class="call-phone" title="Call: 0123-4567-8910" href="tel:0123-4567-8910">0123-4567-8910</a><br><a class="call-phone" title="Call: 0123-4567-8910" href="tel:0123-4567-8910">0123-4567-8910</a></div>
    </div>
    </li>
    </ul>
    </div>
    <div class="col-md-3 col-sm-6 store-info">
    <ul class="list-info">
    <li class="item-info main-info">
    <div class="info-content">
    <h2><a title="Branch 03" href="#">Branch 03</a></h2>
    <div class="des-info">Sed ut perspiciatis unde omnis 123456 Street Name, Los Angeles</div>
    </div>
    </li>
    <li class="item-info email-info">
    <div class="info-content">
    <h2>Email</h2>
    <div class="des-info"><a class="mailto" title="Send Email" href="mailto:Support1@shopname.com">Support1@shopname.com</a><br><a class="mailto" title="Send Email" href="mailto:Support2@shopname.com">Support2@shopname.com</a></div>
    </div>
    </li>
    <li class="item-info phone-info">
    <div class="info-content">
    <h2>Phone</h2>
    <div class="des-info"><a class="call-phone" title="Call: 0123-4567-8910" href="tel:0123-4567-8910">0123-4567-8910</a><br><a class="call-phone" title="Call: 0123-4567-8910" href="tel:0123-4567-8910">0123-4567-8910</a></div>
    </div>
    </li>
    </ul>
    </div>
    </div>
    </div>
    
  • Theme Core Setting

    In Magento admin panel, navigate to Stores >> Settings >> Configuration >> MagenTech.COM >> Theme Core Configuration and configure as you want.

    Please click Here to view the theme core configuration.

    General Options:

    Primary, Body Font, Background, Element Google Font.

    In these options, you can change main font, font size, link color, text color, background, etc.

    Navigation

    Menu Style: This theme support 2 types: mega menu and css menu. You can select a menu style that you want.

  • Mega Menu: The menu are items that you have created from module megamenu.
  • CSS Menu: The menu are categories that you have created.
  • Sticky Menu: Choose "Yes" to turn on "Sticky Menu" feature, the menu will be fixed on top when scroll down the page.

    Mobile Layout: Allow to set logo on mobile and config width and height of logo.

    Max width: Allow to set width of content.

    Enable boxed layout: This theme support boxed layout.

    We provides flexible grid system includes: layout 1 column, layout 2 columns, layout 3 columns. You can change product's quantity per row to fit each screen.

    Related - Upsell Product

    In these options, you can choose "Yes/No" to "Show/Hide" for related and upsell products.

    Image Zoom

    Enable Product Image Zoom: Choose "Yes/No" to "Allow/Not Allow" show product image zoom when you mouse hover on the product image.

    Advanced

    Choose "Yes/No" to "Show/Hide" Back to top, Go to Top, Add to Cart, Add to Wishlist, Add to Compare, Newsletter Popup, Copyright, etc.

    Developer

    To custom Css or Javascript

    Import Static Blocks

    By clicking this button, you can import all static blocks that are used for our demo site.

    Import Pages

    By clicking this button, you can import all pages that are used for our demo site.

    Import Demos

    Click "Demo X" button to install demo version that you prefer to install.

    Note: When you click "Demo X" button, the administration page will reload automatically. After it finishes reloading, please click "Save Config" button and refesh cache.

    Extensions