The template can be customised according to your needs and requirements from within the Admin area. The Template Settings make customisation very easy and hassle free.

The Template Settings menu can be found under the Tools menu after logging into the admin area.

Following are the features that can be customised using the Admin Template Settings.

  • General

    Go to Tools > Template Settings > General > General Settings Panel section to start your custom settings configuration.


    General Page Layout > Here you can set the general page layouts.

    Page Loader > Here you choose options to display the Page Loader. If you want to set a custom page loader image you can set custom option.

    Image Loader > Here you can set Enable - Disable the Images Loader.

  • Colour

    Go to Tools > Template Settings > General > Colour Panel section to start your custom settings configuration.


    Theme Colour > The default theme colour is set to #000, you can enter the colour code of your choice or select the colour from the colour picker provided.

  • Fonts Settings

    Go to Tools > Template Settings > General > Fonts Settings Panel section to start your custom settings configuration.


    General Font Family > The theme comes with 500+ Google fonts preloaded. The General Font family will affect all the fonts in theme excluding the banner cations that you have added.

    Heading Font Family > With this option you can set the font family for Heading(h1,h2,h3,h4,h5,h6,Slider Title, Box Title etc.)

    Character Set: Latin Extended > Only selected fonts support extended character sets. For a complete list of available fonts and font subsets please refer to Google Web Fonts.

    Custom Character Subset > Only selected fonts support character sets. For a complete list of available fonts and font subsets please refer to Google Web Fonts. eg: greek,greek-ext

  • Product Slider

    Go to Tools > Template Settings > General > Product Slider Panel section to start your custom settings configuration.


    Additional Image Style > This option comes with 3 different values. Selecting the default option will remove the additional images slider from the products and will have a simple view.

    If you want to display Alternate Images, it can be done by selecting Hover Effect option. Once the Hover Effect option is selected, another option below it will appear to let you choose the style of display on hover display alternative image display.

    If you want to display multiple additional images (max 5 images) in slider view, it can be done by selecting Slider view option. Once the Slider view option is selected, another option below it will appear to let you choose the number of additional images.

    In these other options to you can set Hide-Show products elements in product slider.

    Products Slider options affected all products slider like micro slider, tab slider, product slider etc...

  • Breadcrumbs

    Go to Tools > Template Settings > General > Breadcrumbs Panel section to start your custom settings configuration.


    Breadcrumb Style > Here you can choose Breadcrumb with banner and Breadcrumb without Banner options.

    Banner Image > If you choose Breadcrumb with Banner Here you can set banner image.

  • Testimonial Manager

    Go to Tools > Template Settings > General > Testimonial Manager Panel section to start your custom settings configuration.


    Display Testimonials > Select Yes or No as per your requirement to display the Testimonials on your store home page.>

    Banner Image > Here you can add the custom background image for Testimonials Section Banner. You can upload the background image as per your requirement..

  • Newsletter

    Go to Tools > Template Settings > General > Newsletter Panel section to start your custom settings configuration.

    • Managing Newsletters has been made easy with Mailchimp integration. New users can signup for free Mailchimp Services, while registered users can create their Signup forms and copy paste the code here.
    • After Signing In or Logging In successfully, go to Lists in your Dashboard.
    • Click on "Create List" on top right corner of your screen.
    • After creating the List successfully, click on the List name, this will take you to the details of particular list.
    • Then click on Signup Forms Tab, this will open the details of different types of forms.
    • Click on "Embedded Forms options", this will open the "Embedded Form Code" detail with the preview of different forms.
    • Click on "Super Slim" option and copy the code below it. Paste the code in the text-area provided, as shown in image below.
    • Click on Save Settings button and the changes will be applied to the front of store.
  • Google Map

    Go to Tools > Template Settings > General > Google Map Panel section to start your custom settings configuration.

    • The Google Maps iFrame code is used to embed the Google map location of your store in the Contact Us page. If left empty the Map will be removed from contact us page.
    • Follow the below steps to get the iframe code of Map location for your store.

    1. Go to Google Maps and type the address of your store in the search bar on top left corner and hit enter or click on search icon. The map page will look something like below image.
    2. Google Map

    3. Click on Share link, highlighted in the image above. On click a pop up will appear with options of Share Link and Embed Map. Click on Embed Map option and the page will look as the below image.
    4. Google Map

    5. Copy the iframe code displayed in the above image and paste it to the Google Map section in the iframe code area for theme.
    6. Click on Save Settings button and the changes will be applied to the contact us page of store.
  • Google ReCAPTCHA

    Go to Tools > Template Settings > General > Google ReCAPTCHA Panel section to start your custom settings configuration.

  • General


    Homepage Version > Here you can choose the Homepage Version to display on the Homepage.

    Homepage Layout > Here you can set the Homepage Layout to display on the Homepage.

  • Header

    • Select the header style as per your requirement using this option. The live demo of header styles are visible on our demo.
    • The theme comes with 5 different unique header styles as shown in the images below :
      • Header Style - 1
        Header Style
      • Header Style - 2
        Header Style
      • Header Style - 3
        Header Style
      • Header Style - 4
        Header Style
      • Header Style - 5
        Header Style
  • Store Logos

    Go to Tools > Template Settings > Header > Store Logos Panel section to start your custom settings configuration.


    Logo > Add your store logo using this option.

    Favicon > You can add the favicon too for your store.

  • Main Menu Settings

    The Main Menu in the template comes with 2 different styles. It covers the following options :

    1. Simple Menu (eg : shown in image below) - Simple menu is made for the stores which has a large number (more than 5 or 6) of main categories. Click here for more info on Simple Menu.
      Simple Menu

    2. Mega Menu (eg : shown in image below) - Mega menu is design for the store which has lesser number of main categories and more sub-categories. Click here for more info on Mega Menu. Mega Menu

    Simple Menu Settings

    • The main categories of store is contained under the SHOP menu.
    • Brands menu contain the list of manufacturers added by your from the Store Admin Area.
    • Ez-pages contains the Ez-pages links that are enabled in header section. Look here Admin > Tools > Ez-Pages for more info on Ez-Pages.
    • To change the titles like Brands/Shop/Ez-Pages go to includes/languages/english/extra_definitions/premium directory and open headermenu.php file to edit. In this file you will see the titles defined, change it as per your requirement. Repeat this step for all other languages if your store is multilingual.
    • To add any extra custom link to the Simple menu, open tpl_drop_menu.php file from includes/templates/premium/common directory. In this file edit the Simple Menu section as per your requirement.

    Mega Menu Settings

    • Select Mega Menu option from the Menu type section to display the Mega Menu on store front.
    • Below the Menu type section, your store categories will be displayed as shown in the image above, which you can configure and change individually as per your requirement. The default values will be selected and your store front with mega menu will look something like the following image :

      Mega Menu

      1. Badge : By default the badge value is set to New which you can either set to Sale or None for any particular category as per your requirement.
      2. Subcategory Images : The subcategory and its images will be displayed as shown in the image above. The subcategory image can be added as per the normal process from Admin > Catalog > Categories/Products. By default the subcategories image are set to display, but it can removed if the value of Display Subcategory Image is set to No.
      3. Megamenu Side block : Megamenu side block is used to promote the products from that particular category. The side block can be displayed in 2 different ways, 1 - With Slider and 2 - Without Slider. Any 2 products from that particular category will get displayed randomly in that section. You can select Special or Featured as per your requirement. The block with slider will look as shown in the image above.
      4. Megamenu Bottom block : Megamenu Bottom block is used to add the promotional banners for that particular category. You can also add the link on that banner using this option. If not required, you can disable it by setting the value of Megamenu Bottom block to No.

    Mega Menu

    Display in Menu > You can Hide and Show categories in main navigation menu.

    Display in Vertical Menu > You can Hide and Show Categories in vertical menu.

    • Display as Slider
      Mega Menu

    Menu Type > Here you can set menu type Megamenu and Classic style.

    Badge > Here you can choose option New, Sale and none for display badge label in categories.

    Megamenu Side Block > Here you can choose option Specials, Featured and None type of products in Megamenu side block. In these options select Display as Slider and Display without Slider style for display products.

    • Display as Slider
      Mega Menu
    • Display without Slider
      Mega Menu

    Megamenu Bottom Block > Megamenu Bottom block is used to add the promotional banners for that particular category. You can also add the link on that banner using this option. If not required, you can disable it by setting the value of Megamenu Bottom block to No.

  • Top Banners Settings

    Display Top Banner : > The status of Top banner can set to On or Off as per your requirement.

    Top Banner Layout : > The theme comes with 4 different top banners layout styles.

