1 / 60

Crafito Odoo Theme - User Guide

Crafito Odoo Theme is a responsive & highly customizable front-end multipurpose theme with an extensive set of custom snippets to manage every aspect of your website or store.<br><br>https://store.biztechconsultancy.com/odoo-crafito-theme.htm

Bizmagestore
Download Presentation

Crafito Odoo Theme - User Guide

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. sales@biztechconsultancy.com USER GUIDE Crafito Theme Compatibility: Odoo 9.x

  2. Table of Contents 1. Introduction ..................................................................................................... 3 2. Pre-requisites .................................................................................................. 3 3. Installation ....................................................................................................... 3 4. Plugin Configuration ........................................................................................ 6 5. Technical Support .......................................................................................... 59 6. About of Biztech Consultancy ........................................................................ 59 Odoo Expertise .................................................................................................... 59 2

  3. 1.Introduction The Crafito theme is an e-commerce theme specifically made to enhance your online odoo e-commerce store. Crafito provides numerous snippets with various possible options for you to customize your store with attractive look & feel. 2.Pre-requisites Following points must be followed before starting the plug in installation: oYou should login as an Admin in Odoo. oCheck that your Odoo Instance is compatible for Crafito Theme. oAn e-commerce module should be present in your instance to use this theme. 3.Installation Step 1: Download and extract the zip file. Step 2: Check your Odoo add-ons path. oIt should be same as defined in Odoo Config file. oConfig files are mostly saved in /etc folder. For e.g. /etc/odoo.conf oOpen Config file: Give the command: sudo/etc/odoo.conf Config file content: addons_path = /opt/odoo/addons Step 3: Open Terminal and go to download location oFor e.g. if the download location path is : /home/odoo/Downloads then the command to be written in the terminal would be: cd/home/odoo/Downloads Step 4: Copy download modules to addons path oGive the below mentioned commands to perform copy operation: $cd /home/odoo/Downloads/theme_crafito $cd v9 $sudo cp theme_crafito /opt/odoo/addons 3

  4. Step 5: Restart Odoo server Step 6: Login with the admin credentials in your odoo instance. Step 7: Go to Settings/Update Module List. oClick on “Update” button. Step 8: Go to Settings/Local Modules oRemove search filter 4

  5. oEnter module name in the search box provided in the top right corner of the page. For e.g. here write “Crafito”. oClick on install button. 5

  6. 4.Plugin Configuration Plugin Configuration Step 1: Configuring Main Title Snippet Go to Website -> Edit -> Insert Blocks -> Main Title. Drag and drop Main Title 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. You can also resize the Snippet as per the need. Click on any Text to customize text of the Title Block. Click on the Title to customize Title of the block. Step 2: Configuring Upper Banner Snippet Go to Website -> Edit -> Insert Blocks -> Upper Banner. Drag and drop Upper Banner 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. You can also resize the Snippet as per the need. For Breadcrumbs you can set links for the pages as well as unlink them upon requirement. 6

  7. Step 3: Configuring Home Slider Snippet Go to Website -> Edit -> Insert Blocks -> Home Slider. Drag and drop Upper Banner 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. You can also resize the Snippet as per the need. You can click on any image to change the image or remove the image. Along with image you can also add Text, Document, Pictogram and Video to the snippet. You can also Manage Slideshow speed along with number of slides in the snippet. 7

  8. You can also add text to the banner along with any button that can redirect your customer to any page. You can also manage links of the button by clicking button and then clicking on link button. Step 4: Configuring About Us Snippet Go to Website -> Edit -> Insert Blocks -> About Company / About Us 2 / About Us 3. Drag and drop any of the 3 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. You can also resize the Snippet as per the need. You can customize every block of the snippet. You can click on any image to change the image or remove the image. Along with image you can also add Text, Document, Pictogram and Video to the snippet. 8

  9. About Company Snippet About Us 2 Snippet 9

  10. About Us 3 Snippet Step 5: Configuring About Me Snippet Go to Website -> Edit -> Insert Blocks -> About Me. Drag and drop About Me 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. You can also resize the Snippet as per the need. You can customize every block of the snippet. You can click on any image to change the image or remove the image. You can also resize the image according to the need. Along with image you can also add Text, Document, Pictogram and Video to the snippet. 10

  11. Step 6: Configuring Features Snippet Go to Website -> Edit -> Insert Blocks -> Special Features 1 / Special Features 2 / Special Features 3. Drag and drop any of the 3 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. You can also resize the Snippet as per the need. You can customize every block of the snippet. You can customize single feature block as well as combined feature block. You can click on any image to change the image or remove the image. Along with image you can also add Text, Document, Pictogram and Video to the snippet. 11

  12. Special Features 1 Special Features 2 12

  13. Special Features 3 Step 7: Configuring News Letter Snippet Go to Website -> Edit -> Insert Blocks -> Subscribe / News Letter. Drag and drop any of the 2 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. You can also resize the Snippet as per the need. You can customize every block of the snippet. You can click on any image to change the image or remove the image. Along with image you can also add Text, Document, Pictogram and Video to the snippet. News Letter 13

  14. Subscribe Step 8: Configuring Contact Us Snippet Go to Website -> Edit -> Insert Blocks -> Contact Us. Drag and drop Contact Us 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. You can also resize the Snippet as per the need. You can customize every block of the snippet. You can click on any image to change the image or remove the image. Along with image you can also add Text, Document, Pictogram and Video to the snippet. 14

  15. Step 9: Configuring Fact Sheet Snippet Go to Website -> Edit -> Insert Blocks -> Facts Sheet. Drag and drop Fact Sheet Snippet on the page where you want it. Choose the Icons, Labels along with the number you want to display on the Fact Sheet. Click on Customize to customize Style, Background and Color of the Snippet. You can Move, Copy and Delete the snippet from here. You can also resize the Snippet as per the need. You can customize every block of the snippet. You can click on any image to change the image or remove the image. Along with image you can also add Text, Document, Pictogram and Video to the snippet. 15

  16. Step 10: Configuring Skills Snippet Go to Website -> Edit -> Insert Blocks -> Skills. Drag and drop Skills Snippet on the page where you want it. Choose the Icons, Labels along with the number you want to display on the Skills. 16

  17. Click on Customize to customize Style, Background and Color of the Snippet. You can Move, Copy and Delete the snippet from here. You can also resize the Snippet as per the need. You can customize every block of the snippet. You can click on any image to change the image or remove the image. Along with image you can also add Text, Document, Pictogram and Video to the snippet. Step 11: Configuring Why Choose Us Snippet Go to Website -> Edit -> Insert Blocks -> Why Choose Us. Drag and drop Why Choose US Snippet on the page where you want it. Choose the Icons, Labels along with the number you want to display on the Skills. Click on Customize to customize Style, Background and Color of the Snippet. You can Move, Copy and Delete the snippet from here. You can also resize the Snippet as per the need. You can customize every block of the snippet. You can click on any image to change the image or remove the image. Along with image you can also add Text, Document, Pictogram and Video to the snippet. You can also customize accordion block data along with images, texts and other blocks. 17

  18. Step 12: Configuring Maintenance Mode Snippet Go to Website -> Edit -> Insert Blocks -> Maintenance Mode 1 / Maintenance Mode 2. Drag and drop any of the 2 Snippet on the page where you want it. You can set the time remaining in making your site live and display counter for that period of time. 18

  19. Click on Customize to customize Style, Background and Color of the Snippet. You can Move, Copy and Delete the snippet from here. You can also resize the Snippet as per the need. You can customize every block of the snippet. You can click on any image to change the image or remove the image. Along with image you can also add Text, Document, Pictogram and Video to the snippet. Maintenance Mode 1 19

  20. Maintenance Mode 2 Step 13: Configuring Testimonial Snippet Go to Website -> Edit -> Insert Blocks -> Testimonial 1 / Testimonial 2 / Testimonial 3 / Testimonial 4. Drag and drop any of the 4 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. You can also resize the Snippet as per the need. You can customize client area background as well as whole snippet background. You can also add multiple slides to the snippet to show numerous testimonials. You can customize every block of the snippet. You can customize single testimonial block as well as combined testimonial blocks. You can click on any image to change the image or remove the image. Along with image you can also add Text, Document, Pictogram and Video to the snippet. 20

  21. Testimonial 1 Testimonial 2 21

  22. Testimonial 3 Testimonial 4 22

  23. Step 14: Configuring Pricing Table Snippet Go to Website -> Edit -> Insert Blocks -> Pricing Table 1 / Pricing Table 2 / Pricing Table 3 / Pricing Table 4 / Pricing Table 5 / Pricing Table 6 / Pricing Table 7 / Pricing Table 8. Drag and drop any of the 8 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. You can also resize the Snippet as per the need. You can customize every block of the snippet. You can customize single pricing block as well as combined pricing block. You can click on any image to change the image or remove the image. Along with image you can also add Text, Document, Pictogram and Video to the snippet. You can also add button to navigate customer to Buy Now Page. Pricing Table 1 23

  24. Pricing Table 2 Pricing Table 3 24

  25. Pricing Table 4 Pricing Table 5 25

  26. Pricing Table 6 Pricing Table 7 26

  27. Pricing Table 8 Step 15: Configuring Our Services Snippet Go to Website -> Edit -> Insert Blocks -> Emphasized Services / Our Services 1 / Our Services 2 / Our Services 3/ Our Services 4 / Service New. Drag and drop any of the 6 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. You can also resize the Snippet as per the need. You can customize every block of the snippet. You can customize single Service block as well as combined Service blocks. You can click on any image to change the image or remove the image. Along with image you can also add Text, Document, Pictogram and Video to the snippet. Our Services 1 27

  28. Our Services 2 Our Services 3 Our Services 4 28

  29. Emphasized Services Service New Step 16: Configuring Multi Product Slider Snippet Go to Website -> Edit -> Insert Blocks -> Multi Product Slider. Drag and drop Multi Product Slider Snippet on the page where you want it. Select the Type of slider which you want to display on the page. Click on Customize to customize Style, Background and Color of the Snippet. You can Move, Copy and Delete the snippet from here. You can also resize the Snippet as per the need. 29

  30. Managing Slider Configurations: Go to Sales -> Slider Configurations -> Multi Product Slider Configurations. Click on Create button to create a new slider category. Set Following attributes to display Multi Product Slider on website. oSlider Name: Slider Name oAuto Rotate Slider: Enable this to set slider on Auto Rotation oSlider Sliding Speed: Manage Slider Speed if set on Auto Rotation oNo. Of Collections to Show: Number of collections that are displayed on the page. oCollection Name: Name of the Collection oProduct Collection: Set products which are displayed in the collection. oSpecial Offer Product for Collection: Set special product which will be displayed in the collection 30

  31. Step 17: Configuring Category Slider Snippet Go to Website -> Edit -> Insert Blocks -> Category Slider. Drag and drop Category Slider Snippet on the page where you want it. Select the Type of slider which you want to display on the page. Click on Customize to customize Style, Background and Color of the Snippet. You can Move, Copy and Delete the snippet from here. You can also resize the Snippet as per the need. Managing Slider Configurations: Go to Sales -> Slider Configurations -> Category Slider Configurations. Click on Create button to create a new slider category. Set Following attributes to display Category Slider on website. oSlider Name: Slider Name 31

  32. oCounts: Number of Categories to display on the page. oAuto Rotate Slider: Enable this to set slider on Auto Rotation oSlider Sliding Speed: Manage Slider Speed if set on Auto Rotation oCollection of Category: Add the categories which are needed to be added in the collection. Step 18: Configuring Products Slider Snippet Go to Website -> Edit -> Insert Blocks -> Products Slider. Drag and drop Products Slider Snippet on the page where you want it. Select the Type of slider which you want to display on the page. Click on Customize to customize Style, Background and Color of the Snippet. You can Move, Copy and Delete the snippet from here. You can also resize the Snippet as per the need. 32

  33. Managing Slider Configurations: Go to Sales -> Slider Configurations -> Products Slider Configurations. Click on Create button to create a new slider category. Set Following attributes to display Category Slider on website. oSlider Name: Slider Name oCounts: Number of Categories to display on the page. oAuto Rotate Slider: Enable this to set slider on Auto Rotation oSlider Sliding Speed: Manage Slider Speed if set on Auto Rotation oCollection of Products: Add the products which are needed to be added in the collection. Step 19: Configuring Featured Products Slider Snippet Go to Website -> Edit -> Insert Blocks -> Featured Products Slider. Drag and drop Featured Products Slider Snippet on the page where you want it. Select the Type of slider which you want to display on the page. Click on Customize to customize Style, Background and Color of the Snippet. You can Move, Copy and Delete the snippet from here. You can also resize the Snippet as per the need. 33

  34. Managing Slider Configurations: Go to Sales -> Slider Configurations -> Featured Products Slider Configurations. Click on Create button to create a new slider category. Set Following attributes to display Category Slider on website. oSlider Name: Slider Name oSlider Label: Set thelabel for the slider oProducts Collection: Set the products displayed in the slider. Step 20: Configuring Blog Slider snippet  Go to Website -> Edit -> Insert Blocks -> Blog Slider / News 1 / News 2 / News 3. Drag and drop Any of the 4 Snippet on the page where you want it. Select the type of Blog which you want to display from the menu. Click on Customize to customize Style, Background and Color of the Snippet. You can Move, Copy and Delete the snippet from here. You can also resize the Snippet as per the need.   34

  35. Adding Blogs to the Snippet Go to Website Admin-> Blog -> Blog Slider Configuration Click on Create button to create a new Blog category. Set Following attributes to display Blog Slider on website. oSlider Name: Slider Name oSlider Label: Set thelabel for the slider oProducts Collection: Set the products displayed in the slider. oCollection of Blog Posts: Add the Blogs which are needed to be added in the collection. 35

  36. Blog Slider News 1 36

  37. News 2 37

  38. News 3 Changing Cover for The Blog Go to Website -> Blog. Click on any blog of which you want to change cover. Click on Edit -> Customize -> Change Cover to change the cover of the blog page. 38

  39. Step 21: Configuring Client Slider snippet Go to Website -> Edit -> Insert Blocks -> Our Clients / Partner. Drag and drop Our Clients / Partner 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. You can also resize the Snippet as per the need. Adding Clients to the Snippet Go to Sales -> Customers. Click on the customer which you want to add in the snippet. Click on Edit and Enable Add to client slider option. 39

  40. Step 22: Configuring Showcase Snippet Go to Website -> Edit -> Insert Blocks -> Showcase / Showcase 4 Column / Showcase 2 Column. Drag and drop any of the 3 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. You can also resize the Snippet as per the need. You can customize every block of the snippet. You can customize single Showcase block as well as combined Showcase blocks. You can click on any image to change the image or remove the image. Along with image you can also add Text, Document, Pictogram and Video to the snippet. You can also change images of the multiple tabs as per requirement. Showcase 4 Column 40

  41. Showcase 41

  42. Showcase 2 Column 42

  43. Step 23: Configuring Our Team Snippet Go to Website -> Edit -> Insert Blocks -> Our Team 1 / Our Team 2 / Our Team 3. Drag and drop any of the 3 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. You can also resize the Snippet as per the need. Adding Team Members to the Snippet Go to Employees. Click on the employee which you want to add in the snippet. Click on Edit and go to Slider Configuration and click on Enable to make the employee visible in snippet option. 43

  44. Our Team 1 Our Team 2 44

  45. Our Team 3 Step 24: Configuring Promo Block Snippet Go to Website -> Edit -> Insert Blocks -> Promo Block. Drag and drop Promo Block 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. You can also resize the Snippet as per the need. You can customize every block of the snippet. You can customize single product block as well as combined product blocks. You can click on any image to change the image or remove the image. Along with image you can also add Text, Document, Pictogram and Video to the snippet. 45

  46. Step 25: Configuring Text and Image Blocks Go to Website -> Edit -> Insert Blocks -> Text + Image / Image + Text. Drag and drop any of the 2 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. You can also resize the Snippet as per the need. You can customize text and images of the block. Image will be set as the background of the snippet. You can add text as well as button to the snippet which will be used to navigate customer to specific product page. 46

  47. Text + Image Image + Text 47

  48. Step 26: Configuring Collection Snippet Go to Website -> Edit -> Insert Blocks -> Collection. Drag and drop Collection 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. You can also resize the Snippet as per the need. You can customize every block of the snippet. You can customize single collection block as well as combined Collection block. You can click on any image to change the image or remove the image. Along with image you can also add Text, Document, Pictogram and Video to the snippet. You can set button for your customer to navigate him / her directly to the collection Page. Step 27: Configuring FAQ Snippet Go to Website -> Edit -> Insert Blocks -> FAQ 1 / FAQ 2 / FAQ 3. Drag and drop any of the 3 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. You can also resize the Snippet as per the need. You can customize every block of the snippet. You can customize single collection block as well as combined Collection block. You can click on any image to change the image or remove the image. Along with image you can also add Text, Document, Pictogram and Video to the snippet. You can set button for your customer to navigate him / her directly to the collection Page. You can also change images and content of the multiple tabs as per requirement. You can also add / remove tabs if required. 48

  49. FAQ 1 FAQ 2 49

  50. FAQ 3 Step 28: Advance Mega Menu Settings Step 28.1: Creating Mega Menu oGo to Website Admin ->Configuration -> Menu -> Configure Website Menus. In this you will find Create Button. Click on it to create a menu. oThere 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. 50

More Related