Theme Design

Figma-to-Odoo Design Workflow

Design Workflow Methodology

1. ANALYZE DESIGN → Extract colors, fonts, layout, components
2. COMPARE TO ODOO TEMPLATES → Match header, footer, page layouts
3. CHOOSE CLOSEST TEMPLATE → Select best matching built-in template
4. CONFIGURE VIA VARIABLES → Set $o-website-values-palettes
5. ENHANCE WITH CUSTOM CSS → Only what templates can't provide
6. CREATE CUSTOM SNIPPETS → Components not available in Odoo

Figma Extraction Pipeline

Using Figma MCP

1. Use Figma MCP with prompt:
   "Convert this Figma design to HTML for Odoo <version> website theme.
   Use Bootstrap v5.1.3 classes (not Tailwind).
   Apply proper Odoo theme structure with sections and containers."

2. Extract Color Palette:
   "Extract the color palette and map to o-color-1 through o-color-5."

3. Extract Typography:
   "Convert text styling to Bootstrap typography classes."

Using Chrome MCP (Browser Automation)

1. Navigate to Figma URL → Open Pages (not components!)
2. Click on page elements to extract:
   • Header/navbar → primary color
   • CTA buttons → secondary color
   • Section backgrounds → o-color-3
   • Body text → text color, font family
   • Headings (H1-H6) → heading fonts, sizes

Pages to check: Homepage, About/Services, Contact, Footer area

Color Mapping

Header Templates (11 Primary + Variants)

Header Alignment Variants

• ..._align_center / ..._align_right — Desktop alignment
• ..._mobile_align_center / ..._mobile_align_right — Mobile alignment

Header Visibility (mutually exclusive)

Header Components (combinable)

Header Decision Flowchart

Is navigation hidden? → YES → template_header_hamburger
                       → NO → Vertical sidebar? → YES → Full page? → sidebar / vertical
                                                 → NO → E-commerce? → YES → Categories? → sales_two / sales_one
                                                                    → NO → Search prominent? → template_header_search
                                                                                             → Boxed? → boxed / stretch / default

Footer Templates (9 Options)

Footer Decision Flowchart

Minimal (just copyright)? → YES → template_footer_minimalist
                          → NO → Center-aligned? → template_footer_centered
                                 Newsletter/CTA? → template_footer_call_to_action
                                 Contact info? → template_footer_contact
                                 Primarily links? → template_footer_links
                                 Detailed description? → template_footer_descriptive
                                 Default → footer_custom

Shop Page Templates (website_sale)

Layout Options

Categories & Filters

Product Detail Options

Blog Templates (website_blog)

Blog Listing

Blog Post Detail

Cart & Checkout

Generating Theme Configuration from Design

After analyzing the design and matching templates:

// primary_variables.scss — Generated from Design Analysis
$o-theme-font-configs: (
    'Poppins': (
        'family': ('Poppins', sans-serif),
        'url': 'Poppins:300,400,500,600,700',
    ),
);

$o-website-values-palettes: (
    (
        'color-palettes-name': 'default-1',
        'font': 'Poppins',
        'headings-font': 'Poppins',
        'header-template': 'hamburger',
        'header-links-style': 'pills',
        'logo-height': 48px,
        'footer-template': 'contact',
        'footer-scrolltop': true,
        'btn-padding-y': 0.75rem,
        'btn-border-radius': 8px,
        'link-underline': 'never',
    )
);

Then create theme.utils to activate the matched templates programmatically:

def _theme_yourtheme_post_copy(self, mod):
    self.enable_view('website.template_header_hamburger')
    self.enable_view('website.template_footer_contact')
    self.enable_view('website.option_header_brand_logo')
    self.disable_view('website.header_visibility_standard')
    self.enable_view('website.header_visibility_fixed')