user manual table of contents€¦ · odoo kingfisher theme version: 3.2.0 compatibility: odoo...

USER MANUAL

Odoo Kingfisher Theme

Version: 3.2.0

Compatibility:

Odoo Community Edition: 8.x, 9.x, 10.x, 11.x

TABLE OF CONTENTS

Introduction ........................................................ 1

Benefits of Kingfisher Theme............................... 1

Prerequisites ....................................................... 1

Installation & Configuration ................................ 2

Installation Steps ............................................. 2

Access Rights Management ............................. 5

Theme Configuration .......................................... 6

Home Slider Snippet Configuration.................. 6

Multi Product Slider Snippet Configuration.... 10

Product Details Page Configuration ............... 13

Promo Snippet Configuration ........................ 16

Brands Snippet Configuration ........................ 21

Single Banner Without Slider Configuration ... 24

Blog Slider Snippet Configuration .................. 25

Product/Category Slider Configuration .......... 27

Testimonials Slider Snippet Configuration ..... 29

Service Snippet Configuration ....................... 30

Mega Menu Configuration ............................ 31

Product Image Gallery Configuration ............. 38

Product Tag Configurations ........................... 44

Product Sorting Configurations...................... 45

Adding Pagination in Store Shop page ........... 48

Adding Products per Grid .............................. 49

Add Flip Image of Product ............................. 50

Theme Customization ................................... 51

Contact Us ....................................................... 53

USER MANUAL – Odoo Kingfisher Theme

www.appjetty.com 1

Introduction

Kingfisher, as the name suggests, is an agile, flexible, aesthetic and customizable theme that can fuel the

website. Its specialty lies in its neat and clean finish, simple navigation yet attractive layout. This theme

offers three level mega menu, customizable product list and many more attractive features to create a

professional and highly robust website.

Benefits of Kingfisher Theme

• Go online with agile and responsive Kingfisher Odoo Ecommerce theme! Options are many, what

matter is performance and features!

• Odoo Kingfisher Theme is The Perfect Theme for Ecommerce Stores!

• This feature packed theme is flexible enough to suit your unique needs.

• Easy Installation and Customization services to get a brand-new store effortlessly.

• Multiple snippets for easy customization of the store.

• It is a theme which lets you build and design your ecommerce store as per your needs.

• Make your ecommerce store more appealing by easy configurations.

Prerequisites

Following points must be followed before starting the plug-in installation:

• You should login as an Admin in Odoo.

• Check that your Odoo Instance is compatible for Kingfisher Theme. An e-commerce module

should be present in your instance to use this app.

Note: Kingfisher Theme v11's all new features are not available in v8, v9 and v10.


www.appjetty.com 2

Installation & Configuration

Installation Steps

• Download & Unzip Kingfisher Theme Folder

• Move kingfisher folder to your Odoo 10 setup path

Ex. /home/detai/odoo_demo/odoo/addons

• Open your Odoo 10 copy in any browser.

• Database selection:

▪ For New database

▪ Click on manage databases

▪ Click on ‘Create’ database (new database )

▪ Enter database name, email & password for new database.

▪ Click on ‘Continue’ button

▪ For existing database

▪ Select existing database. Use default created db: “test_db_theme”

• Login with the admin credentials.


www.appjetty.com 3

• Activate the Developer Mode

▪ To activate Developer Mode, Go to Settings -> Activate the developer mode (with assets). Click on ‘Activate the developer mode (with assets)’ and developer mode will be activated.

• Go to Apps/Update Module List.

▪ Click on ‘Update’ button.


www.appjetty.com 4

• Go to Apps/Apps Modules

▪ Remove search filter

• Enter module name in the search box provided in the top right corner of the page. For e.g. here

write “Kingfisher”.

• Click on ‘Install’ button.


www.appjetty.com 5

Access Rights Management

• Now after installing the theme, to manage the access rights of users go to Settings -> Manage

access rights.

• By clicking on it you will be redirected to the Users module. Thereafter navigate to the detail page

of the particular user for which you want to manage the access rights.

• Now under ‘Access Rights’ tab from ‘Website’ dropdown list select the ‘Editor and Designer’

option to let the particular user modify the ‘Slider Configurations’, ‘Product Tags’ and ‘Product

