By: Milind Mohan P

How to Customize Odoo 12 Website Home Page

Technical Odoo 12 Website&E-commerce

In this blog, we are going to discuss adding new items from the backend to the home page of Odoo website. In the community edition Odoo 12, Odoo provides us to add an option for various building blocks on the home page by drag and drop.

Here we can consider the example for displaying all the products available in our company on the home page of the Odoo website.

We can do this in many ways always remember if we replace or put our custom page inside the current layout of the Odoo home page then we cant add custom blocks which is a feature provided by Odoo itself. So always try to put the custom view after or before the current layout.

In .py

In order to add our custom details from the backend to the home page of Odoo website, we have to inherit the controller function of the home page and we can add our custom code of retrieving our required details from the backend.

from odoo import http
from import Website
class Website(Website):
   def index(self, **kw):
       super(Website, self).index()
       return http.request.render('<template_external_id>', {data})

In .xml

We have to extend the template of home page layout like below

<template id="new_homepage" inherit_id="website.homepage">

If we want to add an option to hide/show in our custom view, then we can add this option in the “Customize” menu of our website simply by adding the following code.

<template id="new_homepage" inherit_id="website.homepage" customize_show="True">

If we want to make it active at the time of loading the website just try the following code.

<template id="new_homepage" inherit_id="website.homepage" customize_show="True" active="True">

We can consider an example of displaying all the products which are in published state to the homepage of the odoo website.

In .py

from odoo.addons.portal.controllers.web import Home
from odoo import http
from odoo.http import request

class WebsiteSort(Home):
   def index(self, **kw):
       super(WebsiteSort, self).index()
       website_product_ids = request.env['product.template'].search([('is_published', '=', True)])
       return request.render('website.homepage', {
           'website_product_ids': website_product_ids

In .xml

<?xml version="1.0" encoding="utf-8"?>
   <template id="homepage_inherit_product_display" inherit_id="website.homepage" name="Products" active="True"
       <data inherit_id="website.homepage">
           <xpath expr="//div[@id='wrap']" position="after">
               <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
               <div class="container mt32 mb64">
                       <div class="product_details">
                       <div class="oe_product_cart_new row" style="overflow: hidden;">
                           <t t-foreach="website_product_ids" t-as="website_product_id">
                               <div class="col-md-3 col-sm-3 col-xs-12"
                                    style="padding:1px 1px 1px 1px;">
                                   <div style="border: 1px solid #f0eaea;width: 150px;height: auto;padding: 7% 0% 10% 0%;
                                    border-radius: 3px;overflow: hidden;
                                    margin-bottom: 44px !important;width: 100%;height: 100%;">
                                       <div class="oe_product_image">
                                               <div style="width:100%; height:145px;overflow: hidden;">
                                                   <img t-if="website_product_id.image"
                                                        class="img oe_product_image"
                                                        style="padding: 0px; margin: 0px; width:auto; height:100%;"/>
                                               <div style="text-align: left;margin: 10px 15px 3px 15px;">
                                                   <t t-if="">
                                                       <span t-esc=""
                                                             style="font-weight: bolder;color: #3e3b3b;"/>
                                               <a style="background-color: #2b2424;color: white;width: 76%;left: 12%;
                                           height: 39px;display: block;padding: 11px 1px 1px 1px;font-size: 11px;
                                           border-radius: 3px;margin-top: 10px;text-decoration: none;
                                           position: absolute;bottom: 15px;"
                                                  t-attf-href="/shop/product/#{ slug(website_product_id) }">Details
                   <hr class="border-600 s_hr_1px w-100 mx-auto s_hr_dotted"/>

The possible output will be


And we can enable/disable this from the menu “Customize”.


cybrosys youtube



very helpfull




Vasil Stoev

Hi, I try your code in v12 but it doesn't work.




Leave a comment




Recent Posts


Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635


Cybrosys Limited
Alpha House,
100 Borough High Street, London,
SE1 1LB, United Kingdom


Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.


Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message