Configuring Top Banners

The layout styles are explained below in detail, select the layout and display style of top banners as per your requirement.
The Slider section below it is for the Layout 2 which has Banner Slider, read the instructions for Layout 2 for More info.
Banner section is used to add the Banners and its captions for the top banners.
  1. Layout 1 : 4 column layout comes with slider, you can add more than 4 images for this style and it will be converted to slider automatically. The ideal image size for this layout should be 280x516
    top-banners-layout-1

    Please refer below banner caption for display different style and position in single banner. You can copy-past content in Add Banner.

    • (Homepage - 1) Banner 1 Content
      <div class="h1-bc-style1">
      	<div class="banner-text">
      		<span><a href="#">Accessories</a></span>
      		<h3><a href="#">man</a></h3>
      	</div>
      	<div class="number">
      		<span>1</span>
      	</div>
      </div>
    • (Homepage - 1) Banner 2 Content
      <div class="h1-bc-style1">
      	<div class="banner-text text-positon2">
      		<span><a href="#">Collection</a></span>
      		<h3><a href="#">Summer</a></h3>
      	</div>
      	<div class="number n-2">
      		<span>2</span>
      	</div>
      </div>
    • (Homepage - 1) Banner 3 Content
      <div class="h1-bc-style1">
      	<div class="banner-text text-positon1">
      		<span><a href="#">Jewelry</a></span>
      		<h3><a href="#">Woman</a></h3>
      	</div>
      	<div class="number n-3">
      		<span>3</span>
      	</div>
      </div>
    • (Homepage - 1) Banner 4 Content
      <div class="h1-bc-style1">
      	<div class="banner-text text-positon3">
      		<h3><a href="#">Spring</a></h3>
      		<span><a href="#">2017</a></span>
      	</div>
      	<div class="number n-4">
      		<span>4</span>
      	</div>
      </div>
  2. Layout 2 : 2 column layout comes with slider, you can add more than 2 images for this style and it will be converted to slider automatically. The ideal image size for this layout should be 580x215
    top-banners-layout-2

    Please refer below banner caption for display different style and position in single banner. You can copy-past content in Add Banner.

    • (Homepage - 2) Banner 1 Content
      <div class="banner-text text-positon bc-style3">
      	<h4>Apple <span>Watch</span></h4>
      	<h3>THE NEW</h3>
      </div>
    • (Homepage - 2) Banner 2 Content
      <div class="banner-text bc-style3">
      	<h4>Sale <span>25%</span> Off</h4>
      	<h3>For This Week!</h3>
      </div>
    • (Homepage - 3) Banner 1 Content
      <div class="h3-bc-style1">
      	<div class="banner-text">
      		<span><a href="#">Collection</a></span>
      		<h3><a href="#">Summer</a></h3>
      	</div>
      	<div class="number">
      		<span>1</span>
      	</div>
      </div>
    • (Homepage - 3) Banner 2 Content
      <div class="h3-bc-style1">
      	<div class="banner-text text-position">
      		<span><a href="#">Accessories</a></span>
      		<h3><a href="#">Radio</a></h3>
      	</div>
      	<div class="number">
      		<span>2</span>
      	</div>
      </div>
  3. Layout 3 : 3 column layout comes with slider, you can add more than 3 images for this style and it will be converted to slider automatically. The ideal image size for this layout should be 580x215
    top-banners-layout-3

    Please refer below banner caption for display different style and position in single banner. You can copy-past content in Add Banner.

    • (Homepage - 5) Banner 1 Content
      <div class="h5-bc-style1">
      	<div class="banner-text">
      		<span><a href="#">New Series</a></span>
      		<h3><a href="#">Power Tools</a></h3>
      	</div>
      </div>
    • (Homepage - 5) Banner 2 Content
      <div class="h5-bc-style1">
      	<div class="banner-text text-position1">
      		<span class="colour"><a href="#">Special Sale</a></span>
      		<h3><a href="#"><span>25%</span>OFF</a></h3>
      	</div>
      </div>
    • (Homepage - 5) Banner 3 Content
      <div class="h5-bc-style1">
      	<div class="banner-text text-position2">
      		<h3><a href="#">Power Tools</a></h3>
      		<span><a href="#">&amp; Accessories</a></span>
      	</div>
      </div>
    • (Homepage - 11,12) Banner 1 Content
      <div class="h11-bc-style1">
      	<div class="banner-text">
      		<span><a href="#">Accessories</a></span>
      		<h3><a href="#">man</a></h3>
      	</div>
      	<div class="number">
      		<span>1</span>
      	</div>
      </div>
    • (Homepage - 11,12) Banner 2 Content
      <div class="h11-bc-style1">
      	<div class="banner-text text-positon2">
      		<span><a href="#">Collection</a></span>
      		<h3><a href="#">Summer</a></h3>
      	</div>
      	<div class="number n-2">
      		<span>2</span>
      	</div>
      </div>
    • (Homepage - 11,12) Banner 3 Content
      <div class="h11-bc-style1">
      	<div class="banner-text text-positon3">
      		<span><a href="#">Jewelry</a></span>
      		<h3><a href="#">Woman</a></h3>
      	</div>
      	<div class="number n-4">
      		<span>3</span>
      	</div>
      </div>
    • (Homepage - 8) Banners no Content only Images.
  4. Layout 4 : This layout comes with large banner slider 4 column layout, you can add more than 4 images for this style and it will be converted to slider automatically. The ideal image size for this layout should be 459x765

  5. top-banners-layout-4

    Please refer below banner caption for display different style and position in single banner. You can copy-past content in Add Banner.

    • (Homepage - 10) Banner 1 Content
      <div class="h10-bc-style1">
      	<div class="banner-text">
      		<h3>Cosmetics</h3>
      		<span>4 items</span>
      	</div>
      </div>
    • (Homepage - 10) Banner 2 Content
      <div class="h10-bc-style1">
      	<div class="banner-text">
      		<h3>Cosmetics</h3>
      		<span>4 items</span>
      	</div>
      </div>
    • (Homepage - 10) Banner 3 Content
      <div class="h10-bc-style1">
      	<div class="banner-text">
      		<h3>Fashion</h3>
      		<span>11 items</span>
      	</div>
      </div>
    • (Homepage - 10) Banner 4 Content
      <div class="h10-bc-style1">
      	<div class="banner-text">
      		<h3>Flower</h3>
      		<span>3 items</span>
      	</div>
      </div>

