CybroAddons/special_product_snippet/views/product_snippet_templates.xml

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <!-- Listing Product Snippet templates-->
    <template id="s_special_snippets" name="Special Snippet">
        <section class="s_special_products_options">
            <div class="container">
                <t t-call="special_product_snippet.dynamic_1"/>
            </div>
        </section>
    </template>
    <template id="dynamic_1"
              name="special snippet" groups="base.group_user">
        <div class="product-page">
            <img t-att-src="image_url"
                 alt="Product Image"
                 class="product-image"/>
            <div class="product-details">
                <h1 class="product-name dis_nme">
                    <t t-esc="display_name"/>
                </h1>
                <p class="product-description">Description of the
                    product
                </p>
                <p class="product-price">Starting at
                    <t t-esc="list_price"/>
                </p>
                <a t-att-href="website_url" class="cta-button3">
                    View
                </a>
            </div>
        </div>
    </template>
    <template id="dynamic_2"
              name="special snippet" groups="base.group_user">
        <div class="product-page2"
             t-attf-style="background-image: url(#{image_url});">
            <div class="product-details2">
                <h1 class="product-name2 dis_nme">
                    <t t-esc="display_name"/>
                </h1>
                <p class="product-description2">Description of the
                    product
                </p>
                <p class="product-price2">Starting at
                    <t t-esc="list_price"/>
                </p>
                <a t-att-href="website_url" class="cta-button3">
                    View
                </a>
            </div>
        </div>
    </template>
    <template id="dynamic_3"
              name="special snippet" groups="base.group_user">
        <div class="product-page3 oe_structure">
            <div class="product-header3">
                <h1 class="product-name3 dis_nme">
                    <t t-esc="display_name"/>
                </h1>
            </div>
            <div class="product-details3">
                <img class="product-image3" t-att-src="image_url"
                     alt="Product Image"/>
                <div class="product-description3">
                    <p>Description of the product.</p>
                </div>
                <div class="product-price3">
                    <p>Starting at
                        <t t-esc="list_price"/>
                    </p>
                    <a t-att-href="website_url"
                       class="cta-button3">View
                    </a>
                </div>
            </div>
        </div>
    </template>
    <template id="dynamic_4"
              name="special snippet" groups="base.group_user">
        <div class="product-card4">
            <h2 class="product-name4"><t t-esc="display_name"/></h2>
            <img t-att-src="image_url" alt="Product Image"/>
            <div class="product-details4">
                <span class="product-price4"> <t t-esc="list_price"/></span>
                <a t-att-href="website_url" class="view-button4">View</a>
            </div>
        </div>
    </template>

    <template id="s_special_products_options"
              inherit_id="website.snippet_options">
        <xpath expr="." position="inside">
            <div data-js="SpecialProduct"
                 data-selector=".s_special_products_options">
                <we-row>
                    <we-many2one string="Product"
                                 data-model="product.template"
                                 data-no-preview="true"
                                 data-name=""
                                 data-select-data-attribute=""
                                 data-set-product-attribute=""
                                 data-attribute-name="scrollBackgroundRatio"
                    />
                </we-row>
                <we-select string="Template"
                           data-name="special_product_snippet"
                           data-attribute-name="SpecialProductTemplate"
                           data-attribute-default-value="default">
                    <we-button title="Default"
                               data-select-template="special_product_snippet.dynamic_1"
                               data-select-data-attribute="default"
                               data-img="/special_product_snippet/static/src/img/snippets_options/img_special_product_snippet.svg"

                    />
                    <we-button title="temp2"
                               data-select-template="special_product_snippet.dynamic_2"
                               data-select-data-attribute="Temp2"
                               data-img="/special_product_snippet/static/src/img/snippets_options/img_special_product_snippet.svg"
                    />
                    <we-button title="temp3"
                               data-select-template="special_product_snippet.dynamic_3"
                               data-select-data-attribute="Temp3"
                               data-img="/special_product_snippet/static/src/img/snippets_options/img_special_product_snippet.svg"
                    />
                    <we-button title="temp4"
                               data-select-template="special_product_snippet.dynamic_4"
                               data-select-data-attribute="Temp4"
                               data-img="/special_product_snippet/static/src/img/snippets_options/img_special_product_snippet.svg"
                    />
                </we-select>
            </div>
        </xpath>
    </template>
</odoo>