Premium Multipurpose Theme Documentation

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..
Social Links

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

Enter the Social links info in the text boxes provided. As of now the Theme supports Facebook, Twitter, Pinterest, Google Plus and Instagram for your store. This links will be displayed on the header top bar, footer column and on contact us page. Leave the text box empty to remove that particular social link.
Instagram > Instagram images feed can also be displayed in the HomePage. The instafeed js code can be edited from Admin > Tools > Define Pages Editor and select define_instagram_feed.php file. For more options you can find the guide on Instafeed. Change the values of userId, clientId and accessToken in the mentioned file. Get these values from your Instagram account, for further information please visit the provided Instafeed link.
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. 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.

Google ReCAPTCHA

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

You can add the Google captcha field to the Create Account page and the Contact Us page, to prevent spam mails.

For that first login to your Google account and go to Google Recaptcha Page. This will open the page as shown below. Add the label and your Domain name as asked and click on register.

Once register button is clicked, you will be redirected to the catpcha set up page, where Secret Key and Site Key will mentioned as shown in the image below.

Copy this Site Key and Secret key, paste them to the Google Captcha Section of theme admin panel as shown in the image below.

Click on Save Settings button and the changes will be applied to the front of store.

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 - 2
  - Header Style - 3
  - Header Style - 4
  - Header Style - 5

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.

Footer Settings
- Select the footer style of your choice using this option. The live demo of footer styles are visible on our demo.
- The theme comes with 2 footer styles as shown in the images below :
  - Footer Style - 1
  - Footer Style - 2
Payment Image > The payment methods image gets displayed in the copyright section of Footer, you can upload the image as per your requirement..

Copyrights > Here you can set your store copyrights text.
Store Info

Go to Tools > Template Settings > Footer > Store Info Panel section to start your custom settings configuration.

Footer Logo > Add your store logo using this option.

Store Address > Here you can set your store address.

Contact Number > Here you can set your store contact number.

Email > Here you can set your store Email Id.

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.
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.
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 :
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
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
- Display without Slider
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.

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.

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

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>

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

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>

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

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.

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

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.

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.