Add/Edit Banner

As shown in the image below, select Banners Layout as you selected style. Now in the Banner section click on Add Item, add the image of your choice. In the content section add the caption of your choice as per your requirement. You can add captions for multiple languages if your site is multilingual.

You can also change the sort order of added images by simple drag and drop.

Banner List
Add/Edit Banner Content

Image > Add the image of your choice.

Content > In the content section add the caption of your choice as per your requirement. You can add captions for multiple languages if your site is multilingual. If you want to display only image you can leave blank this content.

Link > In this option you can set banner link.

Status >The status of that image must be set to enable if you want to display that particular banner in front.

  • Middle Banners Settings

    Set the value of Display Middle Banners to Yes and it will be displayed on the front page. Upload the image of your choice and add the caption in following predefined format. This middle banners is a large preview promo section in which only single large wide image can be uploaded.

    Banner Image > Add the image of your choice.

    Content > In the content section add the caption of your choice as per your requirement. You can add captions for multiple languages if your site is multilingual. If you want to display only image you can leave blank this content.

    Please refer below sample banner caption for display different style and position in middle banner.

Middle Banner Content

  • (Homepage - 1) Middle Banner Content
    <div class="full-banner-text">
    	<h4><a href="#">Applique Prom Dress</a></h4>
    	<h3><span>Prom Dresses</span><a href="#">,</a><a href="#">Fashion</a></h3>
    	<div class="price">
    		<span class="old-price"><del>$230.00</del></span>
    		<span class="new-price">$210.00</span>
    	</div>
    	<div class="timer">
    		<div data-countdown="2017/12/15"></div>
    	</div>
    </div>

    For Count Down Product set countdown date below code.

    <div data-countdown="2017/12/15"></div>

  • (Homepage - 2) Middle Banner Content
    <div class="banner-timer">
    	<div class="col-md-2">
    		<div class="timer">
    			<div data-countdown="2017/12/15"></div>
    		</div>
    	</div>
    	<div class="col-md-10">
    		<h4><a href="#">Applique Prom Dress</a></h4>
    	</div>
    </div>

    For Count Down Product set countdown date below code.

    <div data-countdown="2017/12/15"></div>

  • (Homepage - 5) Middle Banner Content
    <div class="full-banner-text">
    	<h4><a href="#">Applique Prom Dress</a></h4>
    	<h3>
    		<span>From</span>
    		<a href="#">Cosmetics,</a>
    		<a href="#">Digital</a>
    		<a href="#">Handtools</a>
    		<a href="#">Jewellery</a>
    		<a href="#">Pet</a>
    	</h3>
    	<div class="price">
    		<span class="old-price"><del>$230.00</del></span>
    		<span class="new-price">$210.00</span>
    	</div>
    	<div class="timer">
    		<div data-countdown="2017/12/15"></div>
    	</div>
    </div>

    For Count Down Product set countdown date below code.

    <div data-countdown="2017/12/15"></div>

  • (Homepage - 8) Middle Banner Content
    <div class="full-banner-text">
    	<h4><a href="#">Kid floral shirt</a></h4>
    	<h3>
    		<span>From</span>
    		<a href="#">Kids,</a>
    	</h3>
    	<div class="price">
    		<span class="old-price"><del>$102.00</del></span>
    		<span class="new-price">$99.00</span>
    	</div>
    	<div class="timer">
    		<div data-countdown="2017/12/15"></div>
    	</div>
    </div>

    For Count Down Product set countdown date below code.

    <div data-countdown="2017/12/15"></div>

  • (Homepage - 9) Middle Banner Content
    <div class="full-banner-text">
    	<h4><a href="#">Sienna plantation animal</a></h4>
    	<h3>
    		<span>From</span>
    		<a href="#">Cosmetics</a>
    		<a href="#">Digital</a>
    		<a href="#">Fashion</a>
    		<a href="#">Flower</a>
    		<a href="#">Pet</a>
    	</h3>
    	<div class="price">
    		<span class="old-price"><del>$102.00</del></span>
    		<span class="new-price">$99.00</span>
    	</div>
    	<div class="timer">
    		<div data-countdown="2017/12/15"></div>
    	</div>
    </div>

    For Count Down Product set countdown date below code.

    <div data-countdown="2017/12/15"></div>

  • Bottom Banners Settings

    Set the value of Display Bottom Banners to Yes and select the layout style of your choice.

    The theme comes with 3 display styles of Bottom banners, Select the choice of your display style and it will be applied to your front store.

    Please refer below Configuration Bottom Banner for display different style and position in middle banner.