Multiple Images’.

Note: If the ‘Restricted Editor’ option is selected user won’t be able to edit the ‘Slider Configurations’,

‘Product Tags’ and ‘Product Multiple Images’ options.


www.appjetty.com 6

Theme Configuration

Home Slider Snippet Configuration

• Go to Website -> Edit -> Add Blocks -> Features -> Home Slider. Drag and drop Home Slider

Snippet on the page where you want it.

• Click on ‘Customize’ to customize Style, Background and Color of the snippet. You can Move, Copy

and Delete the snippet from here.


www.appjetty.com 7

• Click on any text to change the text of the snippet and on the button to change the button text.

• To link the snippet to any page, click on the ‘Link’ icon.


www.appjetty.com 8

• Now enter the label for link in ‘Link Label’ also select the page from the ‘Page’ dropdown menu or

enter the URL or email address lastly style the linked page as per the requirement.

• Home Page Slider Image:


www.appjetty.com 9

▪ Add / Update Image in “Homepage Slider”:

▪ You can change images and other settings by clicking ‘Edit’ button. ▪ Select the slider image and a pop up will appear. In Customize tab click on

‘Background Image’ which will open view as per above screenshot. ▪ Select the image you want to set in slider or Upload the image or Add an image URL.

And Click on ‘Add’ button.

▪ Lastly click on ‘Save’ to save your final changes.


www.appjetty.com 10

Multi Product Slider Snippet Configuration

• Go to Website -> Edit -> Add Blocks -> Features -> Multi Product Tabs Slider. Drag and drop Multi

Product Slider Snippet on the page where you want it.


www.appjetty.com 11

• Select the Type of slider which you want to display on the page.

• Managing Slider Configurations:

▪ Go to Sales -> Slider Configuration -> Multi Product Slider Configuration. Click on ‘Create’ button to create a new slider category.

▪ Set following attributes to display Multi Product Slider on website:

▪ Slider Name: Enter the name of slider.

▪ Active: Check the checkbox to activate the slider.

▪ No. Of Collections to Show: Number of collections that are displayed on the page.

▪ Collection Name: Enter the names of the collection to be displayed.

▪ Product Collection: Set products which are to be displayed in the collection.

▪ Special Offer Product for Collection: Set special product which will be displayed in the collection.

▪ Click on ‘Save’ button to save the Multi Product Slider.


www.appjetty.com 12

Note:

i. To manage the Slider Configurations user must have the ‘Editor and Designer’ access rights. ii. You can add up to 5 collections in the slider.


www.appjetty.com 13

Product Details Page Configuration

• Go to Website -> Configuration -> Settings -> Multiple Product Image. Now you can view

following Multiple Product Image Settings:

▪ Slider Effect: Check the checkbox to enable slider effects.

▪ Thumbnails Panel Position: This drop down allows admin to select the position of Thumbnail panel from Left, Right or Bottom.

▪ Play Interval of Slideshow: This allows admin to manage interval between two images in slideshow.

▪ Enable Text Panel: Check the checkbox to show text along with images in panel.

▪ Thumbnail Overlay Effect: This option allows admin to choose thumbnail overlay effects from Default, B/W, Sepia or Blur.

▪ Change Thumbnail Size: Check the checkbox to change the size of thumbnail.

▪ Thumb height: Enter the height of thumbnail.

▪ Thumb width: Enter the width of thumbnail.


www.appjetty.com 14

• Add Multiple Images in Product

▪ Go to Sales -> Catalog -> Products. Click on ‘Product Multiple Images’ tab from product detail page.

▪ Click on ‘Add an item’ option to start adding images for the product.

▪ To enable ‘Multiple Product Images’ tab check the ‘Add Multiple Images?’ checkbox.

▪ Multiple images will be displayed in the specified sort order set by admin.

▪ Product label will be shown when mouse over event will occur on multiple product image slider.

▪ It also provides facility to exclude specific product to display in product detail page on front-

end.

▪ Product main image will be changed based on product variant.

Note: To add Multiple Product Images user must have the ‘Editor and Designer’ access rights.


www.appjetty.com 15

• Display Multiple Images

▪ You can display multiple images in “Product Details page” &“Zooming” feature.

