Odoo still runs your catalog, pricing, stock, customers, carts and orders. Momentum simply renders all of it in a faster, more modern front end.<\/p>\n\n\n\n
This user guide walks you through the features, the installation steps and the day-to-day management of the theme. So if you are evaluating it or setting it up for the first time, start here.<\/p>\n\n\n\n
What Makes the Momentum Theme Different<\/h2>\n\n\n\n
Most storefront themes hard-code their colours, banners and menus. Momentum does the opposite.<\/p>\n\n\n\n
Odoo publishes almost everything you see. That includes the brand palette, the logo, the announcement bar, the mega menu and all eleven homepage sections.<\/p>\n\n\n\n
Because of that, a store owner can change the look of the storefront from the Odoo admin panel alone. No developer, no rebuild and no redeploy.<\/p>\n\n\n\n
The theme is also built for speed. It renders pages on the server and caches the Odoo responses, so shoppers see content almost instantly.<\/p>\n\n\n\n
Features of the Odoo Headless Momentum Theme<\/h2>\n\n\n\n
Here is a quick summary of what ships with the theme.<\/p>\n\n\n\n
- \n
- Admin-driven-driven theming<\/strong> \u2014 18 colour tokens, logo, favicon and store name come straight from Odoo.<\/li>\n\n\n\n
- Dynamic home page<\/strong> \u2014 11 sections that appear or hide based on what Odoo returns.<\/li>\n\n\n\n
- Three-level mega menu<\/strong> \u2014 built from your Odoo category tree, with image tiles.<\/li>\n\n\n\n
- Filters and sorting<\/strong> \u2014 a price range plus dynamic attribute filters such as colour, size and brand.<\/li>\n\n\n\n
- Variant-aware product pages<\/strong> \u2014 swatches, buttons, radios or dropdowns, with unavailable options disabled.<\/li>\n\n\n\n
- Guest and registered checkout<\/strong> \u2014 guest carts merge into the customer cart at login.<\/li>\n\n\n\n
- Customer account<\/strong> \u2014 dashboard, order history, order tracker, address book and profile.<\/li>\n\n\n\n
- Wishlist<\/strong> \u2014 a heart toggle on every product card and on the product page.<\/li>\n\n\n\n
- Multi-currency<\/strong> \u2014 a header switcher that re-prices the whole storefront.<\/li>\n\n\n\n
- CMS pages<\/strong> \u2014 Odoo pages rendered with sanitised, allow-listed HTML.<\/li>\n\n\n\n
- Built-in caching<\/strong> \u2014 cached catalog reads, optimised images and route-level loading skeletons.<\/li>\n\n\n\n
- Instant cache refresh<\/strong> \u2014 Odoo can call a webhook to update the storefront immediately.<\/li>\n<\/ul>\n\n\n\n
Frameworks<\/h2>\n\n\n\n
The theme uses a current, well-supported stack. Nothing here is experimental.<\/p>\n\n\n\n
- \n
- Next.js 16.3.0 (App Router)<\/li>\n\n\n\n
- React 19.2.4<\/li>\n\n\n\n
- TypeScript 5 in strict mode<\/li>\n\n\n\n
- Tailwind CSS 4<\/li>\n\n\n\n
- Redux Toolkit and TanStack React Query<\/li>\n\n\n\n
- React Hook Form with Zod validation<\/li>\n\n\n\n
- GSAP for motion and Swiper for carousels<\/li>\n\n\n\n
- Node.js 20.9.0 or newer as the runtime<\/li>\n<\/ul>\n\n\n\n
Header Request<\/h3>\n\n\n\n
You must allow the request origin and the request headers so the theme can talk to Odoo. Please follow the instructions below.<\/p>\n\n\n\n
# For Apache\nHeader set Access-Control-Allow-Origin "https:\/\/your-storefront-domain.com"\nHeader set Access-Control-Allow-Headers "Accept, Content-Type, Authorization, Authenticate, cartId, currency, X-Odoo-Currency"\n\n# For Nginx\nadd_header 'Access-Control-Allow-Origin' 'https:\/\/your-storefront-domain.com';\nadd_header 'Access-Control-Allow-Headers' 'Accept, Content-Type, Authorization, Authenticate, cartId, currency, X-Odoo-Currency';<\/pre>\n\n\n\n
This lets the browser and the server exchange cart, session and currency details without the browser blocking them.<\/p>\n\n\n\n
Installation Procedure<\/h2>\n\n\n\n
Prerequisites<\/h3>\n\n\n\n
- \n
- A working Odoo instance with the Odoo Headless E-commerce<\/a> app installed. Its user guide<\/a> covers that step.<\/li>\n\n\n\n
- A publicly reachable HTTPS Odoo URL, because the storefront calls Odoo over the network.<\/li>\n\n\n\n
- Your Odoo client token from the Headless app settings.<\/li>\n\n\n\n
- Node.js 20.9.0 or newer.<\/li>\n\n\n\n
- A hosting environment where you can run the Next.js build.<\/li>\n<\/ul>\n\n\n\n
Theme Installation<\/h3>\n\n\n\n
After you buy the theme from the Webkul Store, you get a zip file. Extract it, then move the folder wherever you want to install it.<\/p>\n\n\n\n
Now install the locked dependency tree.<\/p>\n\n\n\n
npm ci<\/pre>\n\n\n\n
Next, duplicate
.env.example<\/code>, rename the copy to.env.local<\/code> and update the values below.<\/p>\n\n\n\nAPI_URL=https:\/\/your-odoo-domain.com\/\nAPI_VERSION=v1\nCLIENT_TOKEN=your-odoo-client-token\nNEXT_PUBLIC_DEFAULT_STORE=en_US\nNEXT_PUBLIC_APP_URL=https:\/\/your-storefront-domain.com\nNEXT_IMAGE_REMOTE_PATTERNS=your-odoo-domain.com\nODOO_REVALIDATE_SECRET=your-shared-secret<\/pre>\n\n\n\n
You must set the first four values. The theme checks them at startup, so a missing value fails loudly instead of silently.<\/p>\n\n\n\n
Keep
CLIENT_TOKEN<\/code> on the server only. The theme never sends it to the browser.<\/p>\n\n\n\nThen run the development server and open the storefront in your browser.<\/p>\n\n\n\n
npm run dev\n# now open http:\/\/localhost:3000<\/pre>\n\n\n\n
If your Odoo data loads on the home page, the connection works correctly.<\/p>\n\n\n\n
Storefront View<\/h2>\n\n\n\n
The Odoo Headless Momentum Theme looks as shown in the snapshots below. Now let us walk through what your customers actually see.<\/p>\n\n\n\n
Home Page<\/h3>\n\n\n\n
The home page is made of 11 sections, and Odoo controls the content of each one.<\/p>\n\n\n\n
You get a hero slider, featured and explore carousels, a promotion banner, brand and collection grids, corner offers, a benefits row and a recently viewed strip.<\/p>\n\n\n\n
If Odoo returns no data for a section, that section simply does not render. As a result, a partly configured store still looks complete.<\/p>\n\n\n\n
![\"Momentum](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2026\/08\/home-2-1200x608.webp\")
<\/figure>\n\n\n\n![\"featured](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2026\/08\/featured-1200x608.webp\")
<\/figure>\n\n\n\nNavigation and Search<\/h3>\n\n\n\n
The header is sticky and holds the logo, search, currency switcher, wishlist, account and cart.<\/p>\n\n\n\n
Hovering a top-level category opens a mega menu built from your Odoo category tree, three levels deep, with up to two image tiles.<\/p>\n\n\n\n
On mobile, the same tree slides in as a drawer. Search opens as a focused overlay and sends the shopper to the results page.<\/p>\n\n\n\n
![\"Mega](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2026\/08\/menu-1-1200x608.webp\")
<\/figure>\n\n\n\n<\/p>\n\n\n\n
Category Page<\/h3>\n\n\n\n
Category pages open with a hero band, a live product count and a sticky control bar.<\/p>\n\n\n\n
The grid shows two products per row on mobile and four on desktop. Pagination shows 12 products per page and stays in sync with the URL.<\/p>\n\n\n\n
![\"Category](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2026\/08\/category-1200x614.webp\")
<\/figure>\n\n\n\nCatalog Listing<\/h3>\n\n\n\n
The filter drawer offers a price range plus attribute filters that Odoo generates, such as brand, material or category.<\/p>\n\n\n\n
Filters only apply once the shopper taps View products. Each active filter then shows as a chip, and one click removes it.<\/p>\n\n\n\n
Sorting comes from Odoo too, and every field appears in both ascending and descending order.<\/p>\n\n\n\n
![\"Filter](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2026\/08\/filter-1-1200x608.webp\")
<\/figure>\n\n\n\nProduct Page<\/h3>\n\n\n\n
The product page pairs a gallery with a sticky buying panel on desktop.<\/p>\n\n\n\n
Variant options render as swatches, pill buttons, radios or a dropdown, depending on how Odoo defines them.<\/p>\n\n\n\n
The theme disables any value that has no matching variant. So once a shopper picks a colour, it reconciles the other attributes to a valid, in-stock combination and swaps the gallery image.<\/p>\n\n\n\n
Below the fold you get the full description and up to four related products.<\/p>\n\n\n\n
![\"Product](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2026\/08\/pdp-1-1200x608.webp\")
<\/figure>\n\n\n\nCart Page<\/h3>\n\n\n\n
Adding a product slides open a cart drawer, so the shopper never loses their place.<\/p>\n\n\n\n
The full cart page adds a sticky order summary and a promo code field. Quantities update live, and totals come from Odoo whenever they are available.<\/p>\n\n\n\n
The cart itself always lives in Odoo. The storefront only keeps a mirrored copy, which it repairs automatically if the Odoo cart expires.<\/p>\n\n\n\n
![\"Cart](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2026\/08\/cart-1-1200x608.webp\")
<\/figure>\n\n\n\nCheckout Page<\/h3>\n\n\n\n
Checkout runs in five steps for guests and four for logged-in customers.<\/p>\n\n\n\n
- \n
- Information \u2014 name, email and phone, for guests only<\/li>\n\n\n\n
- Shipping address<\/li>\n\n\n\n
- Shipping method<\/li>\n\n\n\n
- Payment method<\/li>\n\n\n\n
- Review and place order<\/li>\n<\/ol>\n\n\n\n
The theme validates every step before it unlocks the next one, and Odoo has to confirm each step first.<\/p>\n\n\n\n
Logged-in customers pick from their saved address book, while the country and region dropdowns cascade automatically.<\/p>\n\n\n\n
Shipping and payment options come directly from Odoo, so whatever you configure in the Odoo is what the shopper sees.<\/p>\n\n\n\n
The draft is also saved in the browser. If a shopper closes the tab, they return to the same step.<\/p>\n\n\n\n
![\"Multi-step](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2026\/08\/checkout-2-1200x608.webp\")
<\/figure>\n\n\n\nOrder Success Page<\/h3>\n\n\n\n
Once the customer places the order, the theme clears the cart everywhere and shows the order number.<\/p>\n\n\n\n
From there the customer can open the order detail or keep shopping.<\/p>\n\n\n\n
![\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2026\/08\/order-1-1200x608.webp\")
<\/figure>\n\n\n\nLogin and Sign Up Page<\/h3>\n\n\n\n
Customers sign in with an email and password. If they had a guest cart, it merges into their account cart at login.<\/p>\n\n\n\n
New shoppers can register from the sign up page, and the theme logs them in straight after registration.<\/p>\n\n\n\n
The theme covers forgot password too. It asks Odoo to send the reset email, and Odoo’s own page then completes the reset.<\/p>\n\n\n\n
![\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2026\/08\/auth-1200x608.webp\")
<\/figure>\n\n\n\nMy Account<\/h3>\n\n\n\n
The account area holds a dashboard, order history, the address book and profile settings.<\/p>\n\n\n\n
Order detail includes a four-stage tracker \u2014 Order Placed, Processing, Shipped and Delivered \u2014 mapped from the Odoo order state. Cancelled orders show a dedicated banner instead.<\/p>\n\n\n\n
The theme keeps sessions in an HttpOnly cookie, so JavaScript can never read the customer token.<\/p>\n\n\n\n
![\"ustomer](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2026\/08\/dashboard-1200x608.webp\")
<\/figure>\n\n\n\nWishlist and CMS Pages<\/h3>\n\n\n\n
A heart toggle sits on every product card and on the product page. The wishlist needs a login, and the header badge shows the live count.<\/p>\n\n\n\n
CMS pages such as About Us or your policy pages come from Odoo as well. The theme renders only an allow-list of safe HTML tags, so a stray script can never reach your shoppers.<\/p>\n\n\n\n
![\"Wishlist](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2026\/08\/wishlist-1200x608.webp\")
<\/figure>\n\n\n\nMulti-Currency Support<\/h2>\n\n\n\n
The currency list and the default currency come from your Odoo store configuration.<\/p>\n\n\n\n
When a shopper switches currency, the theme re-fetches the home page, listings, product pages, cart and checkout. Consequently, every price on screen stays consistent.<\/p>\n\n\n\n
The theme saves that choice in a cookie, so even the first server-rendered page uses the right currency.<\/p>\n\n\n\n
Theme Colours from the Odoo Admin Panel<\/h2>\n\n\n\n
This is the part store owners tend to like most.<\/p>\n\n\n\n
Odoo publishes a palette of 18 colour tokens. The theme applies them during server rendering, so there is no flash of the old colours.<\/p>\n\n\n\n
Token<\/th> Controls<\/th> Token<\/th> Controls<\/th><\/tr><\/thead> background<\/td> Page background<\/td> card<\/td> Card surfaces<\/td><\/tr> foreground<\/td> Base text<\/td> surfaceSubtle<\/td> Image placeholders<\/td><\/tr> primary<\/td> Headings, buttons, footer<\/td> surfaceStrong<\/td> Dark surfaces<\/td><\/tr> primaryForeground<\/td> Text on primary<\/td> danger<\/td> Errors<\/td><\/tr> secondary<\/td> Secondary accent<\/td> dangerSurface<\/td> Error backgrounds<\/td><\/tr> accent<\/td> Highlight accent<\/td> success<\/td> Success states<\/td><\/tr> accentBlush<\/td> Badge background<\/td> star<\/td> Ratings<\/td><\/tr> muted<\/td> Secondary text<\/td> link<\/td> Links<\/td><\/tr> border<\/td> Borders and dividers<\/td> hoverAccent<\/td> Hover states<\/td><\/tr><\/tbody><\/table> The 18 colour tokens Odoo publishes to the storefront.<\/figcaption><\/figure>\n\n\n\n The theme validates every value first. If someone types a broken colour in Odoo, it quietly falls back to the default instead of breaking the page.<\/p>\n\n\n\n
Besides colours, Odoo also drives the store name, logo, favicons, announcement text, copyright line and the default SEO title and description.<\/p>\n\n\n\n
![\"Odoo](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2026\/08\/odoo-1200x605.webp\")
<\/figure>\n\n\n\nRefreshing the Storefront Instantly<\/h2>\n\n\n\n
The theme caches Odoo data to stay fast. However, you sometimes need a change to appear right away.<\/p>\n\n\n\n
For that, Odoo can call the revalidation webhook. The next visitor then sees fresh content immediately.<\/p>\n\n\n\n
curl -X POST https:\/\/your-storefront-domain.com\/api\/revalidate \\\n -H "Content-Type: application\/json" \\\n -H "x-revalidate-secret: your-shared-secret" \\\n -d '{"tags":["homepage","store-config"],"path":"\/"}'<\/pre>\n\n\n\nAvailable tags include homepage, store-config, mega-menu, footer, cms-pages, catalog-products and catalog-categories.<\/p>\n\n\n\n
SEO, Performance and Accessibility<\/h2>\n\n\n\n
Each route generates its own title, description, keywords, canonical URL and Open Graph tags from Odoo data.<\/p>\n\n\n\n
Product and category pages redirect non-canonical slugs, while search, cart, checkout and login pages carry a noindex tag.<\/p>\n\n\n\n
On the performance side, the theme uses server-side caching, lazy images, intent-based prefetching and deferred rendering for below-the-fold sections.<\/p>\n\n\n\n
Accessibility gets the same attention. Drawers trap focus, Escape closes overlays, touch targets stay at 44 px and every animation respects the reduced-motion setting.<\/p>\n\n\n\n
Security in the Odoo Headless Momentum Theme<\/h2>\n\n\n\n
We built security into the theme from the start rather than bolting it on later.<\/p>\n\n\n\n
- \n
- The Odoo client token stays on the server, and browser traffic goes through a proxy route.<\/li>\n\n\n\n
- The proxy forwards only to known Odoo endpoints, so anything else returns a 404.<\/li>\n\n\n\n
- Mutating requests need a same-origin header, which blocks cross-site requests.<\/li>\n\n\n\n
- Customer sessions live in HttpOnly, SameSite cookies.<\/li>\n\n\n\n
- The theme sanitises CMS HTML and checks every link protocol.<\/li>\n\n\n\n
- A build check blocks any deployment that would bundle the token into the worker.<\/li>\n\n\n\n
- Profile changes require the current password.<\/li>\n<\/ul>\n\n\n\n
Get the Odoo Headless Momentum Theme<\/h2>\n\n\n\n
Try the demo above, then grab the theme from the Webkul<\/a> Store<\/a>.<\/p>\n\n\n\n
NEED HELP?<\/h2>\n\n\n\n
Hope you find the guide helpful! Please feel free to share your feedback in the comments below.<\/p>\n\n\n\n
If you still have any issues or queries regarding the same, please raise a ticket at the UV Desk<\/a>.<\/p>\n\n\n\n
I hope this helps. In case of any further queries, contact us at our support mail<\/a>.<\/p>\n\n\n\n
Thanks for paying attention!!<\/p>\n\n\n\n
- A working Odoo instance with the Odoo Headless E-commerce<\/a> app installed. Its user guide<\/a> covers that step.<\/li>\n\n\n\n
- Dynamic home page<\/strong> \u2014 11 sections that appear or hide based on what Odoo returns.<\/li>\n\n\n\n