Embed Size (px)
Citation preview
USER MANUAL
KINGFISHER THEME
Version: 3.0.0
Compatibility:
Odoo 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
Theme Configuration .......................................... 5
Home Slider Snippet Configuration.................. 5
Multi Product Slider Snippet Configuration.... 10
Product Details Page Configuration ............... 14
Promo Snippet Configuration ........................ 16
Brands Snippet Configuration ........................ 21
Single Banner Without slider Configuration ... 25
Blog Slider snippet Configuration .................. 26
Product/Category Slider Configuration .......... 29
Testimonials slider snippet Configuration ...... 32
Service snippet Configuration ........................ 33
Mega Menu Configuration ............................ 34
Product Image Gallery Configuration ............. 43
Product Tag Configurations ........................... 49
Product Sorting Configurations...................... 51
Adding Pagination in Store Shop page ........... 54
Adding Products per Grid .............................. 55
Add Flip Image of Product ............................. 55
Theme Customization ................................... 56
Contact Us ........................................................ 58
USER MANUAL – 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.
USER MANUAL – Kingfisher Theme
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.
• To activate Developer Mode Go To Settings -> Activate the developer mode. Click on ‘Activate
the developer mode’ and developer mode will be activated.
USER MANUAL – Kingfisher Theme
www.appjetty.com 3
• Go to Apps/Update Module List.
▪ Click on ‘Update’ button.
USER MANUAL – Kingfisher Theme
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.
• You are ready to go with Kingfisher Theme.
USER MANUAL – Kingfisher Theme
www.appjetty.com 5
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.
USER MANUAL – Kingfisher Theme
www.appjetty.com 6
• Click on any text to change the text of the snippet and on the button to change the button text.
USER MANUAL – Kingfisher Theme
www.appjetty.com 7
• To link the snippet to any page click on the ‘Link’ icon .
USER MANUAL – Kingfisher Theme
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:
USER MANUAL – Kingfisher Theme
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.
USER MANUAL – Kingfisher Theme
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.
USER MANUAL – Kingfisher Theme
www.appjetty.com 11
• Select the Type of slider which you want to display on the page.
USER MANUAL – Kingfisher Theme
www.appjetty.com 12
• Managing Slider Configurations:
▪ Go to Sales -> Slider Configurations -> Multi Product Slider Configurations. Click on ‘Create’ button to create a new slider category.
USER MANUAL – Kingfisher Theme
www.appjetty.com 13
▪ Add Slider Name, Status, Auto Rotate Speed, No. of collection (Tabs) for the slider, Collection Name and Products before saving the slider.
• You can add up to 5 collections in the slider.
USER MANUAL – Kingfisher Theme
www.appjetty.com 14
Product Details Page Configuration
• Website Multiple Product Image
▪ Enable / Disable Slider Effects.
▪ After Enabling Set Thumbnail Panel Position and Interval of Slideshow
▪ Enable/Disbale the text panel
▪ Set thumbnail overlay effects
▪ Enable / Disable Change Thumbnail Size.
▪ Set Thumb Width
▪ Set Thumb Height
▪ Click on ‘Apply’ button to save the settings.
• Add Multiple Images in Product
▪ User can add multiple images for product from admin Sales → Product tab.
▪ To enable“Multiple Product Images” tab set the checkbox “Add Multiple Images” to true.
▪ 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.
USER MANUAL – Kingfisher Theme
www.appjetty.com 15
▪ Product main image will be changed based on product variant.
• 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.
USER MANUAL – Kingfisher Theme
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.
USER MANUAL – Kingfisher Theme
www.appjetty.com 17
• Click on ‘Customize’ to customize Style, Background and Color of the Snippet. You can Move, Copy
and Delete the snippet from here.
USER MANUAL – Kingfisher Theme
www.appjetty.com 18
• Promo Product Configurations:
▪ You can change the image, Image Style and also transform an Image.
USER MANUAL – Kingfisher Theme
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.
USER MANUAL – Kingfisher Theme
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.
USER MANUAL – Kingfisher Theme
www.appjetty.com 21
Brands Snippet Configuration
• Go to Website -> Edit -> Add Blocks -> Features -> Brands. Drag and drop Brand Snippet on the
page where you want it.
USER MANUAL – Kingfisher Theme
www.appjetty.com 22
• Set ‘Total Count’ & ‘Label’ for the Brand Slider before adding it to the Website.
USER MANUAL – Kingfisher Theme
www.appjetty.com 23
• Adding Brands to Brands Snippet
▪ Go to Sales -> Slider Configurations -> Product Brands. Click on ‘Create’ button to create a new Brand for the Shop.
USER MANUAL – Kingfisher Theme
www.appjetty.com 24
▪ Add Brand Name, Brand Logo, Brand Cover, Associated Brand Products and Brand Description saving the brand.
▪ To associate Brand to the Products Select any Product and add Brand Name to associate it.
USER MANUAL – Kingfisher Theme
www.appjetty.com 25
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.
USER MANUAL – Kingfisher Theme
www.appjetty.com 26
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.
USER MANUAL – Kingfisher Theme
www.appjetty.com 27
• Adding Blog Post Slider
▪ Go to Website Admin -> Blog -> Blog Slider Configuration and Click on ‘Create’ button to create a new blog.
USER MANUAL – Kingfisher Theme
www.appjetty.com 28
▪ Add Slider Name, Status, Count (i.e. No. of Blogs in one count), Auto rotate Slider sliding speed and Blog post collection from the list.
USER MANUAL – Kingfisher Theme
www.appjetty.com 29
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.
USER MANUAL – Kingfisher Theme
www.appjetty.com 30
• Go to Sales -> Slider Configurations -> Product/Category Slider Configuration. Click on ‘Create’
button to create a new slider.
USER MANUAL – Kingfisher Theme
www.appjetty.com 31
• Set Slider Name, Status, Counts, Type of Slider, Auto Rotate, Auto Rotate Speed & Collections of
Product to be display in the Slider.
• You can add up to 5 collections in the slider.
USER MANUAL – Kingfisher Theme
www.appjetty.com 32
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.
USER MANUAL – Kingfisher Theme
www.appjetty.com 33
Service snippet Configuration
• Go to Website -> Edit -> Add Blocks -> Features -> Service. Drag and drop Service 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.
USER MANUAL – Kingfisher Theme
www.appjetty.com 34
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.
USER MANUAL – Kingfisher Theme
www.appjetty.com 35
• Advance Mega Menu Settings
▪ Creating Mega Menu
▪ Go to Website Admin -> Settings -> Menu -> Configure Website Menus.
▪ In this you will find ‘Create’ Button. Click on it to create a menu.
▪ There you will have options to add Web Site, Menu Name, URL for Menu, Option to open menu in new window, Parent Menu & If the new menu is mega menu or not.
USER MANUAL – Kingfisher Theme
www.appjetty.com 36
▪ Mega Menu Configuration
▪ Select Is megamenu…? Option to create mega menu & give configurations as required.
▪ You can directly add URL for the Mega Menu and can also add it in New Window.
▪ Mega Menu Type: No. of columns needed in Mega Menu.
USER MANUAL – Kingfisher Theme
www.appjetty.com 37
▪ Mega Menu Background: If you want background in Mega Menu you can set it from here. It can be Image or Color.
▪ For Image: You have to upload image and it will be set in mega menu.
▪ For Color: Hash code of color is needed to define background color.
USER MANUAL – Kingfisher Theme
www.appjetty.com 38
▪ Category Slider: To display category slider, select display category slider option & additional
functionalities like Slider label & Position will be displayed.
USER MANUAL – Kingfisher Theme
www.appjetty.com 39
▪ Menu Icon & Colors:
▪ To give icon to menu select option Display Menu Icon and upload image for the menu.
▪ To change font Color for Categories & Subcategories, enable Customize Menu Color
Option & give hash code for Main & Sub Category Fonts.
USER MANUAL – Kingfisher Theme
www.appjetty.com 40
▪ Menu Footer:
▪ To display menu footer enable Display Menu Footer option and give text for the footer.
USER MANUAL – Kingfisher Theme
www.appjetty.com 41
• Mega Menu Categories & Sub Categories
▪ Go to Website Admin -> Configuration -> eCommerce -> Website Product Categories. In this you will find ‘Create’ Button. Click on it to create a Product Category.
USER MANUAL – Kingfisher Theme
www.appjetty.com 42
▪ To create Main Category: Give Name of category, Click on Include in Megamenu Option, Give Main Menu as the menu in which you want to create category in. You can also give sequence No. for deciding sequence in Mega menu list.
▪ To create Sub Category: Give Name of category and give category name in which you want
to create sub category in. You can also give sequence No. for deciding sequence in Category List.
USER MANUAL – Kingfisher Theme
www.appjetty.com 43
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.
USER MANUAL – Kingfisher Theme
www.appjetty.com 44
▪ There you will have options to ‘Add Multiple Images’. After clicking that you can set multiple images for the product.
USER MANUAL – Kingfisher Theme
www.appjetty.com 45
• 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.
USER MANUAL – Kingfisher Theme
www.appjetty.com 46
• 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’.
USER MANUAL – Kingfisher Theme
www.appjetty.com 47
• 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
▪ Click on Save & Close to create new Video.
▪ To create another image / video click on Save & New.
USER MANUAL – Kingfisher Theme
www.appjetty.com 48
• Panel Options
▪ Go to Settings -> Website Settings. You’ll see settings for Multiple Product Image.
▪ Which includes settings for:
▪ 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.
USER MANUAL – Kingfisher Theme
www.appjetty.com 49
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.
USER MANUAL – Kingfisher Theme
www.appjetty.com 50
• 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.
USER MANUAL – Kingfisher Theme
www.appjetty.com 51
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.
USER MANUAL – Kingfisher Theme
www.appjetty.com 52
• Set a Criteria Name, Order By Option and Product Attribute on which sorting is required to be
done.
USER MANUAL – Kingfisher Theme
www.appjetty.com 53
• 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.
USER MANUAL – Kingfisher Theme
www.appjetty.com 54
Adding Pagination in Store Shop page
• Go to Sales -> Configuration -> Settings -> Website Product Paging. And Click on ‘Configure
Website Product Pagination’.
• Now click on ‘Edit’ button.
• You can add number of products and set any number as default.
USER MANUAL – Kingfisher Theme
www.appjetty.com 55
Adding Products per Grid
• Go to Website Admin -> Settings -> Product Per Grid. In this you will find option ‘Product per
grid’.
• Select no. of products to display in ion a grid for shop page.
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.
USER MANUAL – Kingfisher Theme
www.appjetty.com 56
Theme Customization
USER MANUAL – Kingfisher Theme
www.appjetty.com 57
• 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.
USER MANUAL – Kingfisher Theme
www.appjetty.com 58
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 Kingfisher Theme, please write to
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 Support
Tickets on your account dashboard, to get
answers to your specific questions.