▪ Display multiple images of product in responsive slider.

▪ By default first image of the slider will be product’s main image and other images will be displayed after that as added by admin.


www.appjetty.com 16

Promo Snippet Configuration

• Go to Website -> Edit -> Add Blocks -> Features -> Promo. Drag and drop Promo Snippet on the

page where you want it.


www.appjetty.com 17




www.appjetty.com 18

• Promo Product Configurations:

▪ You can change the image, Image Style and also transform an Image.


www.appjetty.com 19

• Changing Image:

▪ You can add image from the computer or can also add image URL directly. You can also add Pictogram and Video in Promo Snippet.


www.appjetty.com 20

• Changing Promo Texts:

▪ By clicking on promo text, you can edit the text. You can also Add URL, Link Text, Change Style of Text & change preview text.


www.appjetty.com 21

Brands Snippet Configuration

• Go to Website -> Edit -> Add Blocks -> Features -> Brands. Drag and drop Brand Snippet on the



www.appjetty.com 22

• Set ‘Total Count’ & ‘Label’ for the Brand Slider before adding it to the Website.

• Adding Brands to Brands Snippet

▪ Go to Sales -> Slider Configuration -> Product Brands. Click on ‘Create’ button to create a new Brand for the Shop.

▪ Add Brand Name, Brand Logo, Brand Cover, Associated Brand Products and Brand Description saving the brand.


www.appjetty.com 23

▪ To associate brand to the products, select any Product and add Brand Name to associate it.


www.appjetty.com 24

Single Banner Without Slider Configuration

• Go to Website -> Edit -> Add Blocks -> Features -> Single banner without slider. Drag and drop

Single Banner without Slider Snippet on the page where you want it.

• Click on Image, Text and Button to change it as per your likings.


www.appjetty.com 25

Blog Slider Snippet Configuration

• Go to Website -> Edit -> Add Blocks -> Features -> Blog Slider. Drag and drop Blog Slider Snippet

on the page where you want it.

• Select the Type of Blog which you want to display from the menu.


www.appjetty.com 26

• Adding Blogs to the Snippet

▪ Go to Website -> Blog -> Blog Slider Configuration. Click on ‘Create’ button to create a new Blog category.

▪ Set following attributes to display Blog Slider on website:

▪ Slider Name: Enter the name of slider.

▪ Active: Check the checkbox to activate the slider.

▪ Count: Set the number of blogs to be displayed in blog slider.

▪ Auto Rotate Slider: Check the checkbox to set the slider on Auto Rotation.

▪ Slider Sliding Speed: Enter the speed of slider if it is set on Auto Rotation.

▪ Collection of Blog Posts: Add the Blogs which are needed to be added in the collection.

▪ Click on ‘Save’ button to save the Product Slider.


www.appjetty.com 27

Product/Category Slider Configuration

• Go to Website -> Edit -> Add Blocks -> Features -> Dynamic Product/Category. Drag and drop

Dynamic Product/Category Snippet on the page where you want it.

• Select the Slider which you want to display on the page.


www.appjetty.com 28

• Go to Sales -> Slider Configurations -> Product/Category Slider Configuration. Click on ‘Create’

button to create a new slider.

• Set Slider Name, Status, Counts, Type of Slider, Auto Rotate, Auto Rotate Speed & Collections of

Product to be display in the Slider.

Note: To manage the Slider Configurations user must have the ‘Editor and Designer’ access rights.

• You can add up to 5 collections in the slider.


www.appjetty.com 29

Testimonials Slider Snippet Configuration

• Go to Website -> Edit -> Add Blocks -> Features -> Testimonials slider. Drag and drop Testimonial

Slider Snippet on the page where you want it.

• Click on the text to edit it the way you want. Click on ‘Customize’ to customize Style, Background

and Color of the snippet. You can Move, Copy and Delete the snippet from here.


www.appjetty.com 30

Service Snippet Configuration

• Go to Website -> Edit -> Add Blocks -> Features -> Service. Drag and drop Service Snippet on the





www.appjetty.com 31

Mega Menu Configuration

• Mega Menu is dynamic menu. You can add product category to it.

• A Mega Menu is used to show selected product categories to navigation so it will create great

navigation experience for a user.

