Kute- Boutique

Installation and Quick Start Guide    -     Thank you for your purchasing

  1. Automatic Installation
  2. Install Needed Plugins
  3. Importing Sample Data
  1. Adding Logo and Favicon
  2. Blog Setting
  3. Header Setting
  4. Footer Settings
  5. Woocommerce Setting
  6. Creating AdvanceMenu
  7. Category Menu
  8. Topbar Menu
  9. Top Right Menu

Kute- Boutique Shortcodes

1. Header

2. Banner

3. Block

4. Title

5. Blog

6. Brand

7. KT Tab

8. Woocommerce

9. Featured Product

10. Video

11. Newsletter

12. KT Featured Box

13. Custom Menu

14. Footer

15. Social

16. Group Banner

17. Testimonial

18. KT Team

19. KT Processbar

20. Other Shortcodes

Extra Class

Frequently Asked Questions

Thank you!

 

Getting Started

To install the Kute- Boutique theme. You need to have a version of Wordpress. You can download from here: the download URL. , make sure that you had all needed Wordpress setting. You can install this theme following the way below:

Installation

1. Automatic Installation

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

Step 2. In unzipped folder you will find a folder named " Kute- Boutique theme" and 2 archives: "Kute- Boutique.zip" file and "Sample Data"

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

Step 4. Click on Add New, then click on Upload Theme and browse the Kute- Boutique.zip file, finally click Install Now.

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

 

2. Install Needed Plugins:

Kute- Boutique Theme recommended you use the following plugins:

After installed Kute- Boutique you will be noticed to install required plugins, just follow the instruction you will get all settings.

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

You can install and activate the needed plugin with one-click, this process may take few minutes, so please be patience and wait till all installations have been completed and all needed plugins had been actived.

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

3. Importing Sample Data.

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

3.1 Import Demo content.

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

Step 2: Click on Wordpress to Importer:

Step 3: Install plugin WordPress Importer

Step 4: Click on Choose File button and browse to the folder that you save the file. Find the filename.xml file then click Upload file and import button (Note that, if you want to set up the Demo from Demo 1 to Demo 9, you can import the data in the Boutique 1 folder and if you would like to use the Demo from 10 to 20, you may import the Sample data of Boutique 2 folder.)

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

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

 

3.2 Import Layer Slider data.

Step1: Go to Dashboard=>Revolution Slider

Step 2: Import sliders

The Import Slider popup will appears, click Choose File button then browse to ... "boutique-opt1.zip" in the Sample Data/ Boutique1 folder and click Import button:

The slider 1 have imported successfully.

Manipulate the similar steps to import the other sliders.

3.3 Menu Setting.

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:

Notice that you have to create a menu then you can select which menu will appear in each location. For example: make main menu like our demo, you following some steps as the screenshot below:

Scrolling down to the section "Menu Settings" to assign the menu to the "Primary Menu" location. Finally click on "Save" button to save the setting.

[1]: Select a menu to edit

[2]: Edit main menu structure.

[3]: Name of menu: you can set or change the name of the menu you want to create.

[4]: Theme locations: set the position of menu (Primary Menu)

[5]: Click Save Menu to save the setting.

[6]: Click Delete button to delete menu if you don't want it to display on your homepage.

3.4 Setting Homepage and Blog page

- From 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.

 

After Installation

1. Adding Logo and Favicon

Go to Boutique =>Theme Options =>"Logo & Favicon" tab, you will see 2 main parts: Logo [1] and Favicon [2]

- You can upload your site's Logo [1] and Favicon [2] as you want. Do not forget clicking on the "Save" button to save information.

-  Logo on your site after uploading:

 

2. Blog Setting

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

From the image above:

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

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

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

[B4]: Choose the Style of Blog, it may be Full width, Grid, Masonry.

[B5]: Tick Yes if you want to show About Author section, tick No if you do not want the About Author show on the Blog page.

An example of "About Author":

