Theme Clarico
Theme Clarico
Theme Clarico

User Guide - Theme Clarico

Visit App
Install & Update Theme

Before installing Theme Clarico, make sure that you have downloaded latest Odoo version as well as latest version of Theme Clarico. It is advisable to go to the website record and install Clarico Theme from there.

Install Theme

Once you download Theme Clarico from Odoo Store, you will get two folders. One is ‘emipro_theme_base’ and the second one is ‘theme_clarico’. ‘emipro_theme_base’ is a separate application. ( If you have already purchased it then you don’t need to download it again. You will need only a module of theme.) You just need to add those folders in your addons directory and restart the Odoo server instance and update your App List. Now Go to Website → Configuration → Settings. In Website settings, Select a Website in which you want to install Theme Clarico, click on “Choose A Theme” button. You will be redirected to List of Themes available. Click on Theme Clarico to Install it in your website.

Update Theme Clarico

To Update the Latest Theme, download it from Odoo Store and replace it with your existing Theme. There can be two scenarios for updating Theme features.

1. Changes Into ‘Emipro Theme Base Structure’

‘‘emipro_theme_base’’ module contains business logic and functional elements for all Emipro ecommerce themes in Odoo V12. So if there are any changes in business logic, then you need to upgrade ‘‘emipro_theme_base” module. After upgrading Theme base structure module, You need to upgrade the Theme. For that, navigate to ‘Website → Configuration → Settings’ and select website and click on ‘CHOOSE THEME’.

2. Changes Into ‘Theme Clarico’

‘theme_clarico’ contains the UI elements. So if there are any updates related to UI or template then you need to upgrade the Theme as per above mentioned steps.

3. Update Theme For Running Instance

You can get updated theme code from the running instance. Go to ‘Apps -> Updates’ Make sure the developer mode is currently on.

As shown in the screenshot, If your installed version of the theme is older than the version of the theme in Odoo app store, Then ‘Download required’ button will be displayed. Once you click on that button, It will show one suggestion box with all the steps. You just need to follow the steps accordingly to pull the latest version of the theme.

Once you get updated theme in your server, You need to upgrade the theme. So go to 'Apps --> Updates' and click on 'Upgrade' as shown in the screenshot and the theme will be upgraded.

Customize Theme - Header Style

After Installing the theme go to Web page and click on ‘Customize’ button. From the list click on ‘Customize Theme’ to set/change the header Styles.

From the Available options you can set or change the Header Style which suits best for your Website.


Note : After applying the changes, refresh your page to see the Effect for Header and Footer Styles.



Customize Theme - Footer Style

After Installing the theme go to Web page and click on ‘Customize’ button. From the list click on ‘Customize Theme’ to set/change the footer Styles.

From the Available options you can set or change the Footer Style which suits best for your Website.

Customize Theme - Button Style

After Installing the theme go to Web page and click on ‘Customize’ button. From the list click on ‘Customize Theme’ to set/change the button Styles.

From the Available options you can set or change the Button Style which suits best for your Website.

Enable Header Offer Style

Once you select header style, Offer text will available by default. If you want to delete or edit it, then simply click on ‘Edit’ button from the top right of the webpage and edit it. If you have deleted offer texts and you want that section back, then drag and drop the snippet named ‘Header Offer Text’ from Inner Snippets category. Save your changes.

Change Meta Title Of Web Page

To set your custom meta title and other SEO related information of each web page. Go to that particular page for which you want to set meta title. Click on ‘Promote’ button and then go to ‘Optimize SEO’. When you click on ‘Optimize SEO’ menu, one window will be opened. You can set your SEO content and then click on save button for saving the changes.

Enable Dynamic Category Menu

To enable the dynamic categories, go to menu ‘Website → Configuration → Menus’. Make sure that the developer mode is on.

Create/Select one menu for which you want to display the ecommerce categories, One label named ‘Is Dynamic Menu’ will be visible, check that field and go to the website to see the result. Ecommerce categories can be created from Website → Configuration → Products → eCommerce Categories menu.

Enable Static Mega Menu In The Header

To configure static mega menu, you need to go to menu ‘Website → Configuration → Menus’. Make sure the developer mode is currently on.

Once you create a new record for the menu, let’s design that menu at the website. Click on ‘Design Menu’ button at top right as shown in screenshot. When you click on ‘Design Menu’, you will be redirected to the website.

Drag and Drop any snippet from the available options in ‘Mega Menu’ as shown in Screenshot and save this page. After that when you hover on that particular menu, Mega menu context will be displayed.

Configure Timer Snippet

Timer snippet behaves like an internal snippet. So if you want to implement timer then first you need to drag and drop ‘Offer Timer’ snippet into your web page, Which is provided under the category ‘Offer Styles’.

‘Timer’ snippet will be activated once you drag and drop “offer timer” snippet. Once you drop ‘Timer’ snippet into ‘Offer Timer’ snippet body, One popup will be displayed for setting up the timer. You must need to set time in the correct format as per the placeholder texts in the input field.