Configuring Bottom Banners

The layout styles are explained below in detail, select the layout and display style of bottom banners as per your requirement.

The Slider section add, edit and delete banner go to Link.

Following list of style for bottom banners.

  1. Layout 1 : 4 column layout comes with slider, in middle banner combine 2 columns. you can add more than 4 images for this style and it will be converted to slider automatically. The ideal image size for this layout should be Fist and Last Columns 380x550, Middle Columns 380x265
    bottom-banners-layout-1

    Please refer below banner caption for display different style and position in single banner. You can copy-past content in Add/Edit Banner.

    • (Homepage - 4) Banner 1 Content
      <div class="h4-bc-style1">
      	<div class="banner-text">
      		<h3><a href="#">New lamp</a></h3>
      		<span><a href="#">Living Room Lamp</a></span>
      	</div>
      </div>
    • (Homepage - 4) Banner 2 Content
      <div class="h4-bc-style1">
      	<div class="banner-text text-position1">
      		<span><a href="#">Living Room Furniture</a></span>
      		<h3><a href="#">Upholstered</a></h3>
      	</div>
      </div>
    • (Homepage - 4) Banner 3 Content
      <div class="h4-bc-style1">
      	<div class="banner-text text-position2">
      		<span><a href="#">The New</a></span>
      		<h3><a href="#">Bookcase</a></h3>
      	</div>
      </div>
    • (Homepage - 4) Banner 4 Content
      <div class="h4-bc-style1">
      	<div class="banner-text text-position2">
      		<span><a href="#">Silver Nailheads</a></span>
      		<h3 class="pad"><a href="#">Stool</a></h3>
      	</div>
      </div>
  2. Layout 2 : 4 column layout comes with slider, in Last banner combine 2 columns. you can add more than 4 images for this style and it will be converted to slider automatically. The ideal image size for this layout should be Fist column 380x550, Middle column 480x550 and Last columns 280x265
    bottom-banners-layout-2

    Please refer below banner caption for display different style and position in single banner. You can copy-past content in Add/Edit Banner.

    • (Homepage - 7) Banner 1 Content
      <div class="h7-bc-style1">
      	<div class="banner-text">
      		<span>Flower Collection</span>
      		<h3>Spring</h3>
      	</div>
      </div>
    • (Homepage - 7) Banner 2 Content
      <div class="h7-bc-style1">
      	<div class="banner-text text-position1">
      		<h3><span class="size">20%</span> Off</h3>
      		<span>New Flower</span>
      	</div>
      </div>
    • (Homepage - 7) Banner 3 Content
      <div class="h7-bc-style1">
      	<div class="banner-text text-position2">
      		<span>Accessories</span>
      		<h3>Summer</h3>
      	</div>
      </div>
    • (Homepage - 7) Banner 4 Content
      <div class="h7-bc-style1">
      	<div class="banner-text text-position1">
      		<h3>Red Roses</h3>
      		<span>For her</span>
      	</div>
      </div>
  3. Layout 3 : 2 column layout comes with slider, you can add more than 2 images for this style and it will be converted to slider automatically. The ideal image size for this layout should be 580x215
    bottom-banners-layout-3

    Please refer below banner caption for display different style and position in single banner. You can copy-past content in Add/Edit Banner.

    • (Homepage - 2) Banner 1 Content
      <div class="banner-text text-positon bc-style2">
      	<h4>Apple <span>Collection</span></h4>
      	<h3>SALE OFF <span>25%</span> NOW</h3>
      </div>
    • (Homepage - 2) Banner 2 Content
      <div class="banner-text bc-style4">
      	<h4>New Apple <span>Imac</span></h4>
      	<p>RETINA. NOW IN COLOSSAL <br>AND GINORMOUS.</p>
      </div>