[B6]; [B7]; [B8]: You may decide showing the Related post or not and set the number of related post per page and the column of it.

 

3. Header setting

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

For above form:

Beside that you can also set the specific attribute for the Header 2 ( Advertisement text ), Header 3 (Slogan) and Header 5 (select Category Menu) by clicking on those sections.

 

4. Footer Setting.

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

Here are those Footer Styles:

Footer Style 1:

Footer Style 2:

Footer Style 3:

Footer Style 7:

Note that, If you haven’t got the other Style Footer as we mentioned above, you just need go to Header/ Footer/ Add new and click on the Add Template as this image:

Once you click on Add Template successfully, you will see the Default Template, now you can choose the Template you want to display on your Footer and configure it as you want:

Beside that, if you do not want to use any Footer Template like our Demo, you can also built your own Footer Style.

How to build the Footer?

You can go to Header/ Footer and built the Footer as you want by using Visual Composer.

You may see our demo structure:

We use some shortcodes to build this footer: Title, Custom menu, Social, Payment.....you can see more about those shortcode in Kute- Boutique short code.

 

5. Woocommerce Setting

Go to Boutique =>Theme options => Woocommerce.

5.1. In the General Tab:

You can see our demo Woocommerce setting:

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

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

[2]: You can tick on Yes if you want to use the secondary image for your product and select No if you do not want.

[3]: Enable or not use the Short name of product, if you tick Yes, the product will have a short name as you set.

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

[4]: Select Style of Product: you can choose 1 of 9 Style for your product style.

[5]: Choose the Flash icon as you want.

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

Notice that, the banner of shop after you uploaded will be shown on your page like this:

5.3. Single Product Tab:

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

and here is the describe when you do not select it:

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:

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. Creating Advance 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 (level2).

You can see the style of the top menu in the front-end demo. But you need to change the content suitable with 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  a Submenu (level 2). In the Installed demo menu, there are 4 items in Main menu (level 1)Home, Shop, Feature, Blog. As the above screenshot, Submenu (level 2) of item Feature is shown.

If you would like to manage the menu. You can do following these steps:

6.1 How to create Main menu (level 1)?

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 setting. Main menu has been created, We continuously add items for the Main menu and you can see our Main menu structure.

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

Example: Create a sub-menu for the item: "Feature" in the main-menu such as the screenshot below:

You need to create the Mega menu (post type mega menu) such as Feature Mega menu like this image:

You can build it as you want by Visual composer, to activate the Visual Composer for this item, you can go to 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:

As our demo above, we use the KT Featured box short code to built this menu:

You can see more about the KT Featured box in the Short code section.

7. Category menu

Refer to the section " 3. Creating Advance Top Menu" on this document to create Category menu. Note that your have to set location for this menu as Category menu by scrolling down to the section "Menu Setting".

Let's see our demo Category menu structure:.

and it will show on your front-end like this:

How to add the icon for this item?

You can click on the arrow down on the right side of item and upload the image as you want:

Once again you can see the location of the menus:

8. Topbar Menu

There are 2 Topbar Menu: Topbar Left [1] and Topbar Right [2].

If you want to configure it like our demo, you just go to Appearance=> Menu=> Create a new menu, for example: Top bar menu right and set the Location for menu as Top bar menu right:

As you can see on the menu structure above, we use the [kt_currency] shortcode, the most important thing to make this shortcode work is the WooCommerce Currency Switcher plugin. You need to install and activate this plugin first. You may go to WP-admin/ Plugin/ Add new, enter the keyword: WooCommerce Currency Switcher then install and activate this plugin.

You do the similar steps to create the Topbar Left menu:

How to add the icon as "phone" or "envelope" to the Topbar Left menu?

You can click to the arrow down on the right side of menu item and add the icon as this image:

Do not for get saving your settings.

9. Top Right Menu

If you want to setup the menu like our demo:

You can follow these steps:

Step 1: Go to WP-admin/ Plugin/ Add new, enter the keyword: WooCommerce Currency Switcher then install and activate this plugin

