Arsalan YasinWant your Odoo website to stand out without hardcoding everything? Snippets are your new best friend.
Odoo 18 Website Builder is already user-friendly. But when you add custom snippet options, you unlock a whole new level of design freedom. Whether it’s a special layout, background, or animation — snippets let you do more with less code.
Let’s walk through how to create and customize snippet options step by step.
💡 What Are Snippet Options in Odoo 18?
Snippets are drag-and-drop building blocks for your website. They include text, banners, buttons, and other UI elements.
Snippet options are settings inside each snippet. Think of them as design controls:
- Change background color
- Switch layouts
- Add padding or effects
- Enable/disable features
With a few lines of XML and JS, you can empower users to tweak the snippet’s appearance with zero coding.
⚙️ Step-by-Step: Creating Custom Snippet Options
1. Define Your Snippet XML
First, create a new snippet in your module (or modify an existing one):
xml
<template id=”custom_snippet” name=”Custom Snippet”>
<section class=”custom_snippet_section”>
<div class=”container”>
<h2>My Custom Snippet</h2>
<p>This is a simple custom block.</p>
</div>
</section>
</template>
Place this in your module’s views/snippets.xml.
2. Add the Snippet to the Builder
Tell Odoo where it belongs in the website editor:
xml
<template id=”custom_snippet_block” inherit_id=”website.snippets” name=”Add Custom Snippet”>
<xpath expr=”//div[@id=’snippet_structure’]” position=”inside”>
<t t-snippet=”your_module.custom_snippet” t-thumbnail=”/your_module/static/img/thumb.png”/>
</xpath>
</template>
3. Now Add Snippet Options
Here’s where the real magic begins. Add options to control layout, colors, etc.
xml
<template id=”custom_snippet_options” name=”Custom Snippet Options” inherit_id=”website.snippet_options”>
<xpath expr=”//div[@id=’snippet_option_tabs’]” position=”inside”>
<div data-selector=”.custom_snippet_section” class=”snippet-option”>
<select data-name=”Background Color”>
<option data-class=”bg-white”>White</option>
<option data-class=”bg-dark”>Dark</option>
<option data-class=”bg-primary”>Primary</option>
</select>
</div>
</xpath>
</template>
This lets the user choose background colors using a dropdown menu in the editor.
🧠 JavaScript: Activate the Behavior
Create a JS file to hook the options into Odoo’s frontend behavior:
javascript
CopyEdit
odoo.define(‘your_module.custom_snippet_options’, function (require) {
var options = require(‘web_editor.snippets.options’);
options.registry.CustomSnippet = options.Class.extend({
onChangeBackgroundColor: function (previewMode, value) {
this.$target.removeClass(‘bg-white bg-dark bg-primary’).addClass(value);
},
});
});
Don’t forget to link your JS file in the asset bundle.
🎨 Examples of Cool Snippet Options to Add
- Layout toggle: Full-width or boxed
- Text alignment: Left / Center / Right
- Animation: Fade-in, slide, or zoom
- Image overlays: Enable/disable with a switch
- Custom fonts or sizes
These options make your Odoo websites look premium without writing tons of CSS.
🚀 Benefits of Using Snippet Options
✅ Empower non-tech users to customize
✅ Reuse and scale your website design
✅ Make your themes dynamic and flexible
✅ Save time on one-off styling
If you’re building for clients, snippet options are a huge value-add.
👨💻 Final Words – Customize Smarter, Not Harder
With custom snippet options in Odoo 18, you’re giving your team or clients powerful tools to design with ease. Whether you’re building an eCommerce store or a corporate site — a little snippet magic goes a long way.
Need help building advanced snippets for your project? Let’s build something epic together.