• User can manage up to two level navigation in mega menu.


www.appjetty.com 32

• Advance Mega Menu Settings

▪ Go to Website -> Configuration -> Pages. Now you can either select a page or create a new page for creating a mega menu for it.

▪ To create mega menu for a new page, click on ‘Create’ Button. Now enter the relevant page details and click on ‘Add an Item’ link under ‘Related Menu Items’ to create the mega menu.

▪ There you will have options to add website, name of menu, URL for menu, Option to open menu in new window, Parent Menu & select whether the new menu is mega menu or not.

Note:

• Select ‘Top Menu’ option from ‘Parent Menu’.

• To configure and manage the MegaMenu kindly activate the developer mode (with assets) from Settings module.


www.appjetty.com 33

• Mega Menu Configuration

▪ Select Is megamenu…? Option to create mega menu & give configurations as required.

▪ Megamenu View Type: Select the type of view in which megamenu is to be displayed. It can be displayed in following ways:

▪ Category Megamenu

▪ Pages Megamenu

▪ If you select Pages Megamenu from Megamenu View Type, you also need to set the size of mega menu from the following:

▪ Megamenu Size: Select the size of mega menu.

▪ On selecting Category Megamenu from Megamenu View Type following options are to be configured:

▪ Megamenu Type: Choose the number of columns needed in the Megamenu.


www.appjetty.com 34

▪ Megamenu Background: To set the background in megamenu check the ‘Want to set megamenu background’ checkbox. You can set the background through following ways:

▪ For Image: Upload the image which is to be added in background.

▪ For Color: Define the hash code of color which is to be added in background.

▪ Category Slider: To display category slider, check the ‘Want to display category slider’ checkbox and set the additional functionalities like Slider label & Position as per the requirement.


www.appjetty.com 35

▪ Menu Icon & Colors:

▪ To add icon in the menu, check the ‘Want to display menu icon’ checkbox and upload image for the menu in ‘Menu Icon’.

▪ To change font Color for Categories & Subcategories, enable Customize Menu Color Option & add hash code for Main menu in ‘Main menu color’ & Sub Category Fonts in ‘Submenu color’.

▪ Menu Footer:

▪ To display footer in megamenu, add the required menu footer in ‘Display menu footer’ editor.


www.appjetty.com 36

Mega Menu Categories & Sub Categories

• Go to Website -> Configuration -> Products -> eCommerce Categories. You can manage the

categories and sub categories for the existing categories or you can create new product categories

by clicking on ‘Create’ button.

▪ To create Main Category:

▪ Name: Enter the name of category.

▪ Parent Category: Select the parent category of the category which to be created.

▪ Sequence: Set the sequence No. for deciding the sequence of particular category in Mega menu list.

▪ Include in Megamenu: Check the checkbox to include the category in Mega Menu.

▪ Main menu: Select the main menu in which under which category is to be created. category in.

▪ Enter the description of the category in the text box.


www.appjetty.com 37

▪ To create Sub Category:

▪ Name: Enter the name of category.

▪ Parent Category: Select the category of the particular sub category which is to be created.

▪ Sequence: Set the sequence No. for deciding the sequence of particular category in Mega menu list.

▪ Include in Megamenu: Check the checkbox to include the category in Mega Menu.

▪ Main menu: Select the main menu in which under which category is to be created. category in.

▪ Enter the description of the sub category in the text box.


www.appjetty.com 38

Product Image Gallery Configuration

• Creating New Product

▪ Go to Sales -> Products. In this you will find ‘Create’ Button. Click on it to create a New Product.


www.appjetty.com 39

▪ There you will have options to ‘Add Multiple Images’. After clicking that you can set multiple images for the product.


www.appjetty.com 40

• Add Multiple Images to the product

▪ Click on ‘Product Multiple Images’ tab.

▪ Click on ‘Add an item’ option to start adding images for the product.


www.appjetty.com 41

• Creating a new Image

▪ After adding an item you’ll be redirected to create image pop up.

▪ Give proper Title, Alt text, Type (Image / Video), Image and Sorting order.

▪ If you don’t want to include this image in Custom Product Image Gallery click on More

▪ Click on ‘Save & Close’ to create new image.

▪ To create another image / video click on ‘Save & New’.


