Getting Started

Installation

Layout Position

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

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

Please try to use below example code in layout update XML.
<block class="Magento\Cms\Block\Block" name="policy-shop-v1"  before="-">
	<arguments>
		<argument name="block_id" xsi:type="string">policy-shop-v1</argument>
	</arguments>
</block>


Please try to use below example code in layout update XML.
<block class="Sm\ImageSlider\Block\ImageSlider" name="imageslider" template="Sm_ImageSlider::default.phtml" before="-">
</block>

To show "Block-Categories-v1", please go to Admin Panel > Content > Elements > Blocks and search block-category-v1 block. You can modify content by custom HTML based on sample content.

Please try to use below example code in your cms contents.
<div class="block-category module">
<div class="block-title">
<h2><strong>FEATURED CATEGORIES</strong></h2>
<p>Featured collections created and curated by our editors.</p>
</div>
<div class="row">
<div class="col-xs-6"><a class="effect-img mr30" href="#"><img src="{{media url="wysiwyg/banner/home-v1/img1.jpg"}}" alt="" /></a></div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-6"><a class="effect-img mr30" href="#"><img src="{{media url="wysiwyg/banner/home-v1/img2.jpg"}}" alt="" /></a></div>
<div class="col-xs-6"><a class="effect-img mr30" href="#"><img src="{{media url="wysiwyg/banner/home-v1/img3.jpg"}}" alt="" /></a></div>
<div class="col-xs-12"><a class="effect-img mr30" href="#"><img src="{{media url="wysiwyg/banner/home-v1/img4.jpg"}}" alt="" /></a></div>
</div>
</div>
<div class="col-xs-12"><a class="effect-img" href="#"><img src="{{media url="wysiwyg/banner/home-v1/img5.jpg"}}" alt="" /></a></div>
</div>
</div>


Please try to use below example code in your cms contents.
{{block class="Sm\BasicProducts\Block\BasicProducts" name="basicproducts-v1" title="FEATURED PRODUCTS" pretext="Featured collections created and curated by our editors." template="Sm_BasicProducts::default-slider.phtml" product_category="97" img_width="810" img_height="940" nb_column1="5" nb_column2="4"}}


To show "Block-Video-v1", please go to Admin Panel > Content > Elements > Blocks and search block-video-v1 block. You can modify content by custom HTML based on sample content.

Please try to use below example code in your cms contents.
<div class="full-block-info-video1">
<div class="static-surround">
<div class="static-surround-inner">
<div class="static-wrap"><span class="mask"> </span> <video id="static_video" width="320" height="240" poster="{{media url="wysiwyg/video/"}}bg-video.jpg" class="bg-video js-is-active" loop="loop"><source src="{{media url="wysiwyg/video/"}}big1.mp4" type="video/mp4" /><object id="static_video" width="320" height="240" data="http://192.168.1.45/ytc_templates/magento2/sm-topz215/pub/static/adminhtml/Magento/backend/en_US/tiny_mce/plugins/media/moxieplayer.swf" type="application/x-shockwave-flash"><param name="src" value="http://192.168.1.45/ytc_templates/magento2/sm-topz215/pub/static/adminhtml/Magento/backend/en_US/tiny_mce/plugins/media/moxieplayer.swf" /><param name="flashvars" value="url=/ytc_templates/magento2/sm-topz215/admin/cms/wysiwyg/directive/___directive/e3ttZWRpYSB1cmw9Ind5c2l3eWcvdmlkZW8vIn19/key/7d1bb51c3c5d8ce418490e279a2ef3e07192f1861fdfac13535f8cf8a197ac37/big1.mp4&poster=/ytc_templates/magento2/sm-topz215/admin/cms/wysiwyg/directive/___directive/e3ttZWRpYSB1cmw9Ind5c2l3eWcvdmlkZW8vIn19/key/7d1bb51c3c5d8ce418490e279a2ef3e07192f1861fdfac13535f8cf8a197ac37/bg-video.jpg" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="true" /></object>  </video> <img src="{{media url="wysiwyg/video/bg-video.jpg"}}" alt="Client" />
<div class="box-play">
<div class="border-play"><i class="fa fa-step-forward"> </i></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" xml="space">// <![CDATA[
// 
// 
// 
	require([
			'jquery'
		], function ($) {
					  jQuery('.fa-step-forward').click(function(){
    var t = jQuery(this).closest('.static-surround');
    if(t.hasClass('is_play')){
      document.getElementById('static_video').pause();
      t.removeClass('is_play');
    }
    else{
      document.getElementById('static_video').play();
      t.addClass('is_play');
    }
  });
        });


// 
// 
// 
// ]]></script>

To show "Instagram Gallery", please go to Admin Panel > Content > Elements > Blocks and search block-content-bt block. You can modify content by custom HTML based on sample content.

Please try to use below example code in your cms contents.
{{block class="Sm\InstagramGallery\Block\InstagramGallery" name="instagramgallery" template="Sm_InstagramGallery::default.phtml"}}

1. How to show "Ourshop"


To show "Ourshop", please go to Admin Panel > Content > Elements > Blocks and search ourshop-footer block. You can modify content by custom HTML based on sample content.

