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.first_dynamic_template"/>
            </div>
        </section>
    </template>
    <template id="first_dynamic_template"
              name="special snippet" groups="base.group_user">
        <div class="first-product-page">
            <img t-att-src="image_url"
                 alt="Product Image"
                 class="product-image"/>
            <div class="product-details">
                <h1 class="product-name display_name">
                    <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="third-cta-button">
                    View
                </a>
            </div>
        </div>
    </template>
    <template id="second_dynamic_template"
              name="special snippet" groups="base.group_user">
        <div class="second-product-page"
             t-attf-style="background-image: url(#{image_url});">
            <div class="second-product-details">
                <h1 class="second-product-name display_name">
                    <t t-esc="display_name"/>
                </h1>
                <p class="second-product-description">Description of the
                    product
                </p>
                <p class="second-product-price">Starting at
                    <t t-esc="list_price"/>
                </p>
                <a t-att-href="website_url" class="third-cta-button">
                    View
                </a>
            </div>
        </div>
    </template>
    <template id="third_dynamic_template"
              name="special snippet" groups="base.group_user">
        <div class="third-product-page oe_structure">
            <div class="third-product-header">
                <h1 class="third-product-name display_name">
                    <t t-esc="display_name"/>
                </h1>
            </div>
            <div class="third-product-details">
                <img class="third-product-image" t-att-src="image_url"
                     alt="Product Image"/>
                <div class="third-product-description">
                    <p>Description of the product.</p>
                </div>
                <div class="third-product-price">
                    <p>Starting at
                        <t t-esc="list_price"/>
                    </p>
                    <a t-att-href="website_url"
                       class="third-cta-button">View
                    </a>
                </div>
            </div>
        </div>
    </template>
    <template id="fourth_dynamic_template"
              name="special snippet" groups="base.group_user">
        <div class="product-card-page">
            <h2 class="product-name4">
                <t t-esc="display_name"/>
            </h2>
            <img t-att-src="image_url" alt="Product Image"/>
            <div class="fourth-product-details">
                <span class="fourth-product-price">
                    <t t-esc="list_price"/>
                </span>
                <a t-att-href="website_url" class="fourth-view-button">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.first_dynamic_template"
                               data-select-data-attribute="default"
                               data-img="/special_product_snippet/static/src/img/snippets_options/img_special_product_snippet.svg"

                    />
                    <we-button title="second-temp"
                               data-select-template="special_product_snippet.second_dynamic_template"
                               data-select-data-attribute="Second Temp"
                               data-img="/special_product_snippet/static/src/img/snippets_options/img_special_product_snippet.svg"
                    />
                    <we-button title="third-temp"
                               data-select-template="special_product_snippet.third_dynamic_template"
                               data-select-data-attribute="Third Temp"
                               data-img="/special_product_snippet/static/src/img/snippets_options/img_special_product_snippet.svg"
                    />
                    <we-button title="fourth-temp"
                               data-select-template="special_product_snippet.fourth_dynamic_template"
                               data-select-data-attribute="Fourth Temp"
                               data-img="/special_product_snippet/static/src/img/snippets_options/img_special_product_snippet.svg"
                    />
                </we-select>
            </div>
        </xpath>
    </template>
</odoo>