With the theme, you can add custom sidebar banners in Slider Style. The sidebar banner is a custom Sidebox which can be enabled or disabled from Admin > Tools > Layout Boxes Controller. Look for box name zen_sidebar_banner.php and you can change the position of sidebox too as in normal sidebox process.

Using the Sidebar Banner section under them admin panel, you can add banners as per your requirement. Internal/External link can also be added for the particular banner.

Sort order of banners can be changed using simple drag and drop.

Using this section you can add custom images to your news. As shown in the image below, the News title will be displayed in the dropdown. If your store is multilingual and you have added the News for all those languages, same News title will display for all languages.

Select the News Title of your choice, upload the image and click on Save Settings button. These images will be displayed in the News box section on home page as slider and also in the News detail page as shown in the two images below.

Category Page Layout > Here you can set Categories page Layout.

Categories Styles > Here you can choose options for display categories.

  • Display Style - 1
  • Display Style - 2


In Categories List you can set the number of categories display per row for Category Page. you can set different size to display number of categories for responsive.

This options affected selected category page layout only.


In Categories Product Slider you can set the number of products display in Featured, Specials, New etc.. slider for Category Page.

This options affected selected category page layout only.

Product List Page Layout > Here you can set the page layout for the product listing pages.

Product List > In the Products List settings, you can set the number of products to display per row for PC, tablet and mobile screen sizes.

Additional Image Style > Here you can set additional image styles Default, Hover Effect and Slider View.

