Odoo Headless Theme Momentum

The homepage is built from 11 sections that read one Odoo payload. Each section disappears when its data is empty, so the page never shows an unfinished block.

Banner destinations follow the bannerType value, which routes a tile to a product, a CMS page or a category listing. Additionally, if you want the same catalog inside a native app, then check Odoo Mobile App Builder.

• Rotate the hero every 4.5 seconds, with dot indicators, arrows and a pause on focus.
• Rotate the promotion banner every 5 seconds with its own dots and arrows.
• Show featured, explore and recently viewed carousels on Swiper, 2 to 4 products per view.
• Lay out brand collection tiles on a 12-column grid with per-banner background and text colour.
• Defer below-the-fold sections with CSS content-visibility to protect the LCP score.
• Skip every GSAP animation and carousel autoplay when the visitor asks for reduced motion.

The product listing page carries a sticky control bar. That bar holds a live product count, removable filter chips, a filter button and a sort dropdown.

Filters open in a slide-over drawer that traps focus, closes on Escape and locks body scroll while it is open. Also, if you publish printed or PDF catalogs from the same products, you can check Odoo Product Catalogs.

• Set a price range with minimum and maximum inputs, validated for negatives and for min above max.
• Pick attribute values that Odoo returns as aggregations, up to 14 options for each attribute.
• Apply a draft selection only on View products, or reset every choice with Clear.
• Sort on any Odoo sort field, expanded into A to Z, Z to A, Low to high and High to low.
• Page the grid 12 products at a time, with the current page mirrored into the URL.
• Fall back to a skeleton grid while fetching, a retry button on error and a Clear Filters empty state.

Each product page pairs a Swiper gallery with a sticky buying panel. Odoo decides how every option group draws itself, and the panel follows that instruction.

Picking one attribute reconciles the rest to a valid in-stock combination and swaps the gallery image to match. Also, if you sell those variants together as a set, you can check Odoo Website Product Pack.

• Draw option groups as swatch chips, pill buttons, radio lists or a native select.
• Switch a group above 6 values to a dropdown so the panel stays readable.
• Disable any value that has no matching variant behind it.
• Update the SKU and the price as soon as the shopper lands on a new variant.
• Deduplicate gallery images across main, gallery, variant and option-value sources.
• Show up to 4 related products, matched on category or collection.

A cart drawer slides in after every add to bag and can also be opened from the header bag icon. The full bag page repeats the same lines with larger imagery and a sticky summary.

Totals come from the Odoo prices object where it is present, and are computed locally only when it is not. Additionally, if you run discount codes on those carts, then check Odoo Website Coupons & Vouchers.

• Step a line quantity up or down, where a decrement at 1 removes the line.
• Create an empty Odoo cart automatically on the first add to bag.
• Replace a cart that Odoo reports as expired, missing or inaccessible, then retry once.
• Apply a promo code from the bag page and report the result through a toast.
• Announce every cart change to screen readers through a polite live region.
• Suspend cart sync right after an order so a stale bag cannot reappear.

Checkout runs as a step sequence over the Odoo cart. A step unlocks only after Odoo confirms the one before it, and Zod validates each form before the shopper moves on.

A saved draft returns the shopper to the right step after a refresh. The theme restores it only when the draft matches the current cart.

• Give guests Information, Shipping, Shipping Method, Payment and Review.
• Offer signed-in customers their saved address book as selectable cards with a Default badge.
• Send only the address_id for a saved address, so Odoo links it instead of duplicating it.
• Load regions from the chosen country and require one only where that country has regions.
• List the shipping and payment methods Odoo returns, with the first option pre-selected.
• Block Place Order until the payment step has produced a transaction_id.

Branding and money both come from Odoo. The palette, the logo, the favicons and the announcement text are back-office fields, and the currency list arrives with them.

Colour values pass a format check first. A typo in Odoo drops back to the compiled default instead of breaking the page. Also, if you run several storefronts from one Odoo database, you can check Odoo Multi Website.

• Map 18 tokens, from background and foreground through accent, muted, danger and star.
• Accept hex, rgb, hsl, oklch and named colours, and reject anything else.
• Read older palettes through the legacy colour keys when a backend predates colors.tokens.
• Persist the chosen currency in cookies and localStorage so the server render already matches.
• Send X-Odoo-Currency on every request and format prices with Intl.NumberFormat.
• Re-theme Swiper and the toast layer from the same set of tokens.