Hii,

Create the Snippet Template with Multiple Styles

<odoo>
   <template  id = "my_custom_snippet"  name = "My Snippet">
     <section  class = "s_my_snippet o_snippet"  data-snippet = "my_module.my_custom_snippet"  data-name = "My Snippet">
       <div  class = "my-snippet-content style-1">
         <h2 >Hello from My Snippet! </h2>
       </div>
     </section>
   </template>
 </odoo>

• Default is style-1 . We'll change it using JS.

Register the Snippet in website.snippets

 
<odoo>
   <template  id = "snippet_options"  inherit_id = "website.snippets"  name = "My Snippet in Snippets">
     <xpath  expr = "//div[@id='snippet_structure']"  position = "inside">
       <t  t-call = "website.snippet_template">
         <t t-set = "template"  t-value = "'my_module.my_custom_snippet'" />
         <t t-set = "name"  t-value = "'My Custom Snippet'" />
         <t t-set = "thumbnail"  t-value = "'/my_module/static/description/icon.png'" />
       </t>
     </xpath>
   </template>
 </odoo>

Create the JavaScript to Show the Style Selection Popup

/** @odoo -module **/

import { registry } from  "@web/core/registry" ;
 import { SnippetOptionDialog } from  "@website/js/editor/snippets/dialogs/snippet_option_dialog" ;

const snippetRegistry = registry. category ( "website.snippets" );

snippetRegistry. add ( "my_module.my_custom_snippet" , {
     async  onBuilt ( snippetEl ) {
         const { confirmed, payload } = await  SnippetOptionDialog . open ( "Choose Style" , [
            { label : "Style 1" , value : "style-1" },
            { label : "Style 2" , value : "style-2" },
        ]);
        if (confirmed) {
             const contentEl = snippetEl. querySelector ( ".my-snippet-content" );
            contentEl. classList . remove ( "style-1" , "style-2" );
            contentEl. classList . add ( payload . value );
        }
    },
});

This uses the modern @web module system introduced in Odoo 15+. Works in Odoo 16–18.

4. Add Assets to Manifest

# __manifest__.py

{
    ...
    "depends" : [ "website" ],
     "assets" : {
         "web.assets_frontend" : [
             "my_module/static/src/js/snippet_style_picker.js" ,
        ],
    },
    "data" : [
         "views/snippets.xml" ,
         "views/snippets_register.xml" ,
    ],
}

Optional: Add CSS for Each Style

/* static/src/css/snippet_styles.css */ 
.my-snippet-content .style-1 {
     background-color : lightblue;
}
.my-snippet-content .style-2 {
     background-color : lightgreen;
}

Include it in web.assets_frontend too.

i hope it is use full

Hi,

Refer the blog on how to add snippet choice in odoo 16

https://www.cybrosys.com/blog/how-to-add-snippet-choice-in-odoo-16

Hope it helps