crafito odoo theme - user guide
TRANSCRIPT
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
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:
o You should login as an Admin in Odoo.
o Check that your Odoo Instance is compatible for Crafito Theme.
o An 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.
o It should be same as defined in Odoo Config file.
o Config files are mostly saved in /etc folder. For e.g. /etc/odoo.conf
o Open 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 o For 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
o Give the below mentioned commands to perform copy operation:
$cd /home/odoo/Downloads/theme_crafito
$cd v9
$sudo cp theme_crafito /opt/odoo/addons
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.
o Click on “Update” button.
Step 8: Go to Settings/Local Modules o Remove search filter
5
o Enter module name in the search box provided in the top right corner of the page. For e.g. here write “Crafito”.
o Click on install button.
6
4. 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.
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.
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.
9
About Company Snippet
About Us 2 Snippet
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.
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.
12
Special Features 1
Special Features 2
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
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.
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.
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.
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.
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.
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
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.
21
Testimonial 1
Testimonial 2
22
Testimonial 3
Testimonial 4
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
24
Pricing Table 2
Pricing Table 3
25
Pricing Table 4
Pricing Table 5
26
Pricing Table 6
Pricing Table 7
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
28
Our Services 2
Our Services 3
Our Services 4
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.
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.
o Slider Name: Slider Name
o Auto Rotate Slider: Enable this to set slider on Auto Rotation
o Slider Sliding Speed: Manage Slider Speed if set on Auto Rotation
o No. Of Collections to Show: Number of collections that are displayed on the page.
o Collection Name: Name of the Collection
o Product Collection: Set products which are displayed in the collection.
o Special Offer Product for Collection: Set special product which will be displayed in the
collection
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.
o Slider Name: Slider Name
32
o Counts: Number of Categories to display on the page.
o Auto Rotate Slider: Enable this to set slider on Auto Rotation
o Slider Sliding Speed: Manage Slider Speed if set on Auto Rotation
o Collection 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.
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.
o Slider Name: Slider Name
o Counts: Number of Categories to display on the page.
o Auto Rotate Slider: Enable this to set slider on Auto Rotation
o Slider Sliding Speed: Manage Slider Speed if set on Auto Rotation
o Collection 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.
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.
o Slider Name: Slider Name
o Slider Label: Set the label for the slider
o Products 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.
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.
o Slider Name: Slider Name
o Slider Label: Set the label for the slider
o Products Collection: Set the products displayed in the slider.
o Collection of Blog Posts: Add the Blogs which are needed to be added in the collection.
36
Blog Slider
News 1
37
News 2
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.
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.
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
41
Showcase
42
Showcase 2 Column
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.
44
Our Team 1
Our Team 2
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.
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.
47
Text + Image
Image + Text
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.
49
FAQ 1
FAQ 2
50
FAQ 3
Step 28: Advance Mega Menu Settings
Step 28.1: Creating Mega Menu
o Go to Website Admin ->Configuration -> Menu -> Configure Website Menus. In this you will find Create Button. Click on it to create a menu.
o 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.
51
Step 28.2: Mega Menu Configuration
o Select Is megamenu…? Option to create mega menu & give configurations as required.
o You can directly add URL for the Mega Menu and can also add it in New Window.
o Mega Menu Type: No. of columns needed in Mega Menu.
o 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.
52
o Category Slider: To display category slider, select display category slider option &
additional functionalities like Slider label & Position will be displayed.
o 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.
53
o Menu Footer:
To display menu footer enable Display Menu Footer option and give text for the footer.
Step 28.3: Mega Menu Categories & Sub Categories
o Go to Sales -> Products -> Web Site Product Categories. In this you will find Create Button. Click on it to create a Product Category.
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.
54
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.
Step 29: Product Image Gallery Configurations
Step 29.1: Creating New Product
o Go to Sales -> Products. In this you will find Create Button. Click on it to create a New Product.
o There you will have options to add Multiple Images. After clicking that you can set multiple images for the product.
55
Step 29.2: Add Multiple Images to the product
o Click on Product Multiple Images tab.
o Click on Add an item option to start adding images for the product.
Step 29.3: Creating a new Image
o After adding an item you’ll be redirected to create image pop up.
o Give proper Title, Alt text, Type (Image / Video), Image and Sorting order.
o If you don’t want to include this image in Custom Product Image Gallery click on More
View Exclude.
o Click on Save & Close to create new image.
o To create another image / video click on Save & New.
56
Step 29.4: Creating a new Video
o After adding an item you’ll be redirected to create image pop up.
o Give proper Title, Alt text, Type (Image / Video), Image and Sorting order.
o To create Video click on Video option.
o Give proper type to video which can be of
You Tube Video
Vimeo Video
HTML 5 Video
o If you don’t want to include this video in Custom Product Image Gallery click on More
View Exclude.
o Click on Save & Close to create new Video.
o To create another image / video click on Save & New.
Step 29.5: Panel Options
o Go to Website Admin -> Configuration -> Multiple Product Image. You’ll see settings for
Multiple Product Image.
o 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.
57
Step 30: Adding Different Filters 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.
58
59
5. Technical Support
We accept all kinds of Odoo queries and provide customized Odoo solutions, focusing on
unique business requirements.
We provide all technical support. Get in touch with us by filling in our online message form to
contact our support team or send us an email at
Your IT Partner, With You Anytime, Anywhere!
6. About of Biztech Consultancy
We simplify your business, by offering unique business solutions in digital web and IT
landscapes.
Our core expertise includes
Odoo Expertise
We are Odoo specialist! We do
Odoo Customization
Odoo apps development
Odoo support and maintenance
Theme development
We offer reliable and best Solutions!
