Koolshop- Wordpress theme

Installation and Quick Start Guide    -     Thank you for your purchasing

  1. Wordpress Installation
  2. FTP Installation
  3. Install Needed Plugins

After Installation

  1. Import Demo Content
  2. Import Layer slider data
  3. Import Theme Option (One Click)
  4. Menu setting
  5. Homepage & Blog page setting.
  6. How to update Koolshop theme?

THEME SETTINGS

  1. General Settings
  2. Blog Setting
  3. Header Setting
  4. Footer Settings
  5. Woocommerce Setting
  6. Mailchip Settings
  7. Popup Newsletter
  8. Create Main Menu
  9. Page settings
  10. Size Chart
  11. Ajax Search
  12. Social Share

Koolshop theme Shortcodes

  1. KT Banner
  2. KT Banner Child
  3. KT Custom Banner
  4. KT Single Banner
  5. KT Container
  6. KT Mega Categories
  7. KT Mega Category
  8. KT Mega Category Url
  9. KT Feature Box

Thank you!

 

General

We would like to thank you for purchasing Koolshop WordPress theme! We are very pleased that you have chosen Koolshop for your website, you will not be disappointed! Before you get started, please be sure to always search our Documentation and Knowledgebase, and also watch our Video Tutorials. The large search field in the left sidebar allows you to quickly and easily search through our resources to find answers. We outline all kinds of good information, and provide you with all the details you need to use KoolshopKoolshop can only be used with WordPress and we assume that you already have WordPress installed and ready to go. If you do not, please see our section on WordPress to help you get started.

1. WordPress Information

 

To install this theme you must have a working version of WordPress already installed. If you need help installing WordPress, follow the instructions in WordPress Codex.

 

2. Requirements For Koolshop

Before you begin the install, checking to ensure that you have the minimum requirements for Koolshop is WordPress 4.4.0 or highter, PHP 5.4 or highter and MySQL 5.4 or highter.

Recommended PHP Configuration Limits

Many issues that you may run into such as; white screen, demo content fails when importing, empty page content with Fusion Builder and other similar issues are all related to low PHP configuration limits. The solution is to increase the PHP limits. You can do this on your own, or contact your web host and ask them to increase those limits to a minimum as follows:

  • max_execution_time 180
  • memory_limit 128M
  • post_max_size 32M
  • upload_max_filesize 32M

 

Installation

1. Wordpress Installation

Flease see this video guide to know how to install and set general configuration for Koolshop theme.

Step 1. Download ZIP package from Themeforest and then unzip it.

Step 2. In unzipped folder you will find the three folders are: Plugins (js_composer.zip; kute-toolkit-v1.0.1.zip; revslider.zip); Sample Data (that contains sample data like xml file or slider...); Koolshop theme (that consist of the theme + the Child theme).

Step 3. In your Wordpress Dashboard, navigate to Appearance=> Themes.

 

Step 4. Click on Add New, then click on Upload Theme and browse the Koolshop-vx.x.x.zip file in unziped folder, finally click Install Now.

Step 5. Wait for a while until the installation complete then select Activate link  to activate theme. Theme has been installed and actived. Beside that you can also click to Live Preview to view this theme.

 

 

2. FTP Installation

Install Koolshop Via FTP

Step 1 – Log into your hosting space via an FTP software like File Zilla.

Step 2 – Unzip the Koolshop-v.x.x.x.zip file and only use the extracted "Koolshop" folder.

Step 3 – Upload the extracted Koolshop theme folder into wp-content > themes folder.

 

Step 4 – Activate the newly installed theme by going to Appearance > Themes and clicking the Activate button.

Step 5 – Once you activate Koolshop theme, you will then see a notification message to install the required plugins: WooCommerce…

 

Step 6 – Follow the the notification message to install and activate required & recommended plugins.

 

3. Install Needed Plugins:

Koolshop Theme recommended you use the following plugins:

After installed Koolshop theme sucessfully, you will be noticed to install required plugins, just following the instruction you will get all settings.

After click on "Begin installing plugins", you will see the box below:

The installation process may take few minutes, so please be patience. All installations have been completed.

Scrolling down and click on the link "Return to the Dashboard" to go back your Dashboard.

 

Following next steps if you want to install sample data like our demo website.

Video guide here

 

After Installation

1. Import Demo content.

If you`re using the theme to build a new website which doesn`t have the content yet, I strongly recommend you to use the demo content files. This theme includes xml data files which allows you to upload the demo content to your website. The content is the same as in the Live Demo Preview.

You can follow these steps below to import the Sample data:

Feel free to watch the video guide here

Step 1: Go to Dashboard =>Tool=> Import

Step 2: Install plugin WordPress Importer

 

Step 3: Run Importer

 