If you choose Hover Effect you can set 3 different style(Fade Effect, Flip Effect and Vertical Slide Effect) for display on hover image

Product Info Page Layout > Here you can set the layout for the product info page.

Product Image Layout > Here you can set Product Image Layouts (Big Size, Medium Size and Small Size).

  • Big Size
  • Medium Size
  • Small Size

Product Tab Layout > Here you can set Product Tab Styles (Default and Fancy).

  • Default
  • Fancy

Product Image Effect > Here you can set Product Image Effect Style (Elevate Zoom and Fotorama Slider).

  • Elevate Zoom
  • Fotorama Slider


In these options you can set Hide/Show products elements in product page.


In Product Page Slider you can set the number of products to display per row for PC, tablet and mobile screen sizes.

This option only affects the product info page.

The theme comes with 13 premade homepage layouts which you can use by going to Admin > Tools > Template Settings > Home Page

We have made the configuration of the theme very easy with the Advanced theme panel, though if you desire to replicate one of our homepage demos follow the steps mentioned below.

Before continuing we expect that you have read the Template Settings thoroughly and are very well aware of setting up those values, so this section will not cover any of those part.


To edit homepage content go to Store Admin > Tools > Define Pages Editor.

Select define_homepage_xxx.php homepage version want to edit. Here you can add/delete/edit content and change position of content.

The theme provides short codes for specific content like Slider Revolution, Top Banner, Bottom Banner etc..

