How to customize the Odoo 18 frontend without breaking anything:

6 de October de 2025 · Sasha

CUSTOMIZE THE ODOO 18 FRONTEND WITHOUT LOSING CHANGES

Recently I needed to move a tabs module on an Odoo 18product page. A seemingly simple task became a small ordeal. The visual editor couldn't move the block, direct XML edits had no effect, and updating the addon erased my changes.

WHEN THEORY DOESN'T MATCH PRACTICE

I found guides for these modifications, but most targeted earlier Odoo versions. Many things changed in version 18, both Community and Enterprise. The official documentation doesn't cover these cases in depth, and forums contain outdated solutions. Frustrating, but also an opportunity to learn.

THE IDEA: A CUSTOM MODULE FOR FRONTEND CHANGES

After trying several approaches, I created a technical module for these adjustments without relying on the visual editor or losing changes during future updates. I also included support for CSS, JavaScript and QWebviews. That became Frontend CSS/JS Loader, an addon I'm sharing in case it helps someone else.

WHAT DOES THIS MODULE DO?

It adds no new website features. It provides a clean structure for frontend customizations within the project's source code. Everything integrates with Odoo's compilation and caching system, without breaking things or leaving loose code in the editor.

ADVANTAGES OF A CUSTOM ADDON

• Keep your changes: your customizations are versioned with the rest of the project.
• Full control: work with CSS, JS and QWeb files in your repository.
• Optimized loading: files are processed within web.assets_frontend.
• Compatible with CSP policies: no inline JavaScript or loose styles.
• Easy maintenance: everything stays in one module, portable across environments.

MODULE STRUCTURE

frontend_css_js_loader/
├─ __manifest__.py
├─ static/
│  └─ src/
│     ├─ css/style.css
│     └─ js/website.js
└─ views/
   └─ custom_templates.xml (opcional)

In style.css you write custom styles. In website.js you add behavior scripts. For QWeb view adjustments, use custom_templates.xmlwithout changing core files.

HOW TO USE IT

1. Install the module from Apps, or copy the folder to your addons.
2. Edit your files: style.css, website.js and custom_templates.xml.
3. Update the module (Apps → Upgrade or -u frontend_css_js_loader).
4. Reload the page: your changes will be active, compiled and cached.

WHO IS IT FOR?

• Developers and agencies maintaining Odoo websites.
• Designers who want to apply CSS without changing the backend.
• Teams using Git and automated deployments.
• People who want to stop losing changes whenever Odoo updates.

SUMMARY

👉 When customizing the Odoo 18 frontend, avoid the visual editor.
👉 Create an addon with your CSS, JS and QWeb views.
👉 Integrate it into the project's technical workflow to keep control, performance and security.

This module grew from a specific need, and I'm sharing it in case it helps someone else. It is available on GitHub, and you're welcome to adapt it, improve it or comment.

DOWNLOAD AND CONTACT

🔗 GitHub: Frontend CSS/JS Loader for Odoo 18
📩 Would you like to extend the structure or integrate it into your theme? We can help.

I'm Sasha Herscovich, and I design, develop and provide technical support for online stores built with WordPress and Odoo. I solve real problems every day and occasionally share what I encounter in case it helps someone else.

This blog contains ideas, solutions and code snippets I use in real projects. Some are for people who manage their own websites; others are for developers and designers looking to improve their work, save time or understand how to solve a particular issue.

I don't sell magic formulas or universal solutions. I share what works for me, what I test and what I learn along the way. If it helps you, welcome. And if you'd like to comment, improve or adapt something, I'd love you to.