Step 4: Click on Choose File button and go to the folder that you save the file. Find the filename.xml of the Demo you want to display on your site then click Upload file and import button.

 

Step 5: Check Download and import file attachments checkbox and select user for post's author before submit to start import sample data:

 

Wait for the importer working until this pop up appear that meant your import completed.

 

2. Import Layer Slider data.

Feel free to watch the video guide here

Step1: Go to Dashboard=> Revolution Slider

Step 2: Import sliders

The Import Slider popup will appears, click Choose File button then go to the folder that you save the file, for example "Koolshop-opt1.zip" in the Sample Data file then click to Import button:

The slider has been imported successfully.

 

Manipulate the similar steps to import the other sliders to your site.

 

3. Import Theme Option ( One Click)

- In case you would like to use our available configurations such as Logo, theme color, sidebars, header, footer, blog...You just navigate to Koolshop >>Install Demo on the left sidebar menu.

 

- It will take you to the page that list all layout options, you can select any demo, just by one click.

 

Wait a while for completing.

 

You have to go to Dashboard =>Appearance =>Menus to set menu like our demo menu.

- Select Manage Location tab to set theme Location and Assigned Menu:

- Select "Edit Menu" tab to edit menus.

 

4.1 Primary menu

 

 

4.2 Vertical menu

 

 

4.3 Account Menu

 

 

4.4 Top bar left menu.

 

 

4.5 Top bar right menu.

 

 

5. Setting Homepage and Blog page

- Go to Dashboard => Settings => Reading:

- It will takes you to the Reading Settings page, from this page you should care about some of the following selections:

In the "Front page displays" section, check on the button list "A static page"[1], then select Front page [2] and Post page[3] like the screenshot above if you want the front page display as our demo or you can also make your own front page displays.

Finally click on "Save Changes" button to save your settings.

 

6. How to update Koolshop theme?

If you would like you update your current theme to the latest version, pls following the below guideline.

- Go to Appearance >> Themes

 

- In below screenshot, Koolshop theme is actived, so you need to deactive it then remove it from your site.

 

 

 

 

- Click on "Add new" button to add new Koolshop version to your site.

 

 

 

- The update is completed successfully.

 

Theme settings

1. General Setting

1.1 How to Add Logo and Favicon?

Go to Koolshop => Theme Options => General=>"Logo & Favicon" tab

You can upload site's logo in [1] anh favicon logo in [2]

 

Note: How to upload Favicon For WordPress Version 4.3 or later

WordPress Version 4.3 implemented Site Icon feature that enables favicon in your web site. It is recommended that you use the Site Icon feature, instead of following the guidance below. When you use it, you don't need to prepare the favicon.ico file by yourself or modify your template file, just specifying square image that has at least 512 pixels wide and tall from Customizer screen.

Follow the below steps to set favicon in your site.

  1. Prepare image file. It must be square, and at least 512 pixels wide and tall.
  2. Go to Administration Screen > Appearance > Customize
  3. Click Site Identify
  4. Click Select Image at Site Icon section, upload the image file you prepared in the above step from Upload Files tab screen, and click Select.

In General Tab, you can also set the Theme Color and the Sidebar as you want:

 

1.2 How to set Theme color

Firstly, about the Theme color, you just click on this Tab and select the main color, Main Color 2 for your site as the image below:

 

1.3 Sidebar configuration

You can create the Sidebar by clicking on "Add Sidebar"[1] button then enter name[2] and description[3] for your sitebar.

 

You will see the Sidebar that you have just created by going to Appearance/ Widget (look at the screenshot below), now you can drag and drop the widget you want to new Sidebar area.

 

1.4 Enable Lazyload

 

2. Blog Setting

2.1 Blog page tab

Go to KOOLSHOP =>Theme options =>Blog setting, you will see all the settings for your Blog page:

From the image above:

[B1]: Set the Sidebar position, we give you three choices: on Left, on Right and Full.

[B2]: Select Sidebar for your Blog page: click on the arrow down on the right side of box then choose the Sidebar you want.

[B3]: Decide enable or not use the place holder image for the post.

[B4]: Choose the Style for Blog page, it may be Full width or Grid.

 

2.2 Single Page

Beside that, if you have a look at the Single page section, you will see some settings for the Single post page as this image:

 

3. Header setting

Go to Koolshop=>Theme Options => Header and choose the Header option that you want to display on your Homepage.

3.1 General settings

[1] Enable Header Sticky: Choose "Yes" to show Header Sticky when you scrolling down the site.

[2] Enable on Mobile: Choose "Yes" to show header on mobile devices.

[3] Header: Select the Header Style you want to display on your site, there are  11 Unique header layouts from version 1.0.0, once you select the Style, you will see the image preview of this. We will update other Header style in the future.