Step 2: Go to Appearance/ Menu and create a menu like this:

Step 3: Select the location for this menu as Menu Top Right:

 

KUTE SHORTCODES

1. Header: Display a Header

You can add the Header shortcode to your Home page structure then configure it:

Using this shortcode, you can choose any Header that you created.

To build the Header, you may go to Header/ Footer/ Add new and using the Visual Composer to built it.

Beside that, you can select the Header for your page by go to Home Page structure, scrolling down to the Page Header and choose the Header you want to show on your site:

Display a banner.

Setting this shortcode, you can go to Page/ All Pages/ Home page Edit, add the Banner shortcode to your Home page structure, now you will see Banner setting:

s

From the image above:

[1]: Select the Style for your banner, we give you 2 style.

[2]: Fill in the Title.

[3]: Enter the Sub Title.

[4]: Choose the product ID to show.

[5]: Upload the image of banner.

You can see some Banner styles:

Style 1:

Style 2:

Style 5:

3. BLock: show a text block

It is very simple to configure this shortcode, you just need to add the Block shortcode to your page structure then set it like this form:

then it will show on your site as:

And how to configure the text like this image?

You may set the Block shortcode like the picture below:

Remember to save all your changes.

4. Title: display Title on your site.

Setting this short code, you can see the form in this image:

[1]: Select style for your Title

[2]: Give your Title a name.

[3]: Fill in sub Title.

[4]: Select Text align, it can be left, right or center.

Let see some styles of this shortcode:

Default Style:

Style 1:

Style 2:

Style 3:

5. Blog:  display all of your blog post on your site.

To set your blog looks like our demo, you can following these steps:

Step 1: Go to Dashboard=>Post=>Add new to create your post: title, content, select categories and set the featured image.

Step 2: Add Blog shortcode to your Home page structure, you will see Blogs settings, you need to complete the information follow this form:

How many style of Blog?

As we mentioned above in Blog setting section, we have 3 Styles of General Blog: Full, Grid and Massonry. However while you configure the Blog shortcode, you can click on the arrow of Style part and select the Style you want:

Here is an example about the Full Blog:

and here is Blog with sidebar:

6. Brand

This shortcode will helps you to display a name, design, symbol or other feature of all the brand on your online shop. You can see our demo:

Setting your Brand like thi: First, you need to go Dashboard=> Products=> Brands to create all the information of all the brand: name,description, thumbnail....

Then add the Brand shortcode to your page and configure it as this image:

 

7. KT Tab: show the Tab on your site.

Setting this shortcode, you can follow some steps below:

Step 1: Add the KT Tab shortcode to your page structure and complete the needed information for it:

From the image above:

[1]: Choose the position for your Tab, it can be on the Top or at the bottom.

[2]: Select Tab animation, there are many type of animation that you can use for your site, you just need to click on the arrow down on the right side of this section and select it.

[3]: Decide what section will be activate first, that mean if you enter the number of section here, it will show first on your Tab.

After added the KT Tab, you should add the section tab to make your Tab look like our demo, you can see our section tab:

Let's see some styles of this shortcode:

Style 2:

Style 3:

 

8. Woocommerce: show the product.

[P1]: Choose the category to show on your site.

[P2]: There are 3 templates: Grid Product, Owl Carousel one row, Owl Carousel two row.

Grid product:

Owl Carousel one row:

Owl Carousel two row:

[P3]: choose the Target for filter product, it can be: Best Selling, Featured product, Product.....

[P4]: set the number of product will be show on your page.