Following list of short codes are for the homepage only.

  • Slider Revolution

    Slider Revolution allows you to create beautiful animated slideshows on the homepage.

    The slider revolution short code is as follows:

    <!-- slider-area-start -->
    <div class="slider-area">
    	[rev_slider alias="REVOLUTION-SLIDER-ALIAS"]
    </div>
    <!-- slider-area-end -->

    REVOLUTION-SLIDER-ALIAS > Set the Slider Revolution Alias to the name of the slideshow that you want to display on the homepage. The name of the slide show can be found by going to: Admin > Tools > Template Settings > Slider Revolution

  • Top Banner

    The Top Banner short code is used to display top banners on the home page. You can set top banner styles and Add/Edit/Delete Banners from Template Settings.

    <!-- banner-area-start -->
    <div class="banner-area banner-style-2 hm6 pt-50">
    		<div class="row">
    			[top_banner]
    		</div>
    </div>
    <!-- banner-area-end -->
  • Middle Banner

    The Middle Banner short code is used to display full width and box view banners on the home page. You can handle middle banner from Template Settings.

    <!-- banner-area-start -->
    <div class="fwb-s1">
    [middle_banner]
    </div>
    <!-- banner-area-end -->
  • Bottom Banner

    The Bottom Banner short code is used to display different styles of bottom banners on the home page. You can handle the bottom banner from Template Settings.

    <!-- bottom-banner-start -->
    <div class="banner-area">
    	<div class="container">
    		<div class="row">
    			[bottom_banner]
    		</div>
    	</div>
    </div>
    <!-- bottom-banner-end -->
  • Product Tab Slider

    The Product Tab slider short code is used to display the Featured, Bestseller, New Products and Specials products slider on the home page.

    <!-- product-area-start -->
    <div class="product-area ptb-50">
    	<div class="container">
    		<div class="row">
    			<div class="col-lg-12">
    				<!-- tab-menu-start -->
    				<div class="tab-menu text-center mb-30">
    					<ul>
    						<li class="active"><a href="#BEST" data-toggle="tab" aria-expanded="true">NEW</a></li>
    						<li class=""><a href="#FEATURED" data-toggle="tab" aria-expanded="false">FEATURED</a></li>
    						<li class=""><a href="#SALE" data-toggle="tab" aria-expanded="false">ON SALE</a></li>
    					</ul>
    				</div>
    				<!-- tab-menu-end -->
    			</div>
    		</div>
    		<div class="tab-content">
    			<div id="BEST" class="tab-pane active">
    				<div class="row">
    					[product_tab_slider type="best_sellers" show_columns='4' show_lg_columns='3' show_md_columns='3' show_sm_columns='2' show_xs_columns='2' title="none"]
    					
    				</div>
    			</div>
    			<div id="FEATURED" class="tab-pane">
    				<div class="row">
    					[product_tab_slider type="featured_products" show_columns='4' show_lg_columns='3' show_md_columns='3' show_sm_columns='2' show_xs_columns='2' title="none"]
    				</div>
    			</div>
    			<div id="SALE" class="tab-pane">
    				<div class="row">
    					[product_tab_slider type="special_products" show_columns='4' show_lg_columns='3' show_md_columns='3' show_sm_columns='2' show_xs_columns='2' title="none"]
    				</div>
    			</div>
    		</div>
    	</div>
    </div>
    <!-- product-area-end -->

    Below is a list of options that are supported in this short code.

    • type > Here you can set products type new_products, featured_products, best_sellers and special_products options.
    • max_products > Here you can set maximum numbers of products display in slider.
    • show_columns > Here you can set numbers of products display in slider.
    • show_lg_columns > Here you can set numbers of products Above 1199px width.
    • show_md_columns > Here you can set numbers of products within (992px - 1198px) width.
    • show_sm_columns > Here you can set numbers of products within (768px - 991px) width.
    • show_xs_columns > Here you can set numbers of products within (480px - 767px) width.
    • show_rows > Here you can set numbers of rows display in slider.
    • title > Set the title to display in slider title. if you want to hide slider title set none options.
  • Product Slider

    The product slider short code is used to display the Featured, Bestseller, New Products and Specials products slider on the home page.

    [product_slider type="new_products" max_products='6' show_columns='4' show_lg_columns='3' show_md_columns='3' show_sm_columns='2' show_xs_columns='2' title="NEW ARRIVAL"]

    Below is a list of options that are supported in this short code.

    • type > Here you can set products type new_products, featured_products, best_sellers and special_products options.
    • max_products > Here you can set maximum numbers of products display in slider.
    • show_columns > Here you can set numbers of products display in slider.
    • show_lg_columns > Here you can set numbers of products Above 1199px width.
    • show_md_columns > Here you can set numbers of products within (992px - 1198px) width.
    • show_sm_columns > Here you can set numbers of products within (768px - 991px) width.
    • show_xs_columns > Here you can set numbers of products within (480px - 767px) width.
    • show_rows > Here you can set numbers of rows display in slider.
    • title > Set the title to display in slider title. if you want to hide slider title set none options.
  • Product Micro Slider

    Product Micro slider short code is used to display the Featured, Bestseller, New Products and Specials products slider on the home page.

    <!-- product-area-start -->
    <div class="product-list-area ptb-50">
    	<div class="container">
    		<div class="row">
    			<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
    				<div class="row">
    				[product_micro_slider type="new_products" max_products='6' show_columns='1' show_rows='3' title="TRENDING"]
    				</div>
    			</div>
    			<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
    				<div class="row">
    				[product_micro_slider type="special_products" max_products='3' show_columns='1' show_rows='3' title="ON SALE"]
    				</div>
    			</div>
    			<div class="col-lg-4 col-md-4 hidden-sm col-xs-12">
    				<div class="row">
    				[custom_products products_style="micro_slider" products="309,303,300" max_products='3' show_columns='1' show_rows='3' title="TOP RATE"]
    				</div>
    			</div>
    		</div>
    	</div>
    </div>
    <!-- product-area-end -->

    Below is a list of options that are supported in this short code.

    • type > Here you can set products type new_products, featured_products, best_sellers and special_products options.
    • max_products > Here you can set maximum numbers of products display in slider.
    • show_columns > Here you can set numbers of products display in slider.
    • show_lg_columns > Here you can set numbers of products Above 1199px width.
    • show_md_columns > Here you can set numbers of products within (992px - 1198px) width.
    • show_sm_columns > Here you can set numbers of products within (768px - 991px) width.
    • show_xs_columns > Here you can set numbers of products within (480px - 767px) width.
    • show_rows > Here you can set numbers of rows display in slider.
    • title > Set the title to display in slider title. if you want to hide slider title set none options.
  • Custom Products

    The Custom Products short code is used to set custom products (using products ids) to display in the product slider on the home page.

    [custom_products products_style="micro_slider" products="309,303,300" max_products='3' show_columns='1' show_rows='3' title="TOP RATE"]

    Below is a list of options that are supported in this short code.

    • products_style > Here you can set products style slider and micro_slider options.
    • products > Here you can set custom products ids with comm(,) separater.
    • max_products > Here you can set maximum numbers of products display in slider.
    • show_columns > Here you can set numbers of products display in slider.
    • show_lg_columns > Here you can set numbers of products Above 1199px width.
    • show_md_columns > Here you can set numbers of products within (992px - 1198px) width.
    • show_sm_columns > Here you can set numbers of products within (768px - 991px) width.
    • show_xs_columns > Here you can set numbers of products within (480px - 767px) width.
    • show_rows > Here you can set numbers of rows display in slider.
    • title > Set the title to display in slider title. if you want to hide slider title set none options.
  • Sidebar Megamenu (Verticle Megamenu)

    The Sidebar Megamenu short code is used to display vertical megamenu on the home page. You can handle mega menu from Template Settings.

    <!-- left-menu-start -->
    	[sidebar_megamenu]
    <!-- left-menu-end -->
  • News Box Slider

    The News Box slider short code is used to display latest news on the home page. You can handle news box from Template Settings.

    <!-- product-area-end -->
    <div class="blog-slider-s1">
    [news_slider title="Latest News" title_position="center" ]
    </div>
    
    <!-- service-area-2-start -->

    Below is a list of options that are supported in this short code.

    • title > Set the title to display in slider title.
    • title_position > You can set left, center and right position for dislay slider title.
  • Testimonials

    The Testimonials short code is used to display a testimonial slider on the home page. you can handle testimonials from Template Settings.

    <!-- testimonails-area-start-->
    <div class="testmonial-area">
    [testimonials]
    </div>
    <!-- testimonails-area-end-->
  • Brands Slider

    The Brands Slider short code is used to display the brands slider on the home page.

    <!-- brand-area-start -->
    <div class="brand-area ptb-50">
    	<div class="container">
    		<div class="row">
    			[brands_slider]
    		</div>
    	</div>
    </div>
    <!-- brand-area-end -->
  • Instagram

    The Instagram short code is used to display an Instafeed on the home page. You can handle instagram from Extra Configuration.

    <!-- instagram-area-start -->
    <div class="instagram-area">
    	[instagram]
    </div>
    <!-- instagram-area-end -->	
  • Language and Currency Dropdowns are shown in the top bar of the theme. You can disable them if you do not require them in your store. Follow the below steps to do so :
  • Login to your store Admin Panel and go to Admin > Configuration > Layout Settings.
  • At the bottom of page you will find option Show Languages in Header? for languages and Show Currencies in Header? for currencies. Both the values are set to "True" by default, change the value to "False" to remove it from Top Bar/Header.
  • The website comes integrated with the Disqus comments - a popular commenting system that lets users leave comments and discuss your products..
  • You can sign up for a disqus account here
  • You need to enter your disqus account name by going to Admin > Configuration > Disqus Comments.
  • In this section you will see the option to enable or disable the disqus comments.
  • The website comes with the News Box Manager plugin preinstalled. The configuration settings can be found under Admin > Configuration > News Box Manager. You can set the Items to show on Home page and for Sidebox too. The News content lenght can also be changed using these options.
  • If you are willing to add new News for your store, go to Admin > Localization > News Box Manager where all your current news will be displayed. You can also insert/add latest news story for your store using this option.
  • Best Seller products are displayed on the Home page in Products Tab.
  • To disable the Best Seller Products from HomePage go to Admin > Configuration > Best Seller and set the value of Show Best Sellers - Main Page to "0".
  • You also increase the number of Best Seller products to display on Homepage, which is by default set to "9".
  • Best Seller products image height/width can be set using from this section.
  • To edit Instagram Settings go to Store Admin > Tools > Define Pages Editor.
  • Select define_instagram_feed.php file to edit. Here you can set instagram content, user id, clientId etc. as per your requirement.

