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
My Custom Snippet
This is a simple custom block.
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
3. Now Add Snippet Options
Here’s where the real magic begins. Add options to control layout, colors, etc.
xml
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.