Chapter 10 - Odoo 15 Development Book

Static Snippets

Odoo provides a user-friendly and effective website management tool that allows users to create and customize their websites. The user can easily use these snippets with the simple drag-and-drop function. Odoo's Website Editor offers several editing building blocks that you can drag and drop to your page and edit to your needs. It will explain the way to build your own construction blocks. There are many types of snippets in Odoo, but in general, we can divide them into two types: static snippets and dynamic snippets. The static snippets are fixed and will not change until the user changes them. The dynamic snippets based on the records are stored in the Odoo backend.

Odoo offers its users a wide variety of snippets. Additionally, any user can create their own custom snippet in Odoo. Let's look at a simple example of how to create a static snippet in Odoo.

How to create a snippet?

A snippet is a QWeb that adds to the insert block bar. We will create a snippet that shows the image and title of the product item. You can drag and drop the snippet on the page and edit the image and text. The static snippet is nothing but a block of HTML code. Consider the following steps to create a new static snippet:

  • Add a QWeb template for the snippet in views/snippets.xml, as follows:
  • <?xml version="1.0" encoding="UTF-8"?>
    <template id="snippet_product_cover" name="Product Cover">
        <section class="pt-3 pb-3">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6 pt16 pb16">
                        <h1>Odoo Mug</h1>
                            Odoo is a suite of open source business apps that cover all your company needs: CRM, eCommerce, accounting, inventory, point of sale, project management, etc.
                        <a class="btn btn-primary" href="#" >                        Mug Details                     </a>
                    <div class="col-lg-6 pt16 pb16">
                          class="mx-auto img-thumbnail w-50 img img-fluid shadow"/>

    we created a QWeb template with our HTML for the product block. In this HTML, we have just used a Bootstrap column structure, but you can use any HTML code. Note that the HTML code you add in the snippet's QWeb template will be added to the page when you drag and drop. Generally, it's an honest idea to use section elements and Bootstrap for snippets, because, for them, the Odoo editor provides editing, background, and size controls out of the box.

  • List the template in the snippet list like this:
  • <template id="bproduct_snippets_options" inherit_id="website.snippets">
        <xpath    expr="//div[@id='snippet_structure']/div[hasclass('o_panel_body')]" position="inside">
            <t t-snippet="module_name.snippet_product_cover"

    we registered our snippet in the snippet list. You will need to inherit website.snippets to register a snippet. In the website editor GUI, snippets are divided into different sections based on their usage. In our example, we have registered our snippet in the Structure section via XPath. To list your snippet, you need to use a tag with the t-snippet attribute. The t-snippet attribute will have the XML ID of the QWeb template, which is

    module_name.snippet_product_cover in our example. You will also need to use the t-thumbnail attribute, which is used to show a small snippet image in the website editor. We have listed our snippet under the structure block. Once you update the module, you will be able to drag and drop the snippet.

  • Add the cover image and snippet thumbnail image in the /module_name/static/src/img directory.
  • There will be no need for extra JavaScript in such cases. Odoo's editor offers lots of options and controls out of the box, and they are more than enough for static snippets. You will find all existing snippets and options at website/views/snippets.xml.

    The snippet options also support the data-exclude, data-drop-near, and data-drop-in attributes, which determine where the snippet may be placed when dragging them out of the snippet bar. These are jQuery selectors, and during this, we did not use them because we allow you to place the snippet wherever the content may go.

Restart the server and update your module to apply the changes. When you open the website page in edit mode, you will be able to see our snippet in the snippets blocks panel.



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



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