How to Create a Custom Static Snippet in Odoo 18

Hello Odooers & Developers! 

Welcome to another hands-on Odoo tutorial!

Today, we're diving into something visual and beginner-friendly: Odoo Snippets! Whether you're building a company website, customizing a theme, or designing a new section for your homepage, snippets help you easily create attractive and reusable content blocks. In Odoo, snippets are of two types:

• Static Snippets: These are fixed content that stays the same until the user decides to change it.
• Dynamic Snippets: These contents are pulled from the Odoo backend based on specific data sets and changes automatically.

In this blog, we'll guide you step-by-step through creating your custom static snippet in Odoo 18.

What Is a Snippet in Odoo?

A snippet in Odoo is a pre-designed content block you can drag and drop into website pages using the Website Builder. It could be anything from a text section, image gallery, contact form, or pricing table.

Snippets help users design websites without writing code, but as a developer, you can create custom snippets that clients or teams can reuse.

Here's what makes snippets powerful:

• Easy to use
• Reusable across multiple pages
• Fully customizable
• Integrated with the Odoo website editor

What You'll Learn in This Guide:

• What files and folders do you need to create a snippet
• How to define a snippet's HTML structure using XML
• How to register your snippet to show up in the Website Builder
• How to add a thumbnail for easy identification
• How to test your snippet on a live website

Step 1: Create Your Module

If you haven't already done so, create a custom module. You can name it something like dev_learn_odoo.

Inside the module, create the following folder structure:

dev_learn_odoo/

├── static/

│   └── description/

│       └── icon.png

├── views/

│   └── basic_snippet.xml

├── __manifest__.py

Make sure to add the icon image (like a small PNG preview) that will appear in the snippet bar.

Step 2: Define the Snippet Template

Now, let's create the content of your snippet in XML. This is where you decide what the snippet looks like a title, a paragraph, and a layout.

In views/basic_snippet.xml, add this code:

<?xml version="1.0" encoding="UTF-8"?>

<odoo>

	<template id="custom_snippet_template" name="Custom Snippet">

	<section class="container my-5">

    	<div class="row align-items-center">

        	<div class="col-md-6">

            	<h2 class="display-4">Design Powerful Web Experiences</h2>

 <p class="lead">Build engaging, reusable components in Odoo using 
                 intuitive XML and HTML structures. 
               Perfect for developers and designers a like.</p>

           <a href="#" class="btn btn-primary mt-3">Get Started</a>

        	</div>

        <div class="col-md-6 text-center">
<img src="/dev_learn_odoo/static/description/img.png" class="img-fluid" 
alt="Custom Snippet Preview"/>

        	</div>

    	</div>

	</section>

</template>

    	<xpath expr="//snippets[@id='snippet_groups']" position="inside">

        <t t-snippet="dev_learn_odoo.custom_snippet_template"

        t-thumbnail="/dev_learn_odoo/static/description/icon.png"/>

    	</xpath>

</template>

Let’s understand what this does.

• <template id="custom_snippet_template">: Defines the actual snippet content.
• <template id="custom_snippet_banner" inherit_id="website.snippets">: Adds your snippet to the snippet panel.
• T-thumbnail: Adds a small preview image to represent your snippet in the Website Builder.

Step 3: Load the Snippet in Manifest

Edit your __manifest__.py file and include the XML in data:

{

    'name': 'Learn Odoo Snippet',

    'version': '1.0',

    'category': 'Website',

    'depends': ['website',’website_payment’],

    'data': [

        'views/basic_snippet.xml',

    ],

    'assets': {},

    'installable': True,

}

Step 4: Restart & Upgrade the Module

Once everything is ready:

1. Restart your Odoo server.
2. Upgrade your module from Apps > Update Apps List.
3. Go to Website > Edit Page.

Open the Snippets panel.
Look for your snippet with the icon you provided. Drag and drop it onto the page!

I have already dragged and dropped the snippet onto the desired area of the page.The next step is to click on the Save button to ensure all modifications are applied and saved successfully.

Your "Basic Snippet" shows up as a section with a heading and a paragraph. You can now reuse this anywhere on the site.

Why Use Custom Snippets?

Custom snippets help you:

• Save time by reusing components
• Standardize the look and feel of your website
• Allow non-tech users to build pages without coding
• Add dynamic elements later using JavaScript or QWeb

Conclusion:

Creating snippets in Odoo is easy, fun, and very useful. With a few simple steps, you can define your HTML in XML, register it in the snippet list, and provide a thumbnail. You can create modular content blocks that are ready to be dragged and dropped.

Whether you're building a product showcase, contact section, or an animated banner, snippets are your website builder toolbox!

At Devintellecs, a trusted Odoo development company in India, we specialize in helping businesses leverage Odoo powerful features, like snippets, to their website functionality and user experience.