Crafito Odoo Theme - User Guide - PowerPoint PPT Presentation

About This Presentation

Title:

Crafito Odoo Theme - User Guide

Description:

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. – PowerPoint PPT presentation

Number of Views:39

Slides: 51

Provided by: Bizmagestore

Category: Products & Services

more less

Transcript and Presenter's Notes

Title: Crafito Odoo Theme - User Guide

1
sales_at_biztechconsultancy.com
USER GUIDE Crafito Theme Compatibility Odoo 9.x
2

Table of Contents
Introduction 3
Pre-requisites 3
Installation 3
Plugin Configuration 6
Technical Support 59
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.
Pre-requisites
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
Crafito Theme.
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.
It should be same as defined in Odoo Config file.
Config files are mostly saved in /etc folder. For
e.g. /etc/odoo.conf
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
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
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 CliÐk oY
?Update? duttoY.
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
?rite ?Crafito?. o Click on install button.
6
4. Plugin Configuration

Step 1 Configuring Main Title Snippet
Go to Website -gt Edit -gt Insert Blocks -gt 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 -gt Edit -gt Insert Blocks -gt 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.

Step 3 Configuring Home Slider Snippet
Go to Website -gt Edit -gt Insert Blocks -gt 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.

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 -gt Edit -gt Insert Blocks -gt 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.

About Company Snippet

About Us 2 Snippet

About Us 3 Snippet

Step 5 Configuring About Me Snippet
Go to Website -gt Edit -gt Insert Blocks -gt 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 -gt Edit -gt Insert Blocks -gt 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.

Special Features 1

Special Features 2

Special Features 3

Step 7 Configuring News Letter Snippet
Go to Website -gt Edit -gt Insert Blocks -gt
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

Step 8 Configuring Contact Us Snippet
Go to Website -gt Edit -gt Insert Blocks -gt 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.

Step 9 Configuring Fact Sheet Snippet
Go to Website -gt Edit -gt Insert Blocks -gt 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.

Step 10 Configuring Skills Snippet
Go to Website -gt Edit -gt Insert Blocks -gt 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.

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 -gt Edit -gt Insert Blocks -gt 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.

Step 12 Configuring Maintenance Mode Snippet
Go to Website -gt Edit -gt Insert Blocks -gt
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.

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

Maintenance Mode 2

Step 13 Configuring Testimonial Snippet
Go to Website -gt Edit -gt Insert Blocks -gt
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

Testimonial 3

Testimonial 4

Step 14 Configuring Pricing Table Snippet
Go to Website -gt Edit -gt Insert Blocks -gt 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

Pricing Table 2

Pricing Table 3

Pricing Table 4

Pricing Table 5

Pricing Table 6

Pricing Table 7

Pricing Table 8

Step 15 Configuring Our Services Snippet
Go to Website -gt Edit -gt Insert Blocks -gt
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

Our Services 2

Our Services 3

Our Services 4

Emphasized Services

Service New

Step 16 Configuring Multi Product Slider Snippet
Go to Website -gt Edit -gt Insert Blocks -gt 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.

Managing Slider Configurations
Go to Sales -gt Slider Configurations -gt Multi
Product Slider Configurations. Click on Create
button to create a new slider category.
Set Following attributes to display Multi Product
Slider on website.

Slider Name Slider Name
Auto Rotate Slider Enable this to set slider on
Auto Rotation
Slider Sliding Speed Manage Slider Speed if set
on Auto Rotation
No. Of Collections to Show Number of collections
that are displayed on the page.
Collection Name Name of the Collection
Product Collection Set products which are
displayed in the collection.
Special 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 -gt Edit -gt Insert Blocks -gt
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 -gt Slider Configurations -gt 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

Counts Number of Categories to display on the
page.
Auto Rotate Slider Enable this to set slider on
Auto Rotation
Slider Sliding Speed Manage Slider Speed if set
on Auto Rotation
Collection of Category Add the categories which
are needed to be added in the collection.

Step 18 Configuring Products Slider Snippet
Go to Website -gt Edit -gt Insert Blocks -gt
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.

Managing Slider Configurations
Go to Sales -gt Slider Configurations -gt Products
Slider Configurations. Click on Create button to
create a new slider category.
Set Following attributes to display Category
Slider on website.
Slider Name Slider Name
Counts Number of Categories to display on the
page.
Auto Rotate Slider Enable this to set slider on
Auto Rotation
Slider Sliding Speed Manage Slider Speed if set
on Auto Rotation
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 -gt Edit -gt Insert Blocks -gt
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.

Managing Slider Configurations
Go to Sales -gt Slider Configurations -gt Featured
Products Slider Configurations. Click on Create
button to create a new slider category.
Set Following attributes to display Category
Slider on website.
Slider Name Slider Name
Slider Label Set the label for the slider
Products Collection Set the products displayed
in the slider.

Step 20 Configuring Blog Slider snippet
Go to Website -gt Edit -gt Insert Blocks -gt 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.

Adding Blogs to the Snippet
Go to Website Admin-gt Blog -gt Blog Slider
Configuration Click on Create button to create a
new Blog category.
Set Following attributes to display Blog Slider
on website.
Slider Name Slider Name
Slider Label Set the label for the slider
Products Collection Set the products displayed
in the slider.
Collection of Blog Posts Add the Blogs which are
needed to be added in the collection.

Blog Slider

News 1

News 2

News 3

Changing Cover for The Blog
Go to Website -gt Blog. Click on any blog of which
you want to change cover.
Click on Edit -gt Customize -gt Change Cover to
change the cover of the blog page.

Step 21 Configuring Client Slider snippet
Go to Website -gt Edit -gt Insert Blocks -gt 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 -gt Customers. Click on the customer
which you want to add in the snippet.
Click on Edit and Enable Add to client slider
option.

Step 22 Configuring Showcase Snippet
Go to Website -gt Edit -gt Insert Blocks -gt
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

Showcase 2 Column

Step 23 Configuring Our Team Snippet
Go to Website -gt Edit -gt Insert Blocks -gt 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.

Our Team 1

Our Team 2

Our Team 3

Step 24 Configuring Promo Block Snippet
Go to Website -gt Edit -gt Insert Blocks -gt 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.

Step 25 Configuring Text and Image Blocks
Go to Website -gt Edit -gt Insert Blocks -gt 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.

Text Image

Image Text

48
Step 26 Configuring Collection Snippet

Go to Website -gt Edit -gt Insert Blocks -gt
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 -gt Edit -gt Insert Blocks -gt 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.

FAQ 1

FAQ 2

FAQ 3

Step 28 Advance Mega Menu Settings
Step 28.1 Creating Mega Menu
Go to Website Admin -gtConfiguration -gt Menu -gt
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.

Write a Comment

User Comments (0)