Hướng dẫn đầy đủ cho bạn cách sử dụng giao diện chuyên nghiệp hỗ trợ nhiều tính năng hấp dẫn 59 miễn phí kiếm tiền hiệu quả với wordpress.Nếu bạn muốn tăng thêm kinh nghiệm bán hàng với tiếp thị liên kết thị không thể bỏ qua
Trang 1Giới thiệu
Trong số các giao diện bán hàng trên nền tảng wordpress thì kutetheme là giao diện đẹp nhất mình từng
sử dụng,và nhiều tính năng hỗ trợ đáng chú ý như thay đổi header màu sắc giao diện dễ dàng
Xem demo http://kutethemes.net/wordpress/kuteshop/
Giao diện này được bán với giá 59$ trên themeforest,nếu bạn muốn mua ủng hộ tác giả theme thì truy cập đường dẫn sau
Nếu bạn chưa có điều kiện có thể dùng bản crack được chia sẻ rộng rãi trên mạng (cùng ngành nên thấythật sót cho tác giả bao công lập trình mà mới ra đã thấy crack ầm ầm :D).Lười tìm download ngay tại đây kuteshop149_1_2.rar
Bạn muốn học thêm kinh nghiệm bán hàng online của nước ngoài có thể đăng ký video giảng dạy họ chia sẻ miễn phí mà chất lượng như
Hướng Dẫn Cài Đặt
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 "Theme-kuteshop" and 2 archives:
"Kutetheme.zip" file and "Sample Data"
Step 3 In your Wordpress Dashboard, navigate to Appearance > Themes.
Trang 2Step 4 Click on Add New, then clicking on Upload Theme and browse the Kutetheme.zip file, finally
click Install Now.
Step 5 Wait for a while untill the screenshot below appears, on this form clicking on Activate link to
active Kute Theme Theme has been installed and actived or you also click Live Preview to view this
theme
Trang 32 Install Needed Plugins:
Kute theme recommended you use the following plugins:
• Visual Composer - Visual Composer for WordPress is drag and drop frontend and backend
page builder plugin that will save you tons of working time on the site content You will be able to
take full control over your WordPress site, build any layout you can imagine – no programming knowledge required Moreover, now you can choose either work on a backend or move your
page building process to frontend and instantly you can see the changes you made
• Revolution Slider - is a premium plugin( Official Page ) which lets you create stunning full-width,
full-screen, normal sliders, all responsive with nice effects
• Contact Form 7 - Just another contact form plugin Simple but flexible.
• Kutetheme toolkit - A Toolkit for Kute theme, consist of post types, mailchimp
• WooCommerce - An e-commerce toolkit that helps you sell anything that you want.
• WooCommerce Variation Swatches and Photos - allows you to configure colors and photos for
shoppers on your site to use when picking variations
• YITH Woocommerce Ajax Prduct Filter - Help you filter the product list without reloading the
page
• YITH Woocommerce Compare - allows you to compare more products with woocommerce
plugin, through product attributes
• YITH WooCommerce Wishlist - help you to add Wishlist functionality to your e-commerce.
Trang 4After installed Kute theme you will be noticed to install required plugins, just follow the instruction you will get all settings.
Trang 5The installation process may take few minutes, so please be patience All installations have been completed.
Scolling down and click on the link "Return to Required Plugins Inslaller" to activate those installed plugins
Trang 7Return to the Dashboard whenever you make sure that all needed plugins had been actived.
Follow next steps if you want to install sample data like our demo website
3 Importing Sample Data.
Notice that: Before you import our Sample Data, you need to set up the image size of your product as
Trang 8If 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:
Trang 9Step 3: Install plugin WordPress Importer
Trang 10Step 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:
Trang 11Step 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
Trang 123.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 "slider1.zip" in the Sample Data folder and click Import button:
Trang 13The slider 1 have imported successfully.
Manipulate the similar steps to import the "slider2.zip"
3.3 Menu Setting.
You have to go to Dashboard >>Appearance >>Menus to set menu like our demo menu.
Trang 14Select 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:
Trang 15Scrolling down to the section "Menu Settings" to assign the menu to the "Primary Menu" location Finally click on "Save" button to save the setting.
Trang 16[1]: Select a menu to edit
[2]: Select main menu to edit structure.
[3]: Name of menu: you can set the name for 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:
Trang 17In 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 Dashboard >Theme Options
Trang 18It will take you to the Theme options page In this page, you can setting attributes for your site and it
depends on your intention
The first important thing when you go to Theme option setting, you should care about the General tab setting to set the attribute for your page, you need to complete the form below:
From the image above:
[1]: Sidebar Area: set the area for sidebar, it can be full, left or right.
[2]: Choose Sidebar: click on the arrow down on the right side of tab to select sidebar.
[3]: Page Service: choose the page that you want to show on the service page.
[4]: Page Support: select support page.
Trang 19[5]: About us: select page About us.
Secondly, go to =>"Logo" tab, you will see 3 main parts: Logo [1], Logo Footer [2] and Favicon [3]
- You can upload your site's Logo [1], Logo in Footer [2] and Favicon [3] as you want Do not forget click on the "Save" button to save information.
- Logo on your site after uploading:
Trang 202 Header setting
2.1 Select the Header
Go to Dashboard >Theme Options
- In Theme Options Settings, go to Header tab and choose the Header option that you want to display on
your Homepage
For above form:
• Header : Click on any header layout that you would like to apply for your theme
• Then click on "Save" to save the setting.
Trang 212.2 My Account box
In our theme, you can use the default My Account box on the Header or you can disable it then setting as you want
To configure this box, you can go to Dashboard/ Theme option/ Header/ Enable hook, click on the
arrow down on the right side of My Account box as the image below:
You can also set the specific attribute for the Header such as: Ads text for Header style 3 or Setting category service in header 7 by click on the that Header then complete the needed information
3 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) After
installing Kute 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:
Trang 22Main menu (level 1) consists of multi-items, each item has or hasn't a Submenu (level 2) In the
Installed demo menu, there are 8 items in Main menu (level 1): Home, Fashion, Foods, Sports, Digital,
Furniture, Jewelry, Blog As the above screenshot, Submenu (level 2) of item Fashion is shown.
If you would like to manage the menu You can do following these steps:
3.1 How to create Main menu (level 1)?
Go to Dashboard=> Appearance => Menus
Trang 23- 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
Trang 243.2 How can I create my own sub-menu (level 2) for item in the main menu (Menu level1)?
Trang 25Example: Create a sub-menu for the item: "Fashion" in the main-menu such as the screenshot below:
- First, you have to click on the arrow down on the right of Fashion item to edit, then you choose "Enable Mega Menu" and select the menu page (post type mega menu).
Trang 26How to create a post type mega menu?
Go to Dashboard=> Mega menu=> Addnew to create a new Mega menu (such as Fashion) and you
can build it as you want by Visual composer
4 Footer Settings
To set the Copyrights look like our demo:
Trang 27You need going to Dashboard =>Theme options
- It will take you to the Theme Option Setting =>Footer tab and you can configure settings for the footer
tab and it will appear on your site's footer
How to create the contact on your footer such as: address, phone or email ?
Trang 28You just need go to Dashboard=> Theme options=> Infor and complete all the needed information then Click Save button to save the setting.
5 Footer Widgets
You can use both default widgets and Kute widgets to build your own footer contents
To manage Footer widgets, go to Appearance >> Widgets
You only need to drag and drop the widget or click on it then add to the footer you want to show
Trang 29There are 7 footer sidebars: Footer Menu1, Footer Menu 2, Footer Menu 3, Footer social, Footer
Payment, Footer Bottom, Footer Menu Bottom You now only drag some widgets to these sidebars, to do
it looks like our demo footer, please see following screenshots
Trang 30From the image above, we used some widgets:
5.1 Footer column1: We use one widgets for Footer column1: "Custom Menu"
5.2 Footer column2: using widget "Custom Menu"
5.3 Footer column3: using "Custom Menu" widget
5.4 Footer Social (column4): using "KT Mailchimp" and "KT Social " widget
5.5 Footer Payment (column5): using "KT Trademark Payment" widget
5.6 Footer Bottom (column6): using "KT SEO Keyword" widget
5.7 Footer Menu Bottom (column7): we use the " Custom Menu" widget.
We will give you an instruction for using Custom menu widget (Column 1) and you need to create others footer column
Firstly, you create a menu (for example: Company), then you set the Title and Select Menu that you want
to display on your site's footer
Trang 31Do not forget Save button to save all the settings.
Trang 326 Woocommerce Setting
Go to Dashboard >Theme options
- It will take you to the Theme Options Setting, go to Woocommerce, you can configure some attributes
as you want on your shop page such as: Shop Sidebar Area, Shop page Sidebar, amount of products display per page then you click on Save button to save your setting
You can see our demo Woocommerce setting:
Trang 337 Vertical menu
Trang 34Refer to the section " 3 Creating Advance Top Menu" on this document to create vertical menu Note that your have to set location for this menu as Vertical menu by scrolling down to the section "Menu Setting".
Let's see our demo Vertical menu structure:
Trang 36Setting Vertical menu Style:
If you do not want the Vertical menu show on your site: you just need go to Dashboard=> Theme Option=> Header, scolling down to the Vertical menu section, you can click on the arrow down on the right site of tab [1] and select Disable, after saving your setting, the vertical menu will be disappear.
You can see the image below:
We give you another choice:
If you still want to use the Vertical menu but you do not want it always open, it only open when you click
on, you may select Enable for user Vertical menu and Enable tab Collapse [2]
You can also set the number of visible Vertical menu items show on your page [3]
Do not foget saving your setting
8 Top Bar Menu Left and Right.
If you want to configure like our demo:
Trang 37You 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:
You do the similar step to create the menu on Topbar Menu Left location
Once again you can see the location of the menus:
Trang 389 Setting the color of Theme
If you want to configure the color for your theme, you just need go to Dashboard/ Theme option/ Color:
In General Tab, you can set the general main color, back ground color and price color by click on the select color box and choose the color you want Remember to saving your setting
You can see the image below:
Trang 39If you want to setting some color for item of Vertical menu, you can forward to Vertical Menu as this image:
In this Tab, you can set the Back ground color, Text color, Menu item hover back ground color and Text hover color suitable with your site
We give you many choice to configure the color of all Header from Header 1 to Header 7, you can forward
to the Header you want to setup then configure all the attributes for your Header:
Trang 41To set this shortcode, first you need to go to Dashboard=> Service=> Add new and complete all needed
information such as name of service, subtitle, short description, featured image to create all your service (post type service) item
Notice that, you can setting the service oder by name, date, author, rand it depends on your meant, and about Display Style: we have 2 style then you will choose the style as you want to display in your homepage
If you choose the Style 1:
It will show on your frontend as:
Trang 42And here is the frontend when you choose style 2 on the Display Style:
2 Tab Products
Using this shortcode, you can display all types of products on your site according 3 criterias: Best sellers,
On sales, New Products
Best Seller: If you want to display the product here, your site has to some best selling products, that meant, if there is no best selling product, this section will be empty
Onsale: if your products have disccount product, it will be shown on Onsale section
New Product: when your site have the new product, it will be display on New Product section
You can see our demo: