Odoo Website Builder: Aligning the Header of the Product Block


You're building a website on Odoo Website Builder and you've added a Product block, but you can't center the header for it. I was able to get around this by adding custom CSS. Here's what you do:

Step 1: On the Website Builder page, click on "Edit," then "Theme." Scroll to the bottom, and you'll see "Code Injection" under "Advanced."

Step 2: Click on " and " and add the following to the tag.

.s_dynamic_snippet_products .s_dynamic_snippet_title.justify-content-between { justify-content: center !important; }
.s_dynamic_snippet_products .s_dynamic_snippet_title > div:first-child { flex: 1; text-align: center; }
.s_dynamic_snippet_products .s_dynamic_snippet_title > div:last-child { position: absolute; right: 0; }

This is what you'll get:

If you've removed the "See all ->" on the right side of the Product block, use the following instead:

.s_dynamic_snippet_products .s_dynamic_snippet_title.justify-content-between {
justify-content: center !important;
}


However, there's one limitation: this works for the Product block from Odoo v18 and might not work for other versions of Odoo. You'll might have to change the CSS path to make it work for other versions.

Bonus: here's my conversation with Claude to figure this out: https://claude.ai/share/91965e93-e9b9-4873-a8f9-8547b487e09f

Swimming Chicken

Subscribe to avoid the mistakes I've made.

Read more from Swimming Chicken

Your company is already using Odoo, but now you need an eCommerce store. You have three main options: 1. Odoo Web Builder This is the Odoo Website app that allows you to build a website using a drag-and-drop interface. It’s a great option because it’s relatively easy to get started and can be customized to a certain extent. However, you may want to consider other options if you expect heavy website traffic or need more advanced features out of the box as this website will be consuming the...

You’re upgrading Odoo from V17 to V18 and discover that you’ll need to set up a new UPS module, as the old one is being deprecated. You follow the instructions in the UPS integration documentation, but notice that the fields mentioned(UPS Account Number, UPS ClientId, UPS Client Secret) don’t appear in your UPS Configuration tab. What gives? Missing UPS Account Number, UPS ClientId, UPS Client Secret fields for UPS module The issue is that you don’t have permission to configure Settings. A...

If you’ve got an IT background, it’s tempting to self-implement Odoo — and in some cases, that can work. But unless you’re planning to dedicate at least 50% of your time to it over the next year, bringing in a partner is usually the smarter move. There's a lot more to implementation than just installing Odoo. You’ll want to do a GAP analysis to make sure Odoo can cover your business needs, think through data migration, and be ready for post-go-live support — that’s when real users start...