Note: You will only able to drag and drop ‘Timer’ snippet inside ‘Offer Timer’ snippet section.


Animation Effect

You can apply animation to sections of the snippet. To apply animation to any section element or snippet, click on that element or section. Go to the option ‘animation’ from the snippet customize and select the animation effect which is best for that element. Save your changes. Your section will be animated on scroll. If you want to remove any applied animation, then click on ‘Remove Animation’ option from animation list and animation will be removed.



Remove Payment Icons From Footer

Click on ‘Edit’ at the top right header and select payment icons from the footer. Click on the icon of delete as shown in the screenshot and icons will be removed.

Add New Label And Assign It

To create a new label: Go to menu ‘Website → Configuration → eCommerce → Product Label’.

Create a new record and set the appropriate value of the label.

Let’s assign this label to one product to display in webshop. Go to any product and set label as shown in the screenshot.

After assigning a label, go to the shop(webpage) and you can see this label for that particular product.

Activate Category And Product Attribute Filter In Shop Page

1. Activate Category

To activate the ecommerce categories go to WebShop and click on ‘Customize’ option. Find and enable an option ‘Ecommerce Categories’. Once you click on that option and the ecommerce categories will be displayed at the left side.

2. Activate Product Attribute Filter

To activate the product attribute go to WebShop and click on ‘Customize’ option. Find and enable an option ‘Product Attribute's Filters’. Once you click on that option and the product attributes will be displayed at the left side.

Set Banner Image In Shop, Wishlist And Cart Page

To change banner image of the wishlist or cart page, First of all, you need to navigate to the wishlist page. Click on ‘Edit’ and select the banner image. Once you select that image block, You can see a ‘CUSTOMIZE’ options. Click ‘Background Image’ option.

You can select any image from the available list or even upload an image from your system as per your need and save the page. In this way, you can configure the cart page and shop page banner also.

Quick Filter

You can set any attribute as a quick filter. Once you set an attribute as a Quick Filter, that attribute will visible on the top of the shop section. For the configuration, open any attribute which you want to set as a Quick Filter.

According to the above screenshot, enable ‘Quick Filter’ and save the record.

In the shop page, you can see one option for ‘Quick Filter’. Make sure, once you enable any attribute as a Quick Filter it will not display in the attribute table at the left side of shop container.

Load Products Through Ajax

This functionality display product based on Ajax without reloading the page. When you select any attribute, it will display the products without reloading the webpage.

Note: Ajax based products loading will work with attributes only.

This feature is compatible with Multi Website. So you can configure this functionality based on the website. Go to ‘Website → Configuration → Websites’ and select any website in which you want to enable this functionality.

Note: You can only see ‘Websites’ option when developer mode is activated.

According to the above screenshot, enable ‘Load Products Through Ajax’ and save the record.

After this configuration, when you select any filter, brand or price filter, it will display the products without reloading the page.

In the above screenshot, you can see the Ajax animation displays. Your selected products will display in the current page after this animation without reloading the webpage.

Brand Filter

You can create a brand and assign it to products. To create a brand, Go to ‘Website → Configuration → Product Brands’.

Create a record for brand.

As shown in the screenshot, Set some appropriate details of your brand. Logo image should be uploaded in the size 100 X 100. Configure the website and make the record publish. After creating a brand, Let's assign it to products. Go to Product view.

At Shop page, You can see the brand list into attribute filters. If you select any brand, then products with that particular brand will get filtered.

As shown in the screenshot, You can see brand logo and brand description into product page.

Sort By Options : Popularity

In the Shop page, You can find an option ‘Popular’ into sort by. 'Popular' will display products popularity wise.

What is the Product Score?

Product's popularity is based on product score. Where product score is calculated based on popularity rule. Popularity rule contains rule type, the threshold value and threshold amount.

In popularity rule, Two types of rules are available. One is 'Sale Base' and a second is 'Rating Base'. If you select 'Sale Base' then it will calculate the product score based on last 30 days sales of the product. For example, If you select 'Sale Base' and set 25 threshold value and 50 threshold amount. If your any product's sale of the last 30 days is greater than the threshold value[25] then it will be added 50 into the score.

Like this, If you set 'Rating Base' and set 3 threshold value and 20 threshold amount. If any product's average rating is greater than the threshold value[3] then it will be added 20 into the score.

In the product score, the Brand value is also considered. If you configure any brand to any product and that brand has configured brand value, Then it will be added in the product score calculation.

A process of create popularity rule

Go to 'Website --> Configuration --> Products --> Popularity Rule' and create one rule.

As per the screenshot, You need to select rule type and set threshold value as well as threshold amount. You also need to activate the record for consideration at the time of score calculation.

Add Product Description

Go to the product in which you want to set website or product description. Click on ‘Edit’. Drag and Drop any snippet in the ‘Description’ portion and Save the Changes. Your edited changes will be displayed at description tab section.