Please try to use below example code in your cms contents.
<div class="footer-block"<
<div class="footer-block-title"<
<h3<OUR SHOPS</h3<
</div<
<div class="footer-block-content"<
<ul class="links-footer"<
<li<<a title="About Us" href="{{store url=""}}about-us.html"<About Us</a<</li<
<li<<a title="TopzStore Reviews" href="#"<TopzStore Reviews</a<</li<
<li<<a title="Terms of Use" href="#"<Terms of Use</a<</li<
<li<<a title="Privacy Policy" href="#"<Privacy Policy</a<</li<
<li<<a title="Site Map" href="#"<Site Map</a<</li<
<li<<a title="Women" href="#"<Women</a<</li<
</ul<
</div<
</div<
	
	

2. How to show "Your Links"


To show "Your Links", please go to Admin Panel > Content > Elements > Blocks and search your-links-footer block. You can modify content by custom HTML based on sample content.

Please try to use below example code in your cms contents.
<div class="footer-block">
<div class="footer-block-title">
<h3>YOUR LINKS</h3>
</div>
<div class="footer-block-content">
<ul class="links-footer">
<li><a title="Shipping guide" href="#">Shipping guide</a></li>
<li><a title="Store location" href="#">Store location</a></li>
<li><a title="Affiliates" href="#">Affiliates</a></li>
<li><a title="Customer point policy" href="#">Customer point policy</a></li>
<li><a title="Estimated Delivery Time" href="#">Estimated Delivery Time</a></li>
</ul>
</div>
</div>
	
	

3. How to show "Support"


To show "Support", please go to Admin Panel > Content > Elements > Blocks and search support-footer block. You can modify content by custom HTML based on sample content.

Please try to use below example code in your cms contents.
<div class="footer-block">
<div class="footer-block-title">
<h3>SUPPORT</h3>
</div>
<div class="footer-block-content">
<ul class="links-footer">
<li><a title="About Us" href="{{store url=""}}about-us.html">About Us</a></li>
<li><a title="Our History" href="#">Our History</a></li>
<li><a title="Store Locator" href="#">Store Locator</a></li>
<li><a title="Careers" href="#">Careers</a></li>
<li><a title="Terms and Conditions" href="#">Terms and Conditions</a></li>
<li><a title="Cookies and Privacy Policy" href="#">Cookies and Privacy Policy</a></li>
</ul>
</div>
</div>
	
	

4. How to show "Customer Service"


To show "Customer Service", please go to Admin Panel > Content > Elements > Blocks and search customer-services-footer block. You can modify content by custom HTML based on sample content.

Please try to use below example code in your cms contents.
<div class="footer-block">
<div class="footer-block-title">
<h3>Customer Service</h3>
</div>
<div class="footer-block-content">
<ul class="links-footer">
<li><a title="Contact Us" href="{{store url=""}}contact-us.html">Contact Us</a></li>
<li><a title="Payment & Security" href="#">Payment & Security</a></li>
<li><a title="Delivery & Services" href="#">Delivery & Services</a></li>
<li><a title="My Account" href="{{store url=""}}customer/account">My Account</a></li>
<li><a title="Returns & Exchanges" href="#">Returns & Exchanges</a></li>
<li><a title="FAQ" href="#">FAQ</a></li>
</ul>
</div>
</div>
	
	

5. How to show "Contact"


To show "Contact", please go to Admin Panel > Content > Elements > Blocks and search contact-footer block. You can modify content by custom HTML based on sample content.

Please try to use below example code in your cms contents.
>div class="footer-block">
>div class="footer-block-title">
>h3>Contact Us>/h3>
>/div>
>div class="footer-block-content">
>ul class="links-contact">
>li class="add-icon">Address: No 40 Baria Sreet 1/2 NewYork City, NY, United States>/li>
>li class="email-icon middle-content">Email: contact@topzstore.com>/li>
>li class="phone-icon">Phone 1 : 0123456789>br />Phone 2 : 0123456789>/li>
>/ul>
>div>>a href="#">>img src="{{media url="wysiwyg/banner/home-v1/app.png"}}" alt="" />>/a>>/div>
>/div>
>/div>
	
	

Theme Setting

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

Please click Here to view the theme settings.

Theme Color: In this option, you can set main color of entire page.

Body Font

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

Menu

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

Menu on Top: Choose "Yes" to turn on "Sticky Menu" feature, the menu will be fixed on top when scroll down the page.

Mobile Menu Type: This theme support sidebar menu and collapse on mobile. You can select a menu style that you want.

Layout Style: This theme support boxed and full width layout. You can select a layout style that you want.

Max Width: You can change page's width.

Responsive Layout: Choose "Yes" to show responsive layout for each type of devices.

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.

Detail Style: This option allow you choose detail style types that you want.

Image Box

Thumbs Styles: This option allow you choose thumb style types that you want.
Enable Loop: Choose "Yes" to repeat your loop.
Enable Keyboard Trigger: Choose "Yes/No" to "Enable/Disable" keyboard trigger feature.
Show Navigation: Choose "Yes/No" to "Show/Hide" navigation.
Enable Popup Fullscreen: Choose "Yes" to show fullscreen popup when you mouse click on the product detail.
Show Thumbs Navigation: Choose "Yes/No" to "Show/Hide" thumb navigation.
Thumbs Margin: Distance between the thumb images.
Thumbs Border Active Width: You can change width of thumb boder when active.
Breakpoints: Breakpoints are used to set up the screen width at which the design of thumbnails changes.

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.

Related - Upsell Product

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

Tab

Choose tab style types that you want.

Custom Tab

Choose "Yes", you can change name and add content for Custom Tab.

Choose "Yes" to show socials. When you choose "Yes", you can change name and link of socials.

Advanced

Choose "Yes/No" to "Show/Hide" 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

Other

Change Log

Compatible with Magento 2.1.6

Compatible with Magento 2.1.5