[P5]: select the product style as you want from Style 1 to STyle 5 (you can see more about the style on this Documentation/ After Installation/ Woocommerce setting/ Product Style.

In this shortcode, you can also set the attribute for the Navigation by click on the Carousel setting and set it:

Note that you can choose the Style of Navigation from Style 1 to Style 7 and select the position suitable with your site.

9. Featured Product: show featured product of your online shop.

You can see our demo:

The first important thing,  you need to select "what is your featured product?"

You can go to Dashboard=> Products=> Products: on the top of Product list you may see a Blue Star icon, if you want to select any product as feature product, you just need click on the Star icon of that product like this screenshot:

To configure this shortcode look like our demo, you should care about some attributes like the image below:

Notice that, you can select the type of product will show on this box, it can be Featured or By IDs.

10. Video: show video, it may be You tube or Vimeo video.

Let see our demo:

How to configure it?

Step 1: Add Video short code to your Homepage structure.

Step 2: Setting the feature of this shortcode.

Remember to save your settings.

11. Newsletter

This is a very useful shortcode using MailChimp that helps you to email the right people at the right time. You can send automated emails based on customer behavior and preferences, it will help the customer to receive all the information from your online shop such as: sales, new products.....

Notice that, you need to have a Mailchimp account on the link: mailchimp, then follow their instruction to Create and Import your List.

After that, you can go to Dashboard=> Plugin=> Add new, fill in the key word " MailChimp for WordPress" and activate it.

Then go to Dashboard/ Mailchimp for WP and enter your mailChimp API key [1] to enable a newsletter signup option with the registration form. After that it will show the email list [2].

If you haven't been created the List, you need to go to http://mailchimp.com/ and create your List then go back to Mailchimp Setting, click on Renew Mailchimp lits[3], your List will be appeared.

How to configure the Form as our Demo?

Step 1: Go to Dashboard/ Mailchimp for WP/ Form and follow their instruction to create the form.

Step 2: Add the Newsletter shortcode to your page structure:

Step 3: After added successfully, you will see Newsletter setting and configure this shortcode as the image below:

There are 4 styles of Newsletter, the Style 1 already shown above and here is Style 2:

Here is Style 3:

And Style 4:

12. KT Featured box:

This shortcode has got some Styles below:

Style 1:

Style 2:

Style 4:

Setting KT Featured box shortcode, you can see this image:

About the Icon, you can select from our Library, you may see the uploaded icon by click on the Arrow on the right side of Icon part.If you do not want to use our library icon, you can use the Font awesome for your box.

You may also add the extra class name to make your box more plentiful.

13. Custom Menu: show custom menu, you can add the menu to any location as you want.

Here is the guide image to configure this shortcode:

Let see some Style of Custom menu:

Style 1:

Style 2:

14. Footer Shortcode: display the Footer on your site.

If you do not want to choose our Footer, you can build your own site Footer by go to Header/ Footer.

You may see our Footer structure:

Then add the Footer Shortcode to your page and select the Footer that you have just created:

15. KT Social Shortcode: show social icon.

First you can go to Boutique/ Theme option/ Social and select the social you want:

Then you may add the KT Social shortcode to your page:

After saving your setting, it will show on your site like this:

16. Group Banner Shortcode: show group of banners.

Let's see our demo:

To configure this shortcode, you shoud care about some attributes as the form below:

You may select the type for your group banner, it can be OWL carousel or Masonry. The Masonry type we just show above.

And here is the type of OWL Carousel:

Notice that, the Title you enter while setting your group just show in your back-end and help you recognize the group that you created, it will not show on your front-end.

After you setting group, you can add banner as you want to make your group banner look like our demo.

17. Testimonial: show testimonials on your site.

Setting this shortcode, you can follow these steps:

Step 1: DragTestimonial shortcode to your Home page structure and select Style of this box as this image:

Step 2: Add the Testimonial item and complete all the needed information such as the name, avatar.......

How to set the image background as our demo?

You just need click on the Edit icon of the Row that consist of the Testimonial shortcode and set it:

Remember to save all your setting.

You may also see our demo Testimonial style 1:

and Style 3:

18. KT Team: show all the members of your team.

To show your team member as our demo, you can follow these steps:

Step 1: Add the KT Team shortcode to your site and configure the number of items that you want to display on your site:

Step 2: Add the Item of Team then complete the needed information such as the Name, Position of member, avatar....

19. KT Processbar

It's very simple to configure this shortcode, after adding the KT Processbar to your site, you just need to add the item of processbar as this image:

From the image above:

[1]: enter the Title of item.

[2]: fill in the percentage you want to show.

[3]: configure the height of your item.

[4]: select processbar item background color.

[5]: choose the backgroundskill color.

20. Other Shortcodes:

There are some others shortcodes we use for building the menu:

kt_mini_cart
kt_compare_link
kt_wishlist_link
kt_my_account
kt_checkout_link
kt_currency

For example: using the shortcode "kt_mini_cart" when you creating the menu item , you just need to tick on enable do shortcode as the image below:

after saving your setting, it will show on your site like this:

 

 

Extra Class:

In our theme, we use some extra class for the image, you can see it:

1. banner-border

2. banner-opacity

To add the extra class you can see this image:

==================================================================================================================

Frequently Asked Questions

1. How to configure the Top right menu?

If you want to setup the menu like our demo:

You can follow these steps:

Step 1: Go to WP-admin/ Plugin/ Add new, enter the keyword: WooCommerce Currency Switcher then install and activate this plugin

Step 2: Go to Appearance/ Menu and create a menu like this:

Step 3: Select the location for this menu as Menu Top Right:

2. How to create a post type mega menu?

Firstly, you need to activate the Visual Composer: Go to 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 Dashboard=> Mega menu=> Addnew to create a new Mega menu (such as Shop Mega menu) and you can build it as you want by using Visual composer:

And how to add the image like our demo above?

You just need to click on edit icon of the Row that consist of that Mega menu and configure it as the image below:

3. How to translate texts in the front-end by using Loco translate?

You can follow these steps:

1. You need to delete the files: .po and .mo in the folder: ..."your theme"/languages
2. Install the Loco-translate plugin to translate, add new language then translate one by one.
3. After translating you need to save your process then download these files (RO & PO files) into your laptop/PCs
4. You need to upload these new .po and .mo to the folder:..."your theme"/languages

You may go to Dashboard=> Setting=> General setting, scrolling down to the Site language section, click to the arrow down on the rightside of tab to select the language you want to translated.
You can see the screenshot below:

Notice that, when you using Loco Translate to translate your site, if you update theme version your translation will disappear and you have to re-translate it.

4.  How to add the left sidebar to your Shop page?

If you want to add the left sidebar to shop page like our demo site, you just following the instruction below: 
1. Go to Dashboard=> Appearance=> Widget and you can drag and drop some widgets as you want to the "Widget Shop Area".
2. Go to Dashboard=> Boutique=>Theme Options=> Woocommerce/ Shopage and you can setting your Shop page sidebar as this image:

5. How to select the Page for Cart, Check out, My Account page?

You need go to Dashboard=> Woocommerce=> Settings=> Check out, scrolling down to the Check out page and select the Page you want to display as the Check out page:

You can also set Account Page by click on the Accounts Tab, now you may select the page display as My Account Page and you need to tick on the checkbox "Enable registration on the "My Account" page" to enable the Registration.

6. How to add the new Home Page Template?

Step 1: Go to WP-admin/ Page/ Add new then click on Add Template as this image:

Step 2: You will see all the default Template, you can click on the template you want to set up then configure it:

Notice that, you just get the template structure, you need to configure all the other attributes to make your site look like our demo.

 

Let's see some shortcodes that we applied on our Demo Homepage:

1. Homepage Style1

For above form, some shortcodes are used:

[1]: KT Blockquote

[2], [6]: Single Image

[3], [5]: Banner

[4]: Custom Heading

[7]: Title

[8]: Blog

[9]: Brand

[10]: Video

[11]: Newsletter

[12]: KT Featured Box

2. Homepage Style 2

For above form, here are some shortcodes we used:

3. Homepage style 3

For above form, we used some shortcodes:

4. Homepage style 4

 

5. Homepage style 5

 

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