Configure Offer Timer in Product Page

Offer Timer will help you to show discounted price period of a particular product. To configure offer timer, First you need to configure a pricelist. Make sure the discount and multiple sale pricing is activated from the settings of website.

Go to active pricelist and click on add a line from pricelist items.

Once you click on Add a line, One pop up will open. Select product and add discount for that particular product. To add timer add start date , end date and offer message. This timer will only work for product template.

Save the changes and go to that product from front end.

Note: The Configured timer will be visible only in product page.

Configure An Expertise Statistics

‘Expertise’ is a very powerful snippet to describe the expertise of your company in an easy and dynamic way. First of all, You need to configure your expertise information. Go to ‘Settings → Users & Companies → Companies’ and select your website’s company in which you want to show the expertise. Click on ‘Expertise’ tab into form view.

Create records of expertise.

In this way, you can configure your squad.

So let’s configure expertise snippet at the website. Go to the web-page in which you want to display the expertise snippet and click on ‘Edit’ from the top-right header. Drag and drop ‘Expertise’ snippet from ‘Dynamic Snippet’ category and save the page.

Slider

In Theme Clarico, Slider snippet is containing dynamic products and category data. There are different process to configure both.

Configure Category Listing

To configure category listing at backend, You should be having categories created for your website. Ecommerce categories can be created from Website → Configuration → Products → eCommerce Categories menu. After creating category , update image in parent categories.

Now to configure product slider, go to ‘Website → Configuration → Sliders → Sliders’. Create a record and configure all data. Select ‘Category’ as slider type. Set limit of the category you want to show. Save the record. There is a button named Preview at the top right of the record. By clicking on that, you will be redirected to a new window having preview of category slider.

Now, Go to the webpage and drag and drop ‘slider’ snippet from Dynamic snippet category.

Note: Do not forget to activate this record by clicking on archived button at top right. If you don’t activate this record, it will not be visible at the front end.

Once you drag and drop the snippet, One popup will be visible. Select the slider which is having slider type category. Continue and save your changes.

Category will be visible at your webpage.

Note: Only first level category will be visible in this snippet.

Configure Product Slider

To configure product slider, First you need to create filter from Product Template view. As shown in the below screenshot, Go to product view and create a filter by searching the products and save the filter.

Now to configure product slider, go to ‘Website → Configuration → Sliders → Sliders’. Create a record and configure all data. Select ‘Product’ as slider type. Add filters.

Once you click on add a line, one popup will open. Select the filter and publish that.

Set products limit and select slider style. 4 different slider styles are provided in this theme. Each style containing different design. After selecting slider styles , activate the record from the top right. You can also get the preview of styles by clicking on preview button at the top.


Note: Do not forget to activate this record by clicking on archived button at top right. If you don’t activate this record, Products will not be visible at the front end.

Now, Go to the webpage and drag and drop ‘Slider’ snippet from Dynamic snippet category.

Once you drag and drop the snippet, One popup will be visible. Select the slider which you have created for filtered products. Continue and save your changes.

Product slider will be visible at your webpage.

Set Category Wise Landing Page

You can set the category wise landing page for all categories. For that, you need to navigate to that category in the website.

For an example, If you want to set a landing page for ‘Bed Room’ category, then go to that category page. Click on ‘Edit’ button and drag and drop the snippet which is suitable for that category.

Note: The snippet should be dragged inside the blue section only between Header and Breadcrumb section as shown in the screenshot. Once you drag and drop any snippet in a particular category , the shop banner image for that category page will be removed.

Configure Social Links Into Footer

First of all, You need to set the social media links from website settings. Go to ‘Website →Configuration →Settings’ and add the links for your current website and save it.

You can see all the links with icons at the footer. Social media in website settings are compatible with multi website.

Change A Theme Font

A Theme provides 10 different options for fonts. If you want to use your own choice fonts then you can also do that. There are two different scenarios to changes the fonts.

1. Change Default Font

    Right now, In the Theme, The Rubik font is loaded by default. So if you want to replace the Rubik font with yours, then follow the steps :
  • Go to the path:/theme_clarico/static/lib/fonts
  • replace the Rubik font file with a new one
  • then open the file : theme_clarico/static/lib/theme/fonts.scss
  • Then replace all the Rubik text with your font name

2. Add New Fonts Into All Available Fonts

If you want to replace the fonts available other than rubik then follow the below steps.

  • open the file: theme_clarico/static/lib/theme/fonts.scss
  • simply replace the new font name(must be copied from google fonts) with existing one everywhere in the file
  • restart and check your changes
  • If font name is having space then use '+' instead while replacing the font name in "$o-theme-font-urls"

Set Links Into Label Of Footer

Click on ‘Edit’ button of the page and select any list items of footer in which you want to set link.

When you single click on that label, You can change the name. When you double click on that label, One popup will appear. From that popup, You can set URL or any link, size, color and some other settings related to button link.