[4] Don't forget to save the settings.

 

3.2 Vertical Menu

[1] User Vertical Menu ( Show Vertical Menu on any page)

[2] Vertical Menu Title

[3] Vertical Menu Button show all text

[4] Vertical Menu Button close text

[5] Collapse (Vertical menu will expand on click)

[6] The number of visible vertical menu items

 

3.3 Advertising Banner

 

4. Footer Setting.

Go to Koolshop =>Theme option =>Footer, you can select the Footer Style display on your site:

In the currently version, we provide some footer styles that are listed in dropdown[1], we will update more styles in the future.

 

Go to your Dashboard >> Footers. It will take you to the list of footer options that we've builded in this theme by using Visual Composer.

 

If you would like to view the detail footer building of any footer styles that are listed in above screenshot. Pls hover over that one then click on "Edit" button. The Koolshop footer 01 is shown as an example.

 

You can see all shortcodes that we used to build the Koolshop footer 01 in the back-end.

 

Frontend displaying

Beside that, if you do not want to use any Footer Template like our Demo, you can also build your own Footer Style. You can go to Dashboard/ Footers and build the Footer as you want by using Visual Composer.

 

BIG NOTE: In case you can not view shortcodes on this page, pls go to Visual Composer/ Role Manager and enable visual Composer for pages, posts...as below image.

 

Remember to save your setting.

 

5. Woocommerce Setting

Go to Koolshop=>Theme options => Woocommerce, now you will see some main Tabs below:

5.1. In the General Tab:

You can see our demo Woocommerce settings:

Look at the picture above, you will see General settings of Woocommerce:

[1]: Set the number of days to treat the product as a new product.

[2]: Set body background color.

[3]: Enable or not use the Short name of product, if you tick Yes, the product will have a shortname as you set (if it has a long name, it will be cut follow the character that already set)

If you tick on No, the Title will be show on Full name (it may be very long, it depend on your setting)

[4]: Select Style of Grid Product.

 

5.2. In the Shop page Tab: you may set the features for your shop page as the image below:

 

 

5.3. Single Product Tab:

 

You can configure the attributes for your Single product page like the picture above especially the Use Thumbnail Slide, if you select "Slide", it will show on your page like our demo:

and here is the preview image when you select "Grid":

 

- Here is the preview of product page when selecting some settings like above screenshot.

 

5.4. Related product: you can set the number of Related product wil be show on your Single Product page and select the column as you want:

You can see that, you can set the Title for this section as you want. You can look at our demo:

 

5.5. Upsell and Cross sells product:

 

 

 

 

You can select the Up sell and Cross sell products by go to the Product/ Product/ Add new or Select the Product to Edit then complete the Linked product as this screenshot:

Remember to save all your changes.

 

6. Mailchip Settings

 

7. Popup Newsletter

 

You can set the Newsletter configurations in the backend. Go to your Dashboards >>Koolshop>> Theme Options

 

8. Create Main Menu.

This section will guide you how to create the menu like our demo in mega menu format. Mega menu supports for creating two main components are Main menu (level 1) and Submenu (level 2). After installing Koolshop theme, the demo data for menu will be automatically installed. You can see the style of the top menu in the front-end demo. But you need to change the image and the links suitable your shop site.

These images below are the detail instructions for using this section. Main menu (level 1) consists of multi-items, each item has or hasn't got a Submenu (level 2). You can create submenu in normal or mega menu format.

- Mega submenu.

 

- Normal submenu.

 

8.1. How to create Main menu?

Go to Dashboard=> Appearance => Menus

- Click on "Create a new menu" button.

 

- Give your menu a name [2], then click "Create Menu" button.

 

- Set location for this menu as Main menu [3].(or Primary menu)

 

Then, click Save Menu to save the settings. Main menu has been created, We continuously add items for the Main menu and you can see our Main menu structure.

You can see that, you can add all the items at the left side to the menu structure such as page, Custom link, Product Categories, Mega menu....If you can't find "Product Categories" on the left side, take a look at the top (you have to scroll up as far as you can). Here you will find "Screen Options". Press that, and tick on "Products Categories" to enable it. You might have to reload the page after you have done this. Now, you can see "Product Categories" on the left side, then you can add and organize your product categories as you would any other menu item.

 

 8.2. How can I create my own sub-menu (level 2) for item in the main menu (Menu level1)?

Example: Create a sub-menu such as the screenshot below:

Firstly, you need to build a mega menu such as Fashion mega menu by using Visual Composer. To activate the Visual Composer for the mega menu builder, you need to go to WP-admin/ Visual Composer/ Role manager, click on the arrow down on the rightside of Post Types box, select Custom then tick on the item you want as the image below:

Secondly, go to WP-admin/ Mega menu/ Add new and build the mega as you want. You may see our demo mega menu structure:

You can see that, in our demo, we used the shortcode WP Custom Menu and Single Image to build the mega menu, you can change the menu as you want then save and update it.

 

 

9. PAGE SETTINGS

In this section we will show some special settings of a page.

- Go to Dashboard

- Navigate to Pages >> Add New

For above form.

 

10. Size Chart

Pls view this video to know how to create Size chart and configure some settings on Koolshop theme.

 

11. Ajax Search

Setting some attributes for Ajax Search. Go to Kutethemes >> Ajax Search

 

 

12. Social Share

If you would like to show Social sharing on the detail product page, let configure some settings in Kutethemes >> Social Share.

Firstly, you have to check on box "Enable Social Share"[1] as above screenshot then click directly on work-area[2] to select ingredients

 

 

 

Koolshop LAYOUTS

Koolshop is premium responsive Wordpress theme which comes with 15 Unique Home layouts. It is a clean and modern layout with many functions and suits any of your shop. Koolshop used both of VC shortcodes and our KT Shortcodes to build unique home layouts. In this section we will show you all layouts and which KT shorcode are used on them.

Feel free to view all of 15 theme layouts here.

 

Koolshop SHORTCODES

This section will be coming soon!

1. KT Banner

- The shortcode “KT Banner” is useful for creating a group of banners.

 

Some settings for this shortcoder in three tabs: General, Slider settings, Design options.

 

 

The Shortcode "KT Banner" has been created.

 

- Some other shortcodes can be added into this KT Banner such as: Single Image; KT Banner child; KT Custom Banner; KT Single Banner.

 

- Next section will show some shortcodes that have been nested into KT Banner shortcode.

+ The shortcode KT Custom Banner has been added into a group of the KT Banner.

 

Pls refer this link to view the result displaying "Slider" layout on front-end.

Feel free to view video here to know how to use the shortcode "KT Banner" and how to add other shortcodes into it.

 

- The shortcode KT Banner child has been added into a group of the KT Banner.

 

 

 

 

2. KT Banner child

- The shortcode "KT Banner child" is applied for displaying banner, it is just used when nested into shortcode "KT - Banner".

 

Params:

- The layouts of this shortcode is shown on front-end.

 

 

- The KT - Banner child is just used when nested into shortcode "KT - Banner".

 

Front-end displaying

 

3. KT Custom Banner

This shortcode is used to show banner and HTML content.

 

- Parameters of this shortcode is configured in the tabs: General, Text box, Responsive Settings, Design options.

 

After saving all configurations, the "KT Custom Banner" has been added into Visual Composer.

 

"Slider layout 02"

 

"Slider layout" displaying on front-end.

 

Slider layout 04

....

 

4. KT Single Banner

Using this shortcode to display single banner.

 

Params:

 

The shortcode "KT Single banner" have been added.

 

Front-end displaying.

 

5. KT Container

Using this shortcode to display a container, it allow to add other shortcodes into it.

 

- The KT - Container has been created

 

- Param of KT - Container: Some settings for this shortcoder in three tabs: General, Carousel settings and Design options.

 

- Other short - codes have been added into this KT - Container.

 

- Front-end of this shortcode displaying.

....

 

6. KT Mega Categories

Multi purpose to show products of woocommerce.

 

- This short-code has more than ten layouts, each layout has different settings, pls selecting any layout in dropdown list to see the difference.

Layouts for this short-code:

 

- The KT Mega categories short-code has been created.

 

- In particular, there are two other short-codes are "KT Mega category" and "KT Mega category url" can be added inside the short-code "KT Mega categories"

 

 

- Next section will show some demo layouts.

+ Tab Prodcut Style 01

 

+ Tab Prodcut Style 02

 

+ Tab Prodcut Style 03

 

+ Tab Prodcut Style 04

......

 

7. KT- Mega Category

- The shortcode "KT - Mega Category" is applied for showing products, it is just used when nested into shortcode "KT - Mega Categories".

 

Params:

 

- The KT - Mega category is just used when nested into shortcode "KT - Mega Categories".

 

 

 

8. KT - Mega Category Url

This shortcode is used for creating url links, it is nested into the shortcode "KT - Mega Categories".

 

Params:

 

- The KT - Mega category url is just used when nested into shortcode "KT - Mega Categories".

 

9. KT Feature Box

- This shortcode is used for displaying box with title, description, icon, link...

 

- Shortcode settings

 

- This shortcode has been added into Visual Composer

 

- Front-end displaying.

 

 

Thank you!

Once again, thank you so much for purchasing this template. If you have any questions relating to this template, you can submit a ticket on our support system: http://support.ovicsoft.com/support-system We'd be glad to help you.

 

 

 

 

 

 

 

Go to Top