www.appjetty.com 42

• Creating a new Video

▪ After adding an item you’ll be redirected to create image pop up.

▪ Give proper Title, Alt text, Type (Image / Video), Image and Sorting order.

▪ To create Video, click on ‘Video’ option.

▪ Give proper type to video which can be of

▪ You Tube Video

▪ Vimeo Video

▪ HTML 5 Video

▪ If you don’t want to include this video in Custom Product Image Gallery click on ‘More View Exclude’.

▪ Click on ‘Save & Close’ to create new Video.

▪ To create another image / video click on ‘Save & New’.


www.appjetty.com 43

• Panel Options

▪ Go to Website -> Configuration -> Settings -> Multiple Product Image. Now you can view following Multiple Product Image Settings:

▪ Slider Effect: Select this option to enable slider effects.

▪ Thumbnail Panel Position: This drop down allows admin to select thumbnail panel

position from Left, Right or Bottom.

▪ Play Interval of Slideshow: This allows admin to manage interval between two

images in slideshow.

▪ Enable Text Panel: Select this option to show text along with images in panel.

▪ Thumbnail Overlay Effect: This option allows admin to choose thumbnail overlay

effects from Default, B/W, Sepia or Blur.

▪ Change Thumbnail Size: To change thumbnail height and width, enable this option.


www.appjetty.com 44

Product Tag Configurations

• Go to Sales -> Product Tags. In this you will find ‘Create’ Button. Click on it to create a New

Product Tag. These Tags will be used for Product sorting based on Tags in Shop.

• Now Add Tag Name, Status and Sequence for the Tag.

• To add the Products for the Tags, click on ‘Add an Item’ and add needed items.

Note: To manage the Product Tag Configurations user must have the ‘Editor and Designer’ access rights.


www.appjetty.com 45

Product Sorting Configurations

• Go to Sales -> Product Sorting. In this you will find ‘Create’ Button. Click on it to create a New

Product Sorting Option. These Sorting options will be used for Product sorting based on provided

criteria in Shop.


www.appjetty.com 46

• Set a Criteria Name, Order By Option and Product Attribute on which sorting is required to be

done.


www.appjetty.com 47

• Adding Sorting Criteria in Shop

▪ Go to Website -> Customize. In this you will find multiple options to customize your webpage. Select any option and that will be shown on the Shop page as per defined criteria.


www.appjetty.com 48

Adding Pagination in Store Shop page

• Go to Sales -> Configuration -> Website Product Paging. Click on the record to edit it.

• Now click on ‘Edit’ button to edit the product pagination.

• You can add number of products and set any number as default.


www.appjetty.com 49

Adding Products per Grid

• Go to Website -> Settings -> Product per Grid. In this you will find option ‘Product per grid’.

• Select no. of products to display in the product grid for shop page.


www.appjetty.com 50

Add Flip Image of Product

• Go to Sales -> Products. Select the product in which you want to add a flip image.

• Click on ‘Edit’ and select ‘Add Flip Image’. Now go to ‘Product Flip Image’ tab.


www.appjetty.com 51

Theme Customization


www.appjetty.com 52

• You can customize the theme the way you want. You can change the theme layout, Theme’s main

color & Theme’s font combination by navigating to Customize -> Customize Theme from the

website.


www.appjetty.com 53

Contact Us

We simplify your business, offer unique business solution in digital web and IT landscapes.

Customization: If you would like to customize or discuss about additional feature for Odoo Kingfisher Theme, please

write to [email protected]

Live Chat

• Get instant support with our Live Chat.

• Visit our product page at:

https://www.appjetty.com/odoo-

kingfisher-theme.htm and click on the Live

Chat button for instant support.

Tickets

• Raise tickets for your specific question!

• Send an email to [email protected]

Or you can login to your account @

www.appjetty.com and click on My Sup-

port Tickets on your account dashboard,

to get answers to your specific questions.

mailto:[email protected]

https://www.appjetty.com/odoo-kingfisher-theme.htm

https://www.appjetty.com/odoo-kingfisher-theme.htm

mailto:[email protected]

https://www.appjetty.com/

user manual table of contents€¦ · odoo kingfisher theme version: 3.2.0 compatibility: odoo...

Documents