The Structured Data Configuration Plugin automatically adds Google Rich Snippets that give you a more prominent listing in the google search results. The plugin includes Facebook and Twitter structured markup as well as Schema markup that is added in three blocks: organisation, breadcrumbs and product (including reviews).

  • To Add Organization Information and other configuration options, go to Store Admin > Configuration > Structured Data Configuration..

We have used the following plugins in the website. All the credit goes to their respective owner/developer.

  • Ajaxcart - Ajax Add to cart

    AjaxCart allows users to add products to their cart without re-loading the page, saving the customer's time. The plugin supports default functionality, which means multiple products can be added from the Home Page and Product listing pages such as All product, New Products, Featured Products and Category listing.

    The plugin is responsive, with a unique flyout cart displayed in smaller devices to make your store standout from the others. Items in the Shopping cart can also be updated or deleted individually based using this plugin.

  • Quick View

    Quickview is the Quickview plugin used to display products. The plugin can be installed easily without any core file overwrite. The plugin is responsive and supports all device sizes.

    The Quickview can be added for all type of products be it on the home page or the product listing pages.

  • Language Currency Links in Header

    It is used to display the language and currency.

  • Compare Multiple Products

    This contribution adds a comparison system to the product listing page. It is done through a session so that products can be compared across multiple categories.

  • Wishlists

    This allows registered users to "save" products in personal wishlists.

  • Column Layout

    This allows users to view products in a column layout grid.

  • Image Handler

    Image Handler 4 is designed to ease the management of product images (particularly the management of additional product images), and to help improve page performance by optimizing the product images.

  • Reviews

    This Plugin is used to view product reviews on product info page.

  • Disqus Comment Form

    This module give your site the capability to create a comments form on product info page.

  • Css/Js Loader

  • Dynamic Filter

  • Instant Search

  • Best Seller Reloaded

  • Related Products

  • Dynamic Price Updater

  • Ultimate SEO URLs

  • Manufacturers Listing

  • News Box Manager

  • Testimonial Manager

We have used the following jQuery plugins in the website.

  • Owl Carousel

    It is used to create product sliders.

  • Menucool Colour Picker

    It is used to choose multiple colour for theme from admin panel.

  • jQuery Slider Revolution

    Slider revolution is used as the Main Slider for the theme.

  • Slider Revolution jQuery Visual Editor

    The revolution editor is used to edit the sliders in a live preview mode.

  • Google Hosted jQuery

    It is a fast and concise javascript library designed to change the way that you write javascript.

    Other jQuery include : Modernizer JS, Fotorama Image Slider

Thanks for using our Theme!

If you have any questions / issues you can contact us any time by submitting a request on our support page.

>