diff --git a/addons/website/controllers/main.py b/addons/website/controllers/main.py
index 060c603ab1c..85e88859117 100644
--- a/addons/website/controllers/main.py
+++ b/addons/website/controllers/main.py
@@ -401,6 +401,7 @@ class Website(Home):
             t['rowPerSlide'] = attribs.get('data-row-per-slide')
             t['arrowPosition'] = attribs.get('data-arrow-position')
             t['extraClasses'] = attribs.get('data-extra-classes')
+            t['thumb'] = attribs.get('data-thumb')
         return templates
 
     @http.route('/website/get_current_currency', type='json', auth="public", website=True)
diff --git a/addons/website/static/src/snippets/s_dynamic_snippet/options.js b/addons/website/static/src/snippets/s_dynamic_snippet/options.js
index 0540aad9d4e..ce1de970375 100644
--- a/addons/website/static/src/snippets/s_dynamic_snippet/options.js
+++ b/addons/website/static/src/snippets/s_dynamic_snippet/options.js
@@ -175,7 +175,11 @@ const dynamicSnippetOptions = options.Class.extend({
         for (let id in data) {
             const button = document.createElement('we-button');
             button.dataset.selectDataAttribute = id;
-            button.innerHTML = data[id].name;
+            if (data[id].thumb) {
+                button.dataset.img = data[id].thumb;
+            } else {
+                button.innerText = data[id].name;
+            }
             selectUserValueWidgetElement.appendChild(button);
         }
     },
diff --git a/addons/website_sale/data/product_snippet_template_data.xml b/addons/website_sale/data/product_snippet_template_data.xml
index a975fb9d97e..72001c18b19 100644
--- a/addons/website_sale/data/product_snippet_template_data.xml
+++ b/addons/website_sale/data/product_snippet_template_data.xml
@@ -3,18 +3,18 @@
     <data>
         <!-- Templates for Dynamic Snippet -->
         <template id="dynamic_filter_template_product_product_add_to_cart" name="Classic Card">
-            <t t-foreach="records" t-as="data">
+            <t t-foreach="records" t-as="data" data-thumb="/website_sale/static/src/img/snippets_options/product_add_to_cart.svg">
                 <t t-set="record" t-value="data['_record']"/>
                 <div class="o_carousel_product_card card h-100 w-100" t-att-data-add2cart-rerender="data.get('_add2cart_rerender')">
                     <div t-if="is_sample" class="h5 o_ribbon_right bg-primary text-uppercase">Sample</div>
                     <input type="hidden" name="product-id" t-att-data-product-id="record.id"/>
-                    <a class="o_carousel_product_img_link" t-att-href="record.website_url">
-                        <img class="o_carousel_product_card_img_top card-img-top p-2" loading="lazy" t-att-src="data['image_512']"
+                    <a class="o_carousel_product_img_link o_dynamic_product_hovered overflow-hidden" t-att-href="record.website_url">
+                        <img class="card-img-top o_img_product_square o_img_product_cover h-auto" loading="lazy" t-att-src="data['image_512']"
                             t-att-alt="record.display_name"/>
                     </a>
                     <i t-if="data.get('_latest_viewed')" class="fa fa-trash o_carousel_product_remove js_remove"/>
-                    <div class="o_carousel_product_card_body card-body border-top">
-                        <a t-att-href="record.website_url" class="text-decoration-none">
+                    <div class="o_carousel_product_card_body card-body d-flex flex-wrap">
+                        <a t-att-href="record.website_url" class="text-decoration-none d-block w-100">
                             <div class="h6 card-title mb-0" t-field="record.display_name"/>
                         </a>
                         <div class="mt-2">
@@ -23,78 +23,78 @@
                                 <t t-set="rating_count" t-value="record.rating_count"/>
                             </t>
                         </div>
-                    </div>
-                    <div class="o_carousel_product_card_footer card-footer d-flex align-items-center">
-                        <div>
-                            <t t-call="website_sale.price_dynamic_filter_template_product_product"/>
+                        <div class="w-100 d-flex flex-wrap flex-md-column flex-lg-row align-items-center align-self-end justify-content-between mt-3">
+                            <div class="py-2">
+                                <t t-call="website_sale.price_dynamic_filter_template_product_product"/>
+                            </div>
+                            <div class="o_dynamic_snippet_btn_wrapper" t-if="record._website_show_quick_add()">
+                                <button type="button" role="button" class="btn btn-primary js_add_cart ms-auto" title="Add to Cart">
+                                    <i class="fa fa-fw fa-shopping-cart"/>
+                                </button>
+                            </div>
                         </div>
-                        <button t-if="record._website_show_quick_add()"
-                                type="button" role="button" class="btn btn-primary js_add_cart ms-auto" title="Add to Cart">
-                            <i class="fa fa-fw fa-shopping-cart"/>
-                        </button>
                     </div>
                 </div>
             </t>
         </template>
 
-        <template id="dynamic_filter_template_product_product_view_detail" name="Detailed Product">
-            <t t-foreach="records" t-as="data">
-                <t t-set="record" t-value="data['_record']"/>
-                <div class="o_carousel_product_card card h-100 w-100" t-att-data-url="record.website_url" t-att-data-add2cart-rerender="data.get('_add2cart_rerender')">
+        <template id="dynamic_filter_template_product_product_view_detail" name="Classic Card - Detailed">
+            <t t-foreach="records" t-as="data" data-number-of-elements="3" data-thumb="/website_sale/static/src/img/snippets_options/product_view_detail.svg">
+                <t t-set="record" t-value="data['_record']" data-arrow-position="bottom"/>
+                <div class="o_carousel_product_card card h-100 w-100" t-att-data-add2cart-rerender="data.get('_add2cart_rerender')">
                     <div t-if="is_sample" class="h5 o_ribbon_right bg-primary text-uppercase">Sample</div>
-                    <a class="o_carousel_product_img_link" t-att-href="record.website_url">
-                        <img class="card-img-top p-3" loading="lazy" t-att-src="data['image_512']" t-att-alt="record.display_name"/>
+                    <a class="o_carousel_product_img_link o_dynamic_product_hovered overflow-hidden" t-att-href="record.website_url">
+                        <img class="card-img-top o_img_product_square o_img_product_cover h-auto" loading="lazy" t-att-src="data['image_512']" t-att-alt="record.display_name"/>
                     </a>
                     <div class="o_carousel_product_card_body card-body d-flex flex-column justify-content-between">
                         <div class="card-title h5" t-field="record.display_name"/>
-                        <div class="card-text" t-field="record.description_sale"/>
+                        <div class="card-text text-muted h6" t-field="record.description_sale"/>
                         <div class="mt-2">
                             <t t-if="is_view_active('website_sale.product_comment')" t-call="portal_rating.rating_widget_stars_static">
                                 <t t-set="rating_avg" t-value="record.rating_avg"/>
                                 <t t-set="rating_count" t-value="record.rating_count"/>
                             </t>
                         </div>
-                    </div>
-                    <div class="o_carousel_product_card_footer card-footer d-flex align-items-center">
-                        <div>
-                            <t t-call="website_sale.price_dynamic_filter_template_product_product"/>
+                        <div class="d-flex justify-content-between flex-wrap flex-md-column flex-lg-row align-items-center align-self-end w-100 mt-2 pt-3 border-top">
+                            <div class="pb-2">
+                                <t t-call="website_sale.price_dynamic_filter_template_product_product"/>
+                            </div>
+                            <a class="btn btn-primary" t-att-href="record.website_url">
+                                View product
+                            </a>
                         </div>
-                        <a class="btn btn-primary ms-auto" t-att-href="record.website_url">
-                            <i class="fa fa-fw fa-search"/>
-                        </a>
                     </div>
                 </div>
             </t>
         </template>
 
         <template id="dynamic_filter_template_product_product_mini_image" name="Image only">
-            <t t-foreach="records" t-as="data" data-number-of-elements="4" data-number-of-elements-sm="1" data-number-of-elements-fetch="8">
+            <t t-foreach="records" t-as="data" data-number-of-elements="4" data-number-of-elements-sm="1" data-thumb="/website_sale/static/src/img/snippets_options/product_image_only.svg">
                 <t t-set="record" t-value="data['_record']"/>
-                <div class="card h-100" t-att-data-url="record.website_url">
+                <div class="card h-100 border-0 w-100 rounded-0 bg-transparent" t-att-data-url="record.website_url">
                     <div t-if="is_sample" class="h5 o_ribbon_right bg-primary text-uppercase">Sample</div>
-                    <a class="o_carousel_product_img_link" t-att-href="record.website_url">
-                        <img class="card-img-top p-3" loading="lazy" t-att-src="data['image_512']" t-att-alt="record.display_name"/>
+                    <a class="o_carousel_product_img_link o_dynamic_product_hovered overflow-hidden" t-att-href="record.website_url">
+                        <img class="card-img-top h-auto o_img_product_square o_img_product_cover rounded" loading="lazy" t-att-src="data['image_512']" t-att-alt="record.display_name"/>
                     </a>
                 </div>
             </t>
         </template>
 
         <template id="dynamic_filter_template_product_product_mini_price" name="Image with price">
-            <t t-foreach="records" t-as="data">
+            <t t-foreach="records" t-as="data" data-thumb="/website_sale/static/src/img/snippets_options/product_image_with_price.svg">
                 <t t-set="record" t-value="data['_record']"/>
-                <div class="card w-100 text-center o_dynamic_product_hovered p-3 border-0" t-att-data-url="record.website_url">
+                <div class="card h-100 border-0 w-100 rounded-0 bg-transparent o_dynamic_product_hovered" t-att-data-url="record.website_url">
                     <div t-if="is_sample" class="h5 o_ribbon_right bg-primary text-uppercase">Sample</div>
-                    <a class="o_carousel_product_img_link stretched-link" t-att-href="record.website_url">
-                        <img class="card-img-top" loading="lazy" t-att-src="data['image_512']" t-att-alt="record.display_name"/>
+                    <a class="o_carousel_product_img_link o_dynamic_product_hovered overflow-hidden" t-att-href="record.website_url">
+                        <img class="card-img-top h-auto o_img_product_square o_img_product_cover rounded" loading="lazy" t-att-src="data['image_512']" t-att-alt="record.display_name"/>
                     </a>
-                    <div class="o_carousel_product_card_body mt-2">
-                        <div class="h6">
-                            <t t-if="is_view_active('website_sale.product_comment')" t-call="portal_rating.rating_widget_stars_static">
-                                <t t-set="rating_avg" t-value="record.rating_avg"/>
-                                <t t-set="rating_count" t-value="record.rating_count"/>
-                            </t>
-                        </div>
-                        <div class="d-inline-block rounded-pill bg-primary px-3 py-2 mt-2 text-center h6">
+                    <div class="o_carousel_product_card_body mt-2 d-flex justify-content-between">
+                        <t t-if="is_view_active('website_sale.product_comment')" t-call="portal_rating.rating_widget_stars_static">
+                            <t t-set="rating_style_compressed" t-value="true"/>
+                            <t t-set="rating_avg" t-value="record.rating_avg"/>
+                            <t t-set="rating_count" t-value="record.rating_count"/>
+                        </t>
+                        <div class="ms-auto">
                             <t t-call="website_sale.price_dynamic_filter_template_product_product"/>
                         </div>
                     </div>
@@ -103,20 +103,26 @@
         </template>
 
         <template id="dynamic_filter_template_product_product_mini_name" name="Image with name">
-            <t t-foreach="records" t-as="data">
+            <t t-foreach="records" t-as="data" data-thumb="/website_sale/static/src/img/snippets_options/product_image_with_name.svg">
                 <t t-set="record" t-value="data['_record']"/>
-                <div class="card w-100 border-0 o_dynamic_product_hovered" t-att-data-url="record.website_url">
+                <div class="card h-100 border-0 w-100 rounded-0 bg-transparent o_dynamic_product_hovered" t-att-data-url="record.website_url">
                     <div t-if="is_sample" class="h5 o_ribbon_right bg-primary text-uppercase">Sample</div>
-                    <a class="o_carousel_product_img_link stretched-link" t-att-href="record.website_url">
-                        <img class="card-img-top p-3" loading="lazy" t-att-src="data['image_512']" t-att-alt="record.display_name"/>
+                    <a class="o_carousel_product_img_link overflow-hidden" t-att-href="record.website_url">
+                        <img class="card-img-top h-auto o_img_product_square o_img_product_cover rounded" loading="lazy" t-att-src="data['image_512']" t-att-alt="record.display_name"/>
                     </a>
                     <div class="h6 text-center mt-2 p-2" t-field="record.display_name"/>
+                    <div class="text-center">
+                        <t t-if="is_view_active('website_sale.product_comment')" t-call="portal_rating.rating_widget_stars_static">
+                            <t t-set="rating_avg" t-value="record.rating_avg"/>
+                            <t t-set="rating_count" t-value="record.rating_count"/>
+                        </t>
+                    </div>
                 </div>
             </t>
         </template>
 
         <template id="dynamic_filter_template_product_product_centered" name="Centered Product">
-            <t t-foreach="records" t-as="data">
+            <t t-foreach="records" t-as="data" data-arrow-position="bottom" data-thumb="/website_sale/static/src/img/snippets_options/product_centered.svg">
                 <t t-set="record" t-value="data['_record']"/>
                 <div class="o_carousel_product_card card w-100" t-att-data-add2cart-rerender="data.get('_add2cart_rerender')">
                     <div t-if="is_sample" class="h5 o_ribbon_right bg-primary text-uppercase">Sample</div>
@@ -150,19 +156,19 @@
         </template>
 
         <template id="dynamic_filter_template_product_product_borderless_1" name="Borderless Product n°1">
-            <t t-foreach="records" t-as="data">
+            <t t-foreach="records" t-as="data" data-thumb="/website_sale/static/src/img/snippets_options/product_borderless_1.svg">
                 <t t-set="record" t-value="data['_record']"/>
-                <div class="o_carousel_product_card w-100 card border-0 p-3">
+                <div class="o_carousel_product_card bg-transparent w-100 card border-0">
                     <div t-if="is_sample" class="h5 o_ribbon_right bg-primary text-uppercase">Sample</div>
                     <input type="hidden" name="product-id" t-att-data-product-id="record.id"/>
-                    <a class="o_carousel_product_img_link o_dynamic_product_hovered" t-att-href="record.website_url">
-                        <img class="o_carousel_product_card_img_top card-img-top" loading="lazy" t-att-src="data['image_512']"
+                    <a class="o_carousel_product_img_link o_dynamic_product_hovered stretched-link" t-att-href="record.website_url">
+                        <div class="overflow-hidden rounded">
+                            <img class="card-img-top o_img_product_square o_img_product_cover h-auto" loading="lazy" t-att-src="data['image_512']"
                             t-att-alt="record.display_name"/>
+                        </div>
                     </a>
-                    <div class="o_carousel_product_card_body d-flex flex-wrap flex-column justify-content-between h-100">
-                        <a t-att-href="record.website_url" class="o_carousel_product_img_link text-decoration-none">
-                            <div class="h6 card-title mt-4" t-field="record.display_name"/>
-                        </a>
+                    <div class="o_carousel_product_card_body d-flex flex-wrap flex-column justify-content-between h-100 p-3">
+                        <div class="h6 card-title" t-field="record.display_name"/>
                         <div>
                             <t t-if="is_view_active('website_sale.product_comment')" t-call="portal_rating.rating_widget_stars_static">
                                 <t t-set="rating_avg" t-value="record.rating_avg"/>
@@ -178,31 +184,36 @@
         </template>
 
         <template id="dynamic_filter_template_product_product_borderless_2" name="Borderless Product n°2">
-            <t t-foreach="records" t-as="data">
+            <t t-foreach="records" t-as="data" data-thumb="/website_sale/static/src/img/snippets_options/product_borderless_2.svg">
                 <t t-set="record" t-value="data['_record']"/>
-                <div class="o_carousel_product_card card w-100 border-0" t-att-data-add2cart-rerender="data.get('_add2cart_rerender')">
+                <div class="o_carousel_product_card card w-100 border-0 bg-transparent" t-att-data-add2cart-rerender="data.get('_add2cart_rerender')">
                     <div t-if="is_sample" class="h5 o_ribbon_right bg-primary text-uppercase">Sample</div>
                     <input type="hidden" name="product-id" t-att-data-product-id="record.id"/>
                     <a class="o_carousel_product_img_link o_dynamic_product_hovered" t-att-href="record.website_url">
-                        <img class="card-img-top p-3" loading="lazy" t-att-src="data['image_512']" t-att-alt="record.display_name"/>
+                        <div class="overflow-hidden rounded">
+                            <img class="card-img-top o_img_product_square o_img_product_cover h-auto" loading="lazy" t-att-src="data['image_512']"
+                            t-att-alt="record.display_name"/>
+                        </div>
                     </a>
-                    <div class="o_carousel_product_card_body px-3 mt-2 h-100 d-flex flex-column justify-content-between">
+                    <div class="o_carousel_product_card_body h-100 p-3 d-flex flex-column justify-content-between">
                         <div class="d-flex justify-content-between align-items-center flex-wrap mb-2">
                             <div class="h5 mb-0 me-4">
                                 <t t-call="website_sale.price_dynamic_filter_template_product_product"/>
                             </div>
-                            <t t-if="is_view_active('website_sale.product_comment')">
-                                <t t-call="portal_rating.rating_widget_stars_static">
-                                    <t t-set="rating_avg" t-value="record.rating_avg"/>
-                                    <t t-set="rating_count" t-value="record.rating_count"/>
+                            <div class="h6 mb-0">
+                                <t t-if="is_view_active('website_sale.product_comment')">
+                                    <t t-call="portal_rating.rating_widget_stars_static">
+                                        <t t-set="rating_style_compressed" t-value="true"/>
+                                        <t t-set="rating_avg" t-value="record.rating_avg"/>
+                                        <t t-set="rating_count" t-value="record.rating_count"/>
+                                    </t>
                                 </t>
-                            </t>
-                            <div class="card-title h6 w-100 mt-2" t-field="record.display_name"/>
+                            </div>
                         </div>
+                        <div class="card-title h6 w-100 mt-2 mb-3" t-field="record.display_name"/>
                         <div class="text-end o_dynamic_snippet_btn_wrapper" t-if="record._website_show_quick_add()">
-                            <button t-if="record._website_show_quick_add()"
-                                    type="button" role="button" class="btn btn-primary js_add_cart" title="Add to Cart">
-                                Add to Cart <i class="fa fa-fw fa-shopping-cart"/>
+                            <button type="button" role="button" class="btn btn-primary js_add_cart w-100" title="Add to Cart">
+                                Add to Cart
                             </button>
                         </div>
                     </div>
@@ -211,21 +222,23 @@
         </template>
 
         <template id="dynamic_filter_template_product_product_banner" name="Large Banner">
-            <t t-foreach="records" t-as="data" data-number-of-elements="1" data-number-of-elements-sm="1">
+            <t t-foreach="records" t-as="data" data-number-of-elements="1" data-number-of-elements-sm="1" data-thumb="/website_sale/static/src/img/snippets_options/product_banner.svg">
                 <t t-set="record" t-value="data['_record']"/>
-                <div class="o_carousel_product_card card w-100 p-3" t-att-data-add2cart-rerender="data.get('_add2cart_rerender')">
+                <div class="o_carousel_product_card card w-100" t-att-data-add2cart-rerender="data.get('_add2cart_rerender')">
                     <div t-if="is_sample" class="h5 o_ribbon_right bg-primary text-uppercase">Sample</div>
                     <input type="hidden" name="product-id" t-att-data-product-id="record.id"/>
                     <div class="row flex-row-reverse">
-                        <div class="col-lg-6 d-flex align-items-center">
-                            <img class="img img-fluid mx-auto rounded" loading="lazy" t-att-src="data['image_512']" t-att-alt="record.display_name"/>
+                        <div class="col-lg-6 d-flex align-items-center justify-content-center justify-content-lg-end o_wrap_product_img position-relative">
+                            <img class="img img-fluid position-absolute o_img_product_cover w-100 h-100" loading="lazy" t-att-src="data['image_512']" t-att-alt="record.display_name"/>
                         </div>
-                        <div class="col-lg-6">
-                            <div class="o_carousel_product_card_body p-5">
+                        <div class="col-lg-6 px-5 d-flex align-items-center">
+                            <div class="o_carousel_product_card_body card-body p-5">
                                 <div class="card-title h1" t-field="record.display_name"/>
                                 <div class="d-flex align-items-center my-4">
-                                    <div class="text-primary h4 mb-0 me-3">
-                                        <t t-call="website_sale.price_dynamic_filter_template_product_product"/>
+                                    <div class="h4 mb-0 me-3">
+                                        <span>
+                                            <t t-call="website_sale.price_dynamic_filter_template_product_product"/>
+                                        </span>
                                     </div>
                                     <t t-if="is_view_active('website_sale.product_comment')" t-call="portal_rating.rating_widget_stars_static">
                                         <t t-set="rating_avg" t-value="record.rating_avg"/>
@@ -234,13 +247,12 @@
                                 </div>
                                 <div class="card-text text-muted" t-field="record.description_sale"/>
                                 <div class="mt-4">
-                                    <a class="btn btn-outline-secondary me-1 mt-1" t-att-href="record.website_url">
+                                    <button t-if="record._website_show_quick_add()" type="button" role="button" class="btn btn-primary js_add_cart mt-1" title="Add to Cart">
+                                        Add to Cart
+                                    </button>
+                                    <a class="btn btn-link me-1 mt-1" t-att-href="record.website_url">
                                         View Product
                                     </a>
-                                    <button t-if="record._website_show_quick_add()"
-                                            type="button" role="button" class="btn btn-primary js_add_cart mt-1" title="Add to Cart">
-                                        Add to Cart <i class="fa fa-fw fa-shopping-cart"/>
-                                    </button>
                                 </div>
                             </div>
                         </div>
@@ -250,34 +262,41 @@
         </template>
 
         <template id="dynamic_filter_template_product_product_horizontal_card" name="Horizontal Card">
-            <t t-foreach="records" t-as="data" data-number-of-elements="3" data-number-of-elements-sm="1">
+            <t t-foreach="records" t-as="data"
+                data-number-of-elements="3"
+                data-number-of-elements-sm="1"
+                data-row-per-slide="2"
+                data-arrow-position="bottom"
+                data-extra-classes="o_carousel_multiple_rows"
+                data-thumb="/website_sale/static/src/img/snippets_options/product_horizontal_card.svg">
                 <t t-set="record" t-value="data['_record']"/>
                 <div class="o_carousel_product_card card w-100 border-0 bg-light p-3" t-att-data-add2cart-rerender="data.get('_add2cart_rerender')">
                     <div t-if="is_sample" class="h5 o_ribbon_right bg-primary text-uppercase">Sample</div>
                     <input type="hidden" name="product-id" t-att-data-product-id="record.id"/>
-                    <div class="row h-100">
+                    <div class="row h-100 p-0">
                         <div class="col-lg-4 position-static">
-                            <a class="stretched-link" t-att-href="record.website_url">
-                                <img class="img img-fluid mx-auto" loading="lazy" t-att-src="data['image_512']" t-att-alt="record.display_name"/>
+                            <a class="stretched-link o_dynamic_product_hovered" t-att-href="record.website_url">
+                                <img class="img img-fluid mx-auto o_img_product_square" loading="lazy" t-att-src="data['image_512']" t-att-alt="record.display_name"/>
                             </a>
                         </div>
-                        <div class="o_carousel_product_card_body col-lg-8 ps-3 d-flex flex-column justify-content-between">
+                        <div class="o_carousel_product_card_body col-lg-8 d-flex flex-column justify-content-between">
                             <div>
                                 <div class="card-title h6" t-field="record.display_name"/>
-                                <div class="mb-2">
+                            </div>
+                            <div>
+                                <div class="mb-1">
                                     <t t-if="is_view_active('website_sale.product_comment')" t-call="portal_rating.rating_widget_stars_static">
                                         <t t-set="rating_avg" t-value="record.rating_avg"/>
                                         <t t-set="rating_count" t-value="record.rating_count"/>
                                     </t>
                                 </div>
-                            </div>
-                            <div class="d-flex justify-content-between align-items-center flex-wrap">
-                                <t t-call="website_sale.price_dynamic_filter_template_product_product"/>
-                                <div class="o_dynamic_snippet_btn_wrapper">
-                                    <button t-if="record._website_show_quick_add()"
-                                            type="button" role="button" class="btn btn-primary js_add_cart" title="Add to Cart">
-                                        <i class="fa fa-fw fa-shopping-cart"/>
-                                    </button>
+                                <div class="d-flex align-items-center flex-wrap">
+                                    <t t-call="website_sale.price_dynamic_filter_template_product_product"/>
+                                    <div t-if="record._website_show_quick_add()" class="o_dynamic_snippet_btn_wrapper ms-auto">
+                                        <button type="button" role="button" class="btn btn-primary js_add_cart" title="Add to Cart">
+                                            <i class="fa fa-fw fa-shopping-cart"/>
+                                        </button>
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -285,7 +304,86 @@
                 </div>
             </t>
         </template>
+        <template id="dynamic_filter_template_product_product_horizontal_card_2" name="Horizontal Card width covered image">
+            <t t-foreach="records" t-as="data"
+                data-row-per-slide="2"
+                data-arrow-position="bottom"
+                data-number-of-elements="2"
+                data-number-of-elements-sm="1"
+                data-extra-classes="o_carousel_multiple_rows"
+                data-thumb="/website_sale/static/src/img/snippets_options/product_horizontal_card_2.svg">
+                <t t-set="record" t-value="data['_record']"/>
+                <div class="o_carousel_product_card card w-100 border-0 o_dynamic_product_hovered o_cc o_cc5">
+                    <div t-if="is_sample" class="h5 o_ribbon_right bg-primary text-uppercase">Sample</div>
+                    <input type="hidden" name="product-id" t-att-data-product-id="record.id"/>
+                    <a class="stretched-link" t-att-href="record.website_url">
+                        <img class="img img-fluid position-absolute w-100 h-100 o_img_product_cover" loading="lazy" t-att-src="data['image_512']" t-att-alt="record.display_name"/>
+                    </a>
+                    <div class="o_carousel_product_card_body d-flex flex-column justify-content-between h-100 bg-black-50 p-3 position-relative">
+                        <div class="mb-3">
+                            <div class="card-title h5" t-field="record.display_name"/>
+                            <t t-if="is_view_active('website_sale.product_comment')" t-call="portal_rating.rating_widget_stars_static">
+                                    <t t-set="rating_avg" t-value="record.rating_avg"/>
+                                    <t t-set="rating_count" t-value="record.rating_count"/>
+                                </t>
+                        </div>
+                        <div class="card-text h6" t-field="record.description_sale"/>
+                        <div class="d-flex justify-content-between align-items-center flex-wrap mt-3">
+                            <div class="h5 mb-0 me-2">
+                                <t t-call="website_sale.price_dynamic_filter_template_product_product"/>
+                            </div>
+                            <div t-if="record._website_show_quick_add()" class="o_dynamic_snippet_btn_wrapper">
+                                <button type="button" role="button" class="btn btn-primary js_add_cart" title="Add to Cart">
+                                    Add to Cart
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </t>
+        </template>
 
+        <template id="dynamic_filter_template_product_product_card_group" name="Card group">
+            <t t-foreach="records" t-as="data"
+                data-row-per-slide="2"
+                data-number-of-elements="2"
+                data-number-of-elements-sm="1"
+                data-arrow-position="bottom"
+                data-extra-classes="o_card_group rounded"
+                data-thumb="/website_sale/static/src/img/snippets_options/product_card_group.svg">
+                <t t-set="record" t-value="data['_record']"/>
+                <div class="o_carousel_product_card card w-100 rounded-0 border-top-0 border-start-0" t-att-data-url="record.website_url">
+                    <div t-if="is_sample" class="h5 o_ribbon_right bg-primary text-uppercase">Sample</div>
+                    <input type="hidden" name="product-id" t-att-data-product-id="record.id"/>
+                    <div class="o_carousel_product_card_body card-body justify-content-between h-100 p-3">
+                        <div class="row">
+                            <div class="col-8 d-flex flex-wrap">
+                                <div class="mb-3">
+                                    <div class="card-title h5" t-field="record.display_name"/>
+                                </div>
+                                <div class="card-text h6 text-muted" t-field="record.description_sale"/>
+                                <div class="d-flex justify-content-between align-items-center align-self-end flex-wrap mt-4 w-100">
+                                    <div class="h5 text-primary mb-0 me-2">
+                                        <t t-call="website_sale.price_dynamic_filter_template_product_product"/>
+                                    </div>
+                                    <t t-if="is_view_active('website_sale.product_comment')" t-call="portal_rating.rating_widget_stars_static">
+                                        <t t-set="rating_avg" t-value="record.rating_avg"/>
+                                        <t t-set="rating_count" t-value="record.rating_count"/>
+                                    </t>
+                                </div>
+                            </div>
+                            <div class="col-4 position-static">
+                                <div class="overflow-hidden position-static">
+                                    <a class="stretched-link o_dynamic_product_hovered" t-att-href="record.website_url">
+                                        <img class="img img-fluid o_img_product_square o_img_product_cover h-auto" loading="lazy" t-att-src="data['image_512']" t-att-alt="record.display_name"/>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </t>
+        </template>
         <template id="price_dynamic_filter_template_product_product" name="Dynamic Product Filter Price">
             <t t-set="record_price" t-value="record._get_contextual_price_tax_selection()"/>
             <t t-if="not website.prevent_zero_price_sale or record_price">
diff --git a/addons/website_sale/static/src/img/snippets_options/product_add_to_cart.svg b/addons/website_sale/static/src/img/snippets_options/product_add_to_cart.svg
new file mode 100644
index 00000000000..a3765e03024
--- /dev/null
+++ b/addons/website_sale/static/src/img/snippets_options/product_add_to_cart.svg
@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="70" viewBox="0 0 240 70">
+    <defs>
+        <g id="product_add_to_cart_shirt">
+            <path d="M12.9.4H5.417L.4,6.928l2.86,3.683h1.7V22.9h15.86V10.611h1.726L25.4,6.928,20.383.4Z" fill="#e89849"/>
+            <path d="M4.954,10.612h-1.7L.4,6.928,5.417.4H20.383L25.4,6.928l-2.86,3.684H20.814" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M20.814,8.526V22.9H4.954V5.437" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M16.718,1.648a4.032,4.032,0,0,1-7.283.839" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line x1="2.465" transform="translate(18.349 18.115)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line x1="6.068" transform="translate(14.746 19.742)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="product_add_to_cart_watch">
+            <rect width="4.743" height="7.122" x="3.4" y="15.7" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <rect width="4.743" height="7.122" x="3.4" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M11.124,11.642A5.361,5.361,0,1,1,5.762,6.28,5.362,5.362,0,0,1,11.124,11.642Z" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line y1="3.183" transform="translate(5.762 8.459)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line y1="1.313" x2="1.961" transform="translate(5.762 10.329)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="product_add_to_cart_pants">
+            <path d="M13.848,22.9H8.884L7.123,7.094,5.361,22.9H.4V.4H13.848Z" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M2.231,4.648h2.46V8.157L2.566,9.215.4,8.077" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M13.81,4.648H9.52V8.157l2.125,1.058" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="product_add_to_cart_item">
+            <rect width="48" height="60" fill="#ffffff"/>
+            <rect x="5" y="43" width="27" height="2" fill="#222222"/>
+            <rect x="36" y="47" width="7" height="7" rx="2" fill="#3aadaa"/>
+            <rect x="11" y="50" width="15" height="2" fill="#595959"/>
+            <path d="M1.116-11.744H.5a1.827,1.827,0,0,0,.486,1.192,1.818,1.818,0,0,0,1.152.5v.594h.4v-.594a2.2,2.2,0,0,0,.638-.145,1.559,1.559,0,0,0,.5-.315A1.432,1.432,0,0,0,4-10.983a1.57,1.57,0,0,0,.12-.63A1.207,1.207,0,0,0,4-12.186a1.393,1.393,0,0,0-.308-.4,1.571,1.571,0,0,0-.377-.25,1.975,1.975,0,0,0-.341-.127l-.435-.116V-14.86a.964.964,0,0,1,.812.841h.616a2.074,2.074,0,0,0-.493-1,1.5,1.5,0,0,0-.935-.435v-.486h-.4v.478a1.794,1.794,0,0,0-.583.138,1.48,1.48,0,0,0-.471.315,1.48,1.48,0,0,0-.315.471,1.508,1.508,0,0,0-.116.6,1.508,1.508,0,0,0,.087.544.929.929,0,0,0,.272.38,1.7,1.7,0,0,0,.464.268,4.95,4.95,0,0,0,.663.207v1.92a1.3,1.3,0,0,1-.721-.355A1.079,1.079,0,0,1,1.116-11.744Zm1.42,1.123V-12.44q.2.058.37.127a1.1,1.1,0,0,1,.3.17.762.762,0,0,1,.2.243.765.765,0,0,1,.072.351,1.07,1.07,0,0,1-.069.4.742.742,0,0,1-.2.283.861.861,0,0,1-.3.17A1.483,1.483,0,0,1,2.536-10.621Zm-.4-4.261v1.7A2.683,2.683,0,0,1,1.8-13.3a1.123,1.123,0,0,1-.265-.156.613.613,0,0,1-.174-.225.768.768,0,0,1-.062-.322.791.791,0,0,1,.243-.627A1.031,1.031,0,0,1,2.138-14.882Z" transform="translate(4.5 63)" fill="#595959"/>
+            <rect width="48" height="37" fill="#9ccde4"/>
+        </g>
+    </defs> 
+    <use href="#product_add_to_cart_item" y="5" x="5"/>
+    <use href="#product_add_to_cart_shirt" y="11" x="15"/>
+    <use href="#product_add_to_cart_item" y="5" x="66"/>
+    <use href="#product_add_to_cart_pants" y="11" x="83"/>
+    <use href="#product_add_to_cart_item" y="5" x="126"/>
+    <use href="#product_add_to_cart_shirt" y="11" x="137"/>
+    <use href="#product_add_to_cart_item" y="5" x="187"/>
+    <use href="#product_add_to_cart_watch" y="11" x="205"/>
+</svg>
diff --git a/addons/website_sale/static/src/img/snippets_options/product_banner.svg b/addons/website_sale/static/src/img/snippets_options/product_banner.svg
new file mode 100644
index 00000000000..2f6a26d4e14
--- /dev/null
+++ b/addons/website_sale/static/src/img/snippets_options/product_banner.svg
@@ -0,0 +1,43 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="70" viewBox="0 0 240 70">
+    <defs>
+        <g id="product_banner_shirt">
+            <path d="M12.9.4H5.417L.4,6.928l2.86,3.683h1.7V22.9h15.86V10.611h1.726L25.4,6.928,20.383.4Z" fill="#e89849"/>
+            <path d="M4.954,10.612h-1.7L.4,6.928,5.417.4H20.383L25.4,6.928l-2.86,3.684H20.814" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M20.814,8.526V22.9H4.954V5.437" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M16.718,1.648a4.032,4.032,0,0,1-7.283.839" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line x1="2.465" transform="translate(18.349 18.115)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line x1="6.068" transform="translate(14.746 19.742)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="product_banner_watch">
+            <rect width="4.743" height="7.122" x="3.4" y="15.7" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <rect width="4.743" height="7.122" x="3.4" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M11.124,11.642A5.361,5.361,0,1,1,5.762,6.28,5.362,5.362,0,0,1,11.124,11.642Z" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line y1="3.183" transform="translate(5.762 8.459)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line y1="1.313" x2="1.961" transform="translate(5.762 10.329)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="product_banner_pants">
+            <path d="M13.848,22.9H8.884L7.123,7.094,5.361,22.9H.4V.4H13.848Z" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M2.231,4.648h2.46V8.157L2.566,9.215.4,8.077" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M13.81,4.648H9.52V8.157l2.125,1.058" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="product_banner_item">
+            <rect width="230" height="60" fill="#fff"/>
+            <rect width="115" height="60" x="115" fill="#9ccde4"/>
+            <rect width="67" height="2" x="10" y="6" fill="#222"/>
+            <rect width="31" height="8" rx="4" x="10" y="16" fill="#3aadaa"/>
+            <rect width="15" height="2" x="21" y="19" fill="#fff"/>
+            <path d="M1.116-11.744H.5a1.827,1.827,0,0,0,.486,1.192,1.818,1.818,0,0,0,1.152.5v.594h.4v-.594a2.2,2.2,0,0,0,.638-.145,1.559,1.559,0,0,0,.5-.315A1.432,1.432,0,0,0,4-10.983a1.57,1.57,0,0,0,.12-.63A1.207,1.207,0,0,0,4-12.186a1.393,1.393,0,0,0-.308-.4,1.571,1.571,0,0,0-.377-.25,1.975,1.975,0,0,0-.341-.127l-.435-.116V-14.86a.964.964,0,0,1,.812.841h.616a2.074,2.074,0,0,0-.493-1,1.5,1.5,0,0,0-.935-.435v-.486h-.4v.478a1.794,1.794,0,0,0-.583.138,1.48,1.48,0,0,0-.471.315,1.48,1.48,0,0,0-.315.471,1.508,1.508,0,0,0-.116.6,1.508,1.508,0,0,0,.087.544.929.929,0,0,0,.272.38,1.7,1.7,0,0,0,.464.268,4.95,4.95,0,0,0,.663.207v1.92a1.3,1.3,0,0,1-.721-.355A1.079,1.079,0,0,1,1.116-11.744Zm1.42,1.123V-12.44q.2.058.37.127a1.1,1.1,0,0,1,.3.17.762.762,0,0,1,.2.243.765.765,0,0,1,.072.351,1.07,1.07,0,0,1-.069.4.742.742,0,0,1-.2.283.861.861,0,0,1-.3.17A1.483,1.483,0,0,1,2.536-10.621Zm-.4-4.261v1.7A2.683,2.683,0,0,1,1.8-13.3a1.123,1.123,0,0,1-.265-.156.613.613,0,0,1-.174-.225.768.768,0,0,1-.062-.322.791.791,0,0,1,.243-.627A1.031,1.031,0,0,1,2.138-14.882Z" transform="translate(13 33)" fill="#fff"/>
+            <rect width="75" height="1" x="10" y="32" fill="#666"/>
+            <rect width="66" height="1" x="10" y="38" fill="#666"/>
+            <rect width="62" height="1" x="10" y="35" fill="#666"/>
+            <rect width="46" height="1" x="10" y="41" fill="#666"/>
+            <rect width="28" height="7" x="10" y="48" rx="2" fill="#3aadaa"/>
+            <rect width="12" height="1" x="18" y="51" fill="#fff"/>
+            <rect width="12" height="1" x="47" y="51" fill="#3aadaa"/>
+            <use href="#product_banner_shirt" y="18" x="132"/>
+            <use href="#product_banner_watch" y="18" x="170"/>
+            <use href="#product_banner_pants" y="18" x="195"/>
+        </g>
+    </defs> 
+    <use href="#product_banner_item" y="5" x="5"/>
+</svg>
diff --git a/addons/website_sale/static/src/img/snippets_options/product_borderless_1.svg b/addons/website_sale/static/src/img/snippets_options/product_borderless_1.svg
new file mode 100644
index 00000000000..a23ec298932
--- /dev/null
+++ b/addons/website_sale/static/src/img/snippets_options/product_borderless_1.svg
@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="70" viewBox="0 0 240 70">
+    <defs>
+        <g id="product_borderless_1_shirt">
+            <path d="M12.9.4H5.417L.4,6.928l2.86,3.683h1.7V22.9h15.86V10.611h1.726L25.4,6.928,20.383.4Z" fill="#e89849"/>
+            <path d="M4.954,10.612h-1.7L.4,6.928,5.417.4H20.383L25.4,6.928l-2.86,3.684H20.814" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M20.814,8.526V22.9H4.954V5.437" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M16.718,1.648a4.032,4.032,0,0,1-7.283.839" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line x1="2.465" transform="translate(18.349 18.115)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line x1="6.068" transform="translate(14.746 19.742)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="product_borderless_1_watch">
+            <rect width="4.743" height="7.122" x="3.4" y="15.7" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <rect width="4.743" height="7.122" x="3.4" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M11.124,11.642A5.361,5.361,0,1,1,5.762,6.28,5.362,5.362,0,0,1,11.124,11.642Z" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line y1="3.183" transform="translate(5.762 8.459)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line y1="1.313" x2="1.961" transform="translate(5.762 10.329)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="product_borderless_1_pants">
+            <path d="M13.848,22.9H8.884L7.123,7.094,5.361,22.9H.4V.4H13.848Z" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M2.231,4.648h2.46V8.157L2.566,9.215.4,8.077" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M13.81,4.648H9.52V8.157l2.125,1.058" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="product_borderless_1_item">
+            <rect width="48" height="44" fill="#9ccde4"/>
+            <rect width="42" height="2" transform="translate(3 49.514)" fill="#c7c7c7"/>
+            <rect width="15" height="2" transform="translate(9.024 56.117)" fill="#fff"/>
+            <path d="M1.116-11.744H.5a1.827,1.827,0,0,0,.486,1.192,1.818,1.818,0,0,0,1.152.5v.594h.4v-.594a2.2,2.2,0,0,0,.638-.145,1.559,1.559,0,0,0,.5-.315A1.432,1.432,0,0,0,4-10.983a1.57,1.57,0,0,0,.12-.63A1.207,1.207,0,0,0,4-12.186a1.393,1.393,0,0,0-.308-.4,1.571,1.571,0,0,0-.377-.25,1.975,1.975,0,0,0-.341-.127l-.435-.116V-14.86a.964.964,0,0,1,.812.841h.616a2.074,2.074,0,0,0-.493-1,1.5,1.5,0,0,0-.935-.435v-.486h-.4v.478a1.794,1.794,0,0,0-.583.138,1.48,1.48,0,0,0-.471.315,1.48,1.48,0,0,0-.315.471,1.508,1.508,0,0,0-.116.6,1.508,1.508,0,0,0,.087.544.929.929,0,0,0,.272.38,1.7,1.7,0,0,0,.464.268,4.95,4.95,0,0,0,.663.207v1.92a1.3,1.3,0,0,1-.721-.355A1.079,1.079,0,0,1,1.116-11.744Zm1.42,1.123V-12.44q.2.058.37.127a1.1,1.1,0,0,1,.3.17.762.762,0,0,1,.2.243.765.765,0,0,1,.072.351,1.07,1.07,0,0,1-.069.4.742.742,0,0,1-.2.283.861.861,0,0,1-.3.17A1.483,1.483,0,0,1,2.536-10.621Zm-.4-4.261v1.7A2.683,2.683,0,0,1,1.8-13.3a1.123,1.123,0,0,1-.265-.156.613.613,0,0,1-.174-.225.768.768,0,0,1-.062-.322.791.791,0,0,1,.243-.627A1.031,1.031,0,0,1,2.138-14.882Z" transform="translate(3 70)" fill="#fff"/>
+        </g>
+    </defs> 
+    <use href="#product_borderless_1_item" y="5" x="5"/>
+    <use href="#product_borderless_1_shirt" y="15" x="15"/>
+    <use href="#product_borderless_1_item" y="5" x="66"/>
+    <use href="#product_borderless_1_pants" y="15" x="83"/>
+    <use href="#product_borderless_1_item" y="5" x="126"/>
+    <use href="#product_borderless_1_shirt" y="15" x="137"/>
+    <use href="#product_borderless_1_item" y="5" x="187"/>
+    <use href="#product_borderless_1_watch" y="15" x="205"/>
+</svg>
diff --git a/addons/website_sale/static/src/img/snippets_options/product_borderless_2.svg b/addons/website_sale/static/src/img/snippets_options/product_borderless_2.svg
new file mode 100644
index 00000000000..ac37ca0e541
--- /dev/null
+++ b/addons/website_sale/static/src/img/snippets_options/product_borderless_2.svg
@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="70" viewBox="0 0 240 70">
+    <defs>
+        <g id="product_borderless_2_shirt">
+            <path d="M12.9.4H5.417L.4,6.928l2.86,3.683h1.7V22.9h15.86V10.611h1.726L25.4,6.928,20.383.4Z" fill="#e89849"/>
+            <path d="M4.954,10.612h-1.7L.4,6.928,5.417.4H20.383L25.4,6.928l-2.86,3.684H20.814" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M20.814,8.526V22.9H4.954V5.437" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M16.718,1.648a4.032,4.032,0,0,1-7.283.839" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line x1="2.465" transform="translate(18.349 18.115)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line x1="6.068" transform="translate(14.746 19.742)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="product_borderless_2_watch">
+            <rect width="4.743" height="7.122" x="3.4" y="15.7" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <rect width="4.743" height="7.122" x="3.4" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M11.124,11.642A5.361,5.361,0,1,1,5.762,6.28,5.362,5.362,0,0,1,11.124,11.642Z" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line y1="3.183" transform="translate(5.762 8.459)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line y1="1.313" x2="1.961" transform="translate(5.762 10.329)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="product_borderless_2_pants">
+            <path d="M13.848,22.9H8.884L7.123,7.094,5.361,22.9H.4V.4H13.848Z" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M2.231,4.648h2.46V8.157L2.566,9.215.4,8.077" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M13.81,4.648H9.52V8.157l2.125,1.058" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="product_borderless_2_item">
+            <rect width="48" height="37" fill="#9ccde4"/>
+            <rect width="42" height="2" x="3" y="47" fill="#c7c7c7"/>
+            <rect width="42" height="7" rx="2" x="3" y="53" fill="#3aadaa"/>
+            <rect width="16" height="1" x="16" y="56" fill="#ffffff"/>
+            <rect width="15" height="2" x="9" y="42" fill="#ffffff"/>
+            <path d="M1.116-11.744H.5a1.827,1.827,0,0,0,.486,1.192,1.818,1.818,0,0,0,1.152.5v.594h.4v-.594a2.2,2.2,0,0,0,.638-.145,1.559,1.559,0,0,0,.5-.315A1.432,1.432,0,0,0,4-10.983a1.57,1.57,0,0,0,.12-.63A1.207,1.207,0,0,0,4-12.186a1.393,1.393,0,0,0-.308-.4,1.571,1.571,0,0,0-.377-.25,1.975,1.975,0,0,0-.341-.127l-.435-.116V-14.86a.964.964,0,0,1,.812.841h.616a2.074,2.074,0,0,0-.493-1,1.5,1.5,0,0,0-.935-.435v-.486h-.4v.478a1.794,1.794,0,0,0-.583.138,1.48,1.48,0,0,0-.471.315,1.48,1.48,0,0,0-.315.471,1.508,1.508,0,0,0-.116.6,1.508,1.508,0,0,0,.087.544.929.929,0,0,0,.272.38,1.7,1.7,0,0,0,.464.268,4.95,4.95,0,0,0,.663.207v1.92a1.3,1.3,0,0,1-.721-.355A1.079,1.079,0,0,1,1.116-11.744Zm1.42,1.123V-12.44q.2.058.37.127a1.1,1.1,0,0,1,.3.17.762.762,0,0,1,.2.243.765.765,0,0,1,.072.351,1.07,1.07,0,0,1-.069.4.742.742,0,0,1-.2.283.861.861,0,0,1-.3.17A1.483,1.483,0,0,1,2.536-10.621Zm-.4-4.261v1.7A2.683,2.683,0,0,1,1.8-13.3a1.123,1.123,0,0,1-.265-.156.613.613,0,0,1-.174-.225.768.768,0,0,1-.062-.322.791.791,0,0,1,.243-.627A1.031,1.031,0,0,1,2.138-14.882Z" transform="translate(3 56)" fill="#ffffff"/>
+        </g>
+    </defs> 
+    <use href="#product_borderless_2_item" y="5" x="5"/>
+    <use href="#product_borderless_2_shirt" y="12" x="15"/>
+    <use href="#product_borderless_2_item" y="5" x="66"/>
+    <use href="#product_borderless_2_pants" y="12" x="83"/>
+    <use href="#product_borderless_2_item" y="5" x="126"/>
+    <use href="#product_borderless_2_shirt" y="12" x="137"/>
+    <use href="#product_borderless_2_item" y="5" x="187"/>
+    <use href="#product_borderless_2_watch" y="12" x="205"/>
+</svg>
diff --git a/addons/website_sale/static/src/img/snippets_options/product_card_group.svg b/addons/website_sale/static/src/img/snippets_options/product_card_group.svg
new file mode 100644
index 00000000000..2690ab5a211
--- /dev/null
+++ b/addons/website_sale/static/src/img/snippets_options/product_card_group.svg
@@ -0,0 +1,41 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="70" viewBox="0 0 240 70">
+    <defs>
+        <g id="product_card_group_shirt" transform="scale(.5)">
+            <path d="M12.9.4H5.417L.4,6.928l2.86,3.683h1.7V22.9h15.86V10.611h1.726L25.4,6.928,20.383.4Z" fill="#e89849"/>
+            <path d="M4.954,10.612h-1.7L.4,6.928,5.417.4H20.383L25.4,6.928l-2.86,3.684H20.814" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M20.814,8.526V22.9H4.954V5.437" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M16.718,1.648a4.032,4.032,0,0,1-7.283.839" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line x1="2.465" transform="translate(18.349 18.115)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line x1="6.068" transform="translate(14.746 19.742)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="product_card_group_watch" transform="scale(.5)">
+            <rect width="4.743" height="7.122" x="3.4" y="15.7" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <rect width="4.743" height="7.122" x="3.4" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M11.124,11.642A5.361,5.361,0,1,1,5.762,6.28,5.362,5.362,0,0,1,11.124,11.642Z" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line y1="3.183" transform="translate(5.762 8.459)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line y1="1.313" x2="1.961" transform="translate(5.762 10.329)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="product_card_group_pants" transform="scale(.5)">
+            <path d="M13.848,22.9H8.884L7.123,7.094,5.361,22.9H.4V.4H13.848Z" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M2.231,4.648h2.46V8.157L2.566,9.215.4,8.077" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M13.81,4.648H9.52V8.157l2.125,1.058" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="product_card_group_item">
+            <rect width="115" height="30" fill="#fff" stroke="#c7c7c7" stroke-width="1"/>
+            <rect width="20" height="20" fill="#9ccde4" x="90" y="5"/>
+            <rect width="67" height="2" x="5" y="7" fill="#222"/>
+            <rect width="52" height="1" x="5" y="12" fill="#666"/>
+            <rect width="37" height="1" x="5" y="15" fill="#666"/>
+            <rect width="15" height="2" x="11" y="21" fill="#3aadaa"/>
+            <path d="M1.116-11.744H.5a1.827,1.827,0,0,0,.486,1.192,1.818,1.818,0,0,0,1.152.5v.594h.4v-.594a2.2,2.2,0,0,0,.638-.145,1.559,1.559,0,0,0,.5-.315A1.432,1.432,0,0,0,4-10.983a1.57,1.57,0,0,0,.12-.63A1.207,1.207,0,0,0,4-12.186a1.393,1.393,0,0,0-.308-.4,1.571,1.571,0,0,0-.377-.25,1.975,1.975,0,0,0-.341-.127l-.435-.116V-14.86a.964.964,0,0,1,.812.841h.616a2.074,2.074,0,0,0-.493-1,1.5,1.5,0,0,0-.935-.435v-.486h-.4v.478a1.794,1.794,0,0,0-.583.138,1.48,1.48,0,0,0-.471.315,1.48,1.48,0,0,0-.315.471,1.508,1.508,0,0,0-.116.6,1.508,1.508,0,0,0,.087.544.929.929,0,0,0,.272.38,1.7,1.7,0,0,0,.464.268,4.95,4.95,0,0,0,.663.207v1.92a1.3,1.3,0,0,1-.721-.355A1.079,1.079,0,0,1,1.116-11.744Zm1.42,1.123V-12.44q.2.058.37.127a1.1,1.1,0,0,1,.3.17.762.762,0,0,1,.2.243.765.765,0,0,1,.072.351,1.07,1.07,0,0,1-.069.4.742.742,0,0,1-.2.283.861.861,0,0,1-.3.17A1.483,1.483,0,0,1,2.536-10.621Zm-.4-4.261v1.7A2.683,2.683,0,0,1,1.8-13.3a1.123,1.123,0,0,1-.265-.156.613.613,0,0,1-.174-.225.768.768,0,0,1-.062-.322.791.791,0,0,1,.243-.627A1.031,1.031,0,0,1,2.138-14.882Z" transform="translate(4 35)" fill="#3aadaa"/>
+        </g>
+    </defs> 
+    <use href="#product_card_group_item" y="5" x="5"/>
+    <use href="#product_card_group_shirt" y="14" x="99"/>
+    <use href="#product_card_group_item" y="5" x="120"/>
+    <use href="#product_card_group_watch" y="14" x="217"/>
+    <use href="#product_card_group_item" y="35" x="5"/>
+    <use href="#product_card_group_pants" y="44" x="102"/>
+    <use href="#product_card_group_item" y="35" x="120"/>
+    <use href="#product_card_group_shirt" y="44" x="214"/>
+</svg>
diff --git a/addons/website_sale/static/src/img/snippets_options/product_centered.svg b/addons/website_sale/static/src/img/snippets_options/product_centered.svg
new file mode 100644
index 00000000000..63c512b46b1
--- /dev/null
+++ b/addons/website_sale/static/src/img/snippets_options/product_centered.svg
@@ -0,0 +1,41 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="70" viewBox="0 0 240 70">
+    <defs>
+        <g id="product_centered_shirt">
+            <path d="M12.9.4H5.417L.4,6.928l2.86,3.683h1.7V22.9h15.86V10.611h1.726L25.4,6.928,20.383.4Z" fill="#e89849"/>
+            <path d="M4.954,10.612h-1.7L.4,6.928,5.417.4H20.383L25.4,6.928l-2.86,3.684H20.814" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M20.814,8.526V22.9H4.954V5.437" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M16.718,1.648a4.032,4.032,0,0,1-7.283.839" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line x1="2.465" transform="translate(18.349 18.115)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line x1="6.068" transform="translate(14.746 19.742)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="product_centered_watch">
+            <rect width="4.743" height="7.122" x="3.4" y="15.7" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <rect width="4.743" height="7.122" x="3.4" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M11.124,11.642A5.361,5.361,0,1,1,5.762,6.28,5.362,5.362,0,0,1,11.124,11.642Z" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line y1="3.183" transform="translate(5.762 8.459)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line y1="1.313" x2="1.961" transform="translate(5.762 10.329)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="product_centered_pants">
+            <path d="M13.848,22.9H8.884L7.123,7.094,5.361,22.9H.4V.4H13.848Z" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M2.231,4.648h2.46V8.157L2.566,9.215.4,8.077" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M13.81,4.648H9.52V8.157l2.125,1.058" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="product_centered_item">
+            <rect width="48" height="43" y="17" fill="#fff"/>
+            <rect width="26" height="2" x="11" y="35" fill="#c7c7c7"/>
+            <rect width="15" height="2" x="18" y="42" fill="#595959"/>
+            <path d="M1.116-11.744H.5a1.827,1.827,0,0,0,.486,1.192,1.818,1.818,0,0,0,1.152.5v.594h.4v-.594a2.2,2.2,0,0,0,.638-.145,1.559,1.559,0,0,0,.5-.315A1.432,1.432,0,0,0,4-10.983a1.57,1.57,0,0,0,.12-.63A1.207,1.207,0,0,0,4-12.186a1.393,1.393,0,0,0-.308-.4,1.571,1.571,0,0,0-.377-.25,1.975,1.975,0,0,0-.341-.127l-.435-.116V-14.86a.964.964,0,0,1,.812.841h.616a2.074,2.074,0,0,0-.493-1,1.5,1.5,0,0,0-.935-.435v-.486h-.4v.478a1.794,1.794,0,0,0-.583.138,1.48,1.48,0,0,0-.471.315,1.48,1.48,0,0,0-.315.471,1.508,1.508,0,0,0-.116.6,1.508,1.508,0,0,0,.087.544.929.929,0,0,0,.272.38,1.7,1.7,0,0,0,.464.268,4.95,4.95,0,0,0,.663.207v1.92a1.3,1.3,0,0,1-.721-.355A1.079,1.079,0,0,1,1.116-11.744Zm1.42,1.123V-12.44q.2.058.37.127a1.1,1.1,0,0,1,.3.17.762.762,0,0,1,.2.243.765.765,0,0,1,.072.351,1.07,1.07,0,0,1-.069.4.742.742,0,0,1-.2.283.861.861,0,0,1-.3.17A1.483,1.483,0,0,1,2.536-10.621Zm-.4-4.261v1.7A2.683,2.683,0,0,1,1.8-13.3a1.123,1.123,0,0,1-.265-.156.613.613,0,0,1-.174-.225.768.768,0,0,1-.062-.322.791.791,0,0,1,.243-.627A1.031,1.031,0,0,1,2.138-14.882Z" transform="translate(10 56)" fill="#595959"/>
+            <rect width="34" height="7" rx="2" x="7" y="49" fill="#3aadaa"/>
+            <rect width="16" height="1" x="16" y="52" fill="#fff"/>
+            <rect width="34" height="32" fill="#9ccde4" x="7"/>
+        </g>
+    </defs> 
+    <use href="#product_centered_item" y="5" x="5"/>
+    <use href="#product_centered_shirt" y="9" x="16"/>
+    <use href="#product_centered_item" y="5" x="66"/>
+    <use href="#product_centered_pants" y="9" x="83"/>
+    <use href="#product_centered_item" y="5" x="126"/>
+    <use href="#product_centered_shirt" y="9" x="137"/>
+    <use href="#product_centered_item" y="5" x="187"/>
+    <use href="#product_centered_watch" y="9" x="205"/>
+</svg>
diff --git a/addons/website_sale/static/src/img/snippets_options/product_horizontal_card.svg b/addons/website_sale/static/src/img/snippets_options/product_horizontal_card.svg
new file mode 100644
index 00000000000..62bcb87fa65
--- /dev/null
+++ b/addons/website_sale/static/src/img/snippets_options/product_horizontal_card.svg
@@ -0,0 +1,44 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="70" viewBox="0 0 240 70">
+    <defs>
+        <g id="product_horizontal_card_shirt" transform="scale(.5)">
+            <path d="M12.9.4H5.417L.4,6.928l2.86,3.683h1.7V22.9h15.86V10.611h1.726L25.4,6.928,20.383.4Z" fill="#e89849"/>
+            <path d="M4.954,10.612h-1.7L.4,6.928,5.417.4H20.383L25.4,6.928l-2.86,3.684H20.814" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M20.814,8.526V22.9H4.954V5.437" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M16.718,1.648a4.032,4.032,0,0,1-7.283.839" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line x1="2.465" transform="translate(18.349 18.115)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line x1="6.068" transform="translate(14.746 19.742)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="product_horizontal_card_watch" transform="scale(.5)">
+            <rect width="4.743" height="7.122" x="3.4" y="15.7" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <rect width="4.743" height="7.122" x="3.4" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M11.124,11.642A5.361,5.361,0,1,1,5.762,6.28,5.362,5.362,0,0,1,11.124,11.642Z" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line y1="3.183" transform="translate(5.762 8.459)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line y1="1.313" x2="1.961" transform="translate(5.762 10.329)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="product_horizontal_card_pants" transform="scale(.5)">
+            <path d="M13.848,22.9H8.884L7.123,7.094,5.361,22.9H.4V.4H13.848Z" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M2.231,4.648h2.46V8.157L2.566,9.215.4,8.077" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M13.81,4.648H9.52V8.157l2.125,1.058" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="product_horizontal_card_item">
+            <rect width="70" height="26" rx="3" fill="#fff"/>
+            <rect width="36" height="2" x="29" y="5" fill="#222"/>
+            <rect width="15" height="2" x="34" y="16" fill="#595959"/>
+            <path d="M1.116-11.744H.5a1.827,1.827,0,0,0,.486,1.192,1.818,1.818,0,0,0,1.152.5v.594h.4v-.594a2.2,2.2,0,0,0,.638-.145,1.559,1.559,0,0,0,.5-.315A1.432,1.432,0,0,0,4-10.983a1.57,1.57,0,0,0,.12-.63A1.207,1.207,0,0,0,4-12.186a1.393,1.393,0,0,0-.308-.4,1.571,1.571,0,0,0-.377-.25,1.975,1.975,0,0,0-.341-.127l-.435-.116V-14.86a.964.964,0,0,1,.812.841h.616a2.074,2.074,0,0,0-.493-1,1.5,1.5,0,0,0-.935-.435v-.486h-.4v.478a1.794,1.794,0,0,0-.583.138,1.48,1.48,0,0,0-.471.315,1.48,1.48,0,0,0-.315.471,1.508,1.508,0,0,0-.116.6,1.508,1.508,0,0,0,.087.544.929.929,0,0,0,.272.38,1.7,1.7,0,0,0,.464.268,4.95,4.95,0,0,0,.663.207v1.92a1.3,1.3,0,0,1-.721-.355A1.079,1.079,0,0,1,1.116-11.744Zm1.42,1.123V-12.44q.2.058.37.127a1.1,1.1,0,0,1,.3.17.762.762,0,0,1,.2.243.765.765,0,0,1,.072.351,1.07,1.07,0,0,1-.069.4.742.742,0,0,1-.2.283.861.861,0,0,1-.3.17A1.483,1.483,0,0,1,2.536-10.621Zm-.4-4.261v1.7A2.683,2.683,0,0,1,1.8-13.3a1.123,1.123,0,0,1-.265-.156.613.613,0,0,1-.174-.225.768.768,0,0,1-.062-.322.791.791,0,0,1,.243-.627A1.031,1.031,0,0,1,2.138-14.882Z" transform="translate(27.5 30)" fill="#595959"/>
+            <rect width="7" height="7" rx="2" x="58" y="14" fill="#3aadaa"/>
+            <rect width="20" height="20" fill="#9ccde4" x="5" y="3"/>
+        </g>
+    </defs> 
+    <use href="#product_horizontal_card_item" y="5" x="5"/>
+    <use href="#product_horizontal_card_shirt" y="12" x="13"/>
+    <use href="#product_horizontal_card_item" y="5" x="85"/>
+    <use href="#product_horizontal_card_watch" y="12" x="97"/>
+    <use href="#product_horizontal_card_item" y="5" x="165"/>
+    <use href="#product_horizontal_card_pants" y="12" x="176"/>
+    <use href="#product_horizontal_card_item" y="39" x="5"/>
+    <use href="#product_horizontal_card_pants" y="46" x="16"/>
+    <use href="#product_horizontal_card_item" y="39" x="85"/>
+    <use href="#product_horizontal_card_shirt" y="46" x="94"/>
+    <use href="#product_horizontal_card_item" y="39" x="165"/>
+    <use href="#product_horizontal_card_watch" y="46" x="177"/>
+</svg>
diff --git a/addons/website_sale/static/src/img/snippets_options/product_horizontal_card_2.svg b/addons/website_sale/static/src/img/snippets_options/product_horizontal_card_2.svg
new file mode 100644
index 00000000000..2815b2770ac
--- /dev/null
+++ b/addons/website_sale/static/src/img/snippets_options/product_horizontal_card_2.svg
@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="70" viewBox="0 0 240 70">
+    <defs>
+        <g id="product_horizontal_card_2_item">
+            <rect width="110" height="26" fill="#9ccde4"/>
+            <g transform="translate(10 4) scale(.75)">
+                <path d="M12.9.4H5.417L.4,6.928l2.86,3.683h1.7V22.9h15.86V10.611h1.726L25.4,6.928,20.383.4Z" fill="#e89849"/>
+                <path d="M4.954,10.612h-1.7L.4,6.928,5.417.4H20.383L25.4,6.928l-2.86,3.684H20.814" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+                <path d="M20.814,8.526V22.9H4.954V5.437" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+                <path d="M16.718,1.648a4.032,4.032,0,0,1-7.283.839" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+                <line x1="2.465" transform="translate(18.349 18.115)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+                <line x1="6.068" transform="translate(14.746 19.742)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            </g>
+            <g transform="translate(51 4) scale(.75)">
+                <rect width="4.743" height="7.122" x="3.4" y="15.7" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+                <rect width="4.743" height="7.122" x="3.4" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+                <path d="M11.124,11.642A5.361,5.361,0,1,1,5.762,6.28,5.362,5.362,0,0,1,11.124,11.642Z" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+                <line y1="3.183" transform="translate(5.762 8.459)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+                <line y1="1.313" x2="1.961" transform="translate(5.762 10.329)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            </g>
+            <g transform="translate(83 4) scale(.75)">
+                <path d="M13.848,22.9H8.884L7.123,7.094,5.361,22.9H.4V.4H13.848Z" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+                <path d="M2.231,4.648h2.46V8.157L2.566,9.215.4,8.077" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+                <path d="M13.81,4.648H9.52V8.157l2.125,1.058" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            </g>
+            <rect width="110" height="26" fill="#000" opacity="0.5"/>
+            <rect width="67" height="2" x="5" y="5" fill="#fff"/>
+            <rect width="52" height="1" x="5" y="10" fill="#fff"/>
+            <rect width="15" height="2" x="11" y="17" fill="#fff"/>
+            <path d="M1.116-11.744H.5a1.827,1.827,0,0,0,.486,1.192,1.818,1.818,0,0,0,1.152.5v.594h.4v-.594a2.2,2.2,0,0,0,.638-.145,1.559,1.559,0,0,0,.5-.315A1.432,1.432,0,0,0,4-10.983a1.57,1.57,0,0,0,.12-.63A1.207,1.207,0,0,0,4-12.186a1.393,1.393,0,0,0-.308-.4,1.571,1.571,0,0,0-.377-.25,1.975,1.975,0,0,0-.341-.127l-.435-.116V-14.86a.964.964,0,0,1,.812.841h.616a2.074,2.074,0,0,0-.493-1,1.5,1.5,0,0,0-.935-.435v-.486h-.4v.478a1.794,1.794,0,0,0-.583.138,1.48,1.48,0,0,0-.471.315,1.48,1.48,0,0,0-.315.471,1.508,1.508,0,0,0-.116.6,1.508,1.508,0,0,0,.087.544.929.929,0,0,0,.272.38,1.7,1.7,0,0,0,.464.268,4.95,4.95,0,0,0,.663.207v1.92a1.3,1.3,0,0,1-.721-.355A1.079,1.079,0,0,1,1.116-11.744Zm1.42,1.123V-12.44q.2.058.37.127a1.1,1.1,0,0,1,.3.17.762.762,0,0,1,.2.243.765.765,0,0,1,.072.351,1.07,1.07,0,0,1-.069.4.742.742,0,0,1-.2.283.861.861,0,0,1-.3.17A1.483,1.483,0,0,1,2.536-10.621Zm-.4-4.261v1.7A2.683,2.683,0,0,1,1.8-13.3a1.123,1.123,0,0,1-.265-.156.613.613,0,0,1-.174-.225.768.768,0,0,1-.062-.322.791.791,0,0,1,.243-.627A1.031,1.031,0,0,1,2.138-14.882Z" transform="translate(4.5 31)" fill="#fff"/>
+            <rect width="28" height="7" rx="2" x="77" y="14" fill="#3aadaa"/>
+            <rect width="12" height="1" x="85" y="17" fill="#fff"/>
+        </g>
+    </defs> 
+    <use href="#product_horizontal_card_2_item" y="5" x="5"/>
+    <use href="#product_horizontal_card_2_item" y="5" x="125"/>
+    <use href="#product_horizontal_card_2_item" y="39" x="5"/>
+    <use href="#product_horizontal_card_2_item" y="39" x="125"/>
+</svg>
diff --git a/addons/website_sale/static/src/img/snippets_options/product_image_only.svg b/addons/website_sale/static/src/img/snippets_options/product_image_only.svg
new file mode 100644
index 00000000000..689765feaf0
--- /dev/null
+++ b/addons/website_sale/static/src/img/snippets_options/product_image_only.svg
@@ -0,0 +1,33 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="70" viewBox="0 0 240 70">
+    <defs>
+        <g id="product_image_only_shirt">
+            <path d="M12.9.4H5.417L.4,6.928l2.86,3.683h1.7V22.9h15.86V10.611h1.726L25.4,6.928,20.383.4Z" fill="#e89849"/>
+            <path d="M4.954,10.612h-1.7L.4,6.928,5.417.4H20.383L25.4,6.928l-2.86,3.684H20.814" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M20.814,8.526V22.9H4.954V5.437" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M16.718,1.648a4.032,4.032,0,0,1-7.283.839" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line x1="2.465" transform="translate(18.349 18.115)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line x1="6.068" transform="translate(14.746 19.742)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="product_image_only_watch">
+            <rect width="4.743" height="7.122" x="3.4" y="15.7" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <rect width="4.743" height="7.122" x="3.4" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M11.124,11.642A5.361,5.361,0,1,1,5.762,6.28,5.362,5.362,0,0,1,11.124,11.642Z" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line y1="3.183" transform="translate(5.762 8.459)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line y1="1.313" x2="1.961" transform="translate(5.762 10.329)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="product_image_only_pants">
+            <path d="M13.848,22.9H8.884L7.123,7.094,5.361,22.9H.4V.4H13.848Z" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M2.231,4.648h2.46V8.157L2.566,9.215.4,8.077" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M13.81,4.648H9.52V8.157l2.125,1.058" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <rect id="product_image_only_item" width="50" height="60" fill="#9ccde4"/>
+    </defs> 
+    <use href="#product_image_only_item" y="5" x="5"/>
+    <use href="#product_image_only_item" y="5" x="65"/>
+    <use href="#product_image_only_item" y="5" x="125"/>
+    <use href="#product_image_only_item" y="5" x="185"/>
+    <use href="#product_image_only_shirt" y="23" x="17"/>
+    <use href="#product_image_only_pants" y="23" x="83"/>
+    <use href="#product_image_only_shirt" y="23" x="137"/>
+    <use href="#product_image_only_watch" y="23" x="205"/>
+</svg>
diff --git a/addons/website_sale/static/src/img/snippets_options/product_image_with_name.svg b/addons/website_sale/static/src/img/snippets_options/product_image_with_name.svg
new file mode 100644
index 00000000000..bc3742cf35d
--- /dev/null
+++ b/addons/website_sale/static/src/img/snippets_options/product_image_with_name.svg
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="70" viewBox="0 0 240 70">
+    <defs>
+        <g id="product_image_with_name_shirt">
+            <path d="M12.9.4H5.417L.4,6.928l2.86,3.683h1.7V22.9h15.86V10.611h1.726L25.4,6.928,20.383.4Z" fill="#e89849"/>
+            <path d="M4.954,10.612h-1.7L.4,6.928,5.417.4H20.383L25.4,6.928l-2.86,3.684H20.814" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M20.814,8.526V22.9H4.954V5.437" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M16.718,1.648a4.032,4.032,0,0,1-7.283.839" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line x1="2.465" transform="translate(18.349 18.115)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line x1="6.068" transform="translate(14.746 19.742)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="product_image_with_name_watch">
+            <rect width="4.743" height="7.122" x="3.4" y="15.7" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <rect width="4.743" height="7.122" x="3.4" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M11.124,11.642A5.361,5.361,0,1,1,5.762,6.28,5.362,5.362,0,0,1,11.124,11.642Z" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line y1="3.183" transform="translate(5.762 8.459)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line y1="1.313" x2="1.961" transform="translate(5.762 10.329)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="product_image_with_name_pants">
+            <path d="M13.848,22.9H8.884L7.123,7.094,5.361,22.9H.4V.4H13.848Z" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M2.231,4.648h2.46V8.157L2.566,9.215.4,8.077" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M13.81,4.648H9.52V8.157l2.125,1.058" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="product_image_with_name_item">
+            <rect width="50" height="50" fill="#9ccde4"/>
+            <rect width="40" height="2" x="5" y="58" fill="#fff"/>
+        </g>
+    </defs> 
+    <use href="#product_image_with_name_item" y="5" x="5"/>
+    <use href="#product_image_with_name_item" y="5" x="65"/>
+    <use href="#product_image_with_name_item" y="5" x="125"/>
+    <use href="#product_image_with_name_item" y="5" x="185"/>
+    <use href="#product_image_with_name_shirt" y="18" x="17"/>
+    <use href="#product_image_with_name_pants" y="18" x="83"/>
+    <use href="#product_image_with_name_shirt" y="18" x="137"/>
+    <use href="#product_image_with_name_watch" y="18" x="205"/>
+</svg>
diff --git a/addons/website_sale/static/src/img/snippets_options/product_image_with_price.svg b/addons/website_sale/static/src/img/snippets_options/product_image_with_price.svg
new file mode 100644
index 00000000000..8b8a505c37d
--- /dev/null
+++ b/addons/website_sale/static/src/img/snippets_options/product_image_with_price.svg
@@ -0,0 +1,37 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="70" viewBox="0 0 240 70">
+    <defs>
+        <g id="product_image_with_price_shirt">
+            <path d="M12.9.4H5.417L.4,6.928l2.86,3.683h1.7V22.9h15.86V10.611h1.726L25.4,6.928,20.383.4Z" fill="#e89849"/>
+            <path d="M4.954,10.612h-1.7L.4,6.928,5.417.4H20.383L25.4,6.928l-2.86,3.684H20.814" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M20.814,8.526V22.9H4.954V5.437" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M16.718,1.648a4.032,4.032,0,0,1-7.283.839" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line x1="2.465" transform="translate(18.349 18.115)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line x1="6.068" transform="translate(14.746 19.742)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="product_image_with_price_watch">
+            <rect width="4.743" height="7.122" x="3.4" y="15.7" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <rect width="4.743" height="7.122" x="3.4" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M11.124,11.642A5.361,5.361,0,1,1,5.762,6.28,5.362,5.362,0,0,1,11.124,11.642Z" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line y1="3.183" transform="translate(5.762 8.459)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line y1="1.313" x2="1.961" transform="translate(5.762 10.329)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="product_image_with_price_pants">
+            <path d="M13.848,22.9H8.884L7.123,7.094,5.361,22.9H.4V.4H13.848Z" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M2.231,4.648h2.46V8.157L2.566,9.215.4,8.077" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M13.81,4.648H9.52V8.157l2.125,1.058" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="product_image_with_price_item">
+            <rect width="50" height="50" fill="#9ccde4"/>
+            <rect width="15" height="2" x="30" y="58" fill="#fff"/>
+            <path d="M1.116-11.744H.5a1.827,1.827,0,0,0,.486,1.192,1.818,1.818,0,0,0,1.152.5v.594h.4v-.594a2.2,2.2,0,0,0,.638-.145,1.559,1.559,0,0,0,.5-.315A1.432,1.432,0,0,0,4-10.983a1.57,1.57,0,0,0,.12-.63A1.207,1.207,0,0,0,4-12.186a1.393,1.393,0,0,0-.308-.4,1.571,1.571,0,0,0-.377-.25,1.975,1.975,0,0,0-.341-.127l-.435-.116V-14.86a.964.964,0,0,1,.812.841h.616a2.074,2.074,0,0,0-.493-1,1.5,1.5,0,0,0-.935-.435v-.486h-.4v.478a1.794,1.794,0,0,0-.583.138,1.48,1.48,0,0,0-.471.315,1.48,1.48,0,0,0-.315.471,1.508,1.508,0,0,0-.116.6,1.508,1.508,0,0,0,.087.544.929.929,0,0,0,.272.38,1.7,1.7,0,0,0,.464.268,4.95,4.95,0,0,0,.663.207v1.92a1.3,1.3,0,0,1-.721-.355A1.079,1.079,0,0,1,1.116-11.744Zm1.42,1.123V-12.44q.2.058.37.127a1.1,1.1,0,0,1,.3.17.762.762,0,0,1,.2.243.765.765,0,0,1,.072.351,1.07,1.07,0,0,1-.069.4.742.742,0,0,1-.2.283.861.861,0,0,1-.3.17A1.483,1.483,0,0,1,2.536-10.621Zm-.4-4.261v1.7A2.683,2.683,0,0,1,1.8-13.3a1.123,1.123,0,0,1-.265-.156.613.613,0,0,1-.174-.225.768.768,0,0,1-.062-.322.791.791,0,0,1,.243-.627A1.031,1.031,0,0,1,2.138-14.882Z" transform="translate(23.5 72)" fill="#fff"/>
+        </g>
+    </defs> 
+    <use href="#product_image_with_price_item" y="5" x="5"/>
+    <use href="#product_image_with_price_item" y="5" x="65"/>
+    <use href="#product_image_with_price_item" y="5" x="125"/>
+    <use href="#product_image_with_price_item" y="5" x="185"/>
+    <use href="#product_image_with_price_shirt" y="18" x="17"/>
+    <use href="#product_image_with_price_pants" y="18" x="83"/>
+    <use href="#product_image_with_price_shirt" y="18" x="137"/>
+    <use href="#product_image_with_price_watch" y="18" x="205"/>
+</svg>
diff --git a/addons/website_sale/static/src/img/snippets_options/product_view_detail.svg b/addons/website_sale/static/src/img/snippets_options/product_view_detail.svg
new file mode 100644
index 00000000000..4facbf9f7ff
--- /dev/null
+++ b/addons/website_sale/static/src/img/snippets_options/product_view_detail.svg
@@ -0,0 +1,41 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="70" viewBox="0 0 240 70">
+    <defs>
+        <g id="product_view_detail_shirt">
+            <path d="M12.9.4H5.417L.4,6.928l2.86,3.683h1.7V22.9h15.86V10.611h1.726L25.4,6.928,20.383.4Z" fill="#e89849"/>
+            <path d="M4.954,10.612h-1.7L.4,6.928,5.417.4H20.383L25.4,6.928l-2.86,3.684H20.814" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M20.814,8.526V22.9H4.954V5.437" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M16.718,1.648a4.032,4.032,0,0,1-7.283.839" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line x1="2.465" transform="translate(18.349 18.115)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line x1="6.068" transform="translate(14.746 19.742)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="product_view_detail_watch">
+            <rect width="4.743" height="7.122" x="3.4" y="15.7" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <rect width="4.743" height="7.122" x="3.4" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M11.124,11.642A5.361,5.361,0,1,1,5.762,6.28,5.362,5.362,0,0,1,11.124,11.642Z" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line y1="3.183" transform="translate(5.762 8.459)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <line y1="1.313" x2="1.961" transform="translate(5.762 10.329)" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="product_view_detail_pants">
+            <path d="M13.848,22.9H8.884L7.123,7.094,5.361,22.9H.4V.4H13.848Z" fill="#e89849" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M2.231,4.648h2.46V8.157L2.566,9.215.4,8.077" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+            <path d="M13.81,4.648H9.52V8.157l2.125,1.058" fill="none" stroke="#89440b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="product_view_detail_item">
+            <rect width="70" height="60" fill="#fff"/>
+            <rect width="15" height="2" x="11" y="52" fill="#595959"/>
+            <path d="M1.116-11.744H.5a1.827,1.827,0,0,0,.486,1.192,1.818,1.818,0,0,0,1.152.5v.594h.4v-.594a2.2,2.2,0,0,0,.638-.145,1.559,1.559,0,0,0,.5-.315A1.432,1.432,0,0,0,4-10.983a1.57,1.57,0,0,0,.12-.63A1.207,1.207,0,0,0,4-12.186a1.393,1.393,0,0,0-.308-.4,1.571,1.571,0,0,0-.377-.25,1.975,1.975,0,0,0-.341-.127l-.435-.116V-14.86a.964.964,0,0,1,.812.841h.616a2.074,2.074,0,0,0-.493-1,1.5,1.5,0,0,0-.935-.435v-.486h-.4v.478a1.794,1.794,0,0,0-.583.138,1.48,1.48,0,0,0-.471.315,1.48,1.48,0,0,0-.315.471,1.508,1.508,0,0,0-.116.6,1.508,1.508,0,0,0,.087.544.929.929,0,0,0,.272.38,1.7,1.7,0,0,0,.464.268,4.95,4.95,0,0,0,.663.207v1.92a1.3,1.3,0,0,1-.721-.355A1.079,1.079,0,0,1,1.116-11.744Zm1.42,1.123V-12.44q.2.058.37.127a1.1,1.1,0,0,1,.3.17.762.762,0,0,1,.2.243.765.765,0,0,1,.072.351,1.07,1.07,0,0,1-.069.4.742.742,0,0,1-.2.283.861.861,0,0,1-.3.17A1.483,1.483,0,0,1,2.536-10.621Zm-.4-4.261v1.7A2.683,2.683,0,0,1,1.8-13.3a1.123,1.123,0,0,1-.265-.156.613.613,0,0,1-.174-.225.768.768,0,0,1-.062-.322.791.791,0,0,1,.243-.627A1.031,1.031,0,0,1,2.138-14.882Z" transform="translate(4.5 65)" fill="#595959"/>
+            <rect width="60" height="2" x="5" y="34" fill="#222"/>
+            <rect width="54" height="1" x="5" y="39" fill="#666"/>
+            <rect width="37" height="1" x="5" y="42" fill="#666"/>
+            <rect width="28" height="7" rx="2" x="37" y="50" fill="#3aadaa"/>
+            <rect width="12" height="1" x="45" y="53" fill="#fff"/>
+            <rect width="70" height="30" fill="#9ccde4"/>
+        </g>
+    </defs> 
+    <use href="#product_view_detail_item" y="5" x="5"/>
+    <use href="#product_view_detail_item" y="5" x="85"/>
+    <use href="#product_view_detail_item" y="5" x="165"/>
+    <use href="#product_view_detail_shirt" y="8" x="27"/>
+    <use href="#product_view_detail_watch" y="8" x="114"/>
+    <use href="#product_view_detail_pants" y="8" x="193"/>
+</svg>
diff --git a/addons/website_sale/static/src/snippets/s_dynamic_snippet_products/000.scss b/addons/website_sale/static/src/snippets/s_dynamic_snippet_products/000.scss
index c3ca97375bc..54da7eb45b1 100644
--- a/addons/website_sale/static/src/snippets/s_dynamic_snippet_products/000.scss
+++ b/addons/website_sale/static/src/snippets/s_dynamic_snippet_products/000.scss
@@ -35,8 +35,56 @@
 }
 
 .o_dynamic_product_hovered {
-    transition: transform 250ms ease;
-    &:hover {
-        transform: scale(.95);
+    img {
+        transition: transform 250ms ease;
+    }
+    &:hover img {
+        transform: scale(1.15);
+    }
+}
+.o_carousel_multiple_rows {
+    .row {
+        padding: 1rem;
+    }
+}
+
+// Cover image
+img.o_img_product_cover {
+    object-fit: cover;
+}
+// Force the image to have a square ratio
+img.o_img_product_square {
+    aspect-ratio: 1 / 1;
+}
+
+.o_card_group {
+    > .row {
+        padding-left: $grid-gutter-width / 2;
+        padding-right: $grid-gutter-width / 2;
+        > div {
+            padding: 0 !important;
+            &:first-child > .o_carousel_product_card{
+                border-left: $card-border-width solid $card-border-color !important;
+            }
+        }
+        &:first-child {
+            .o_carousel_product_card {
+                border-top: $card-border-width solid $card-border-color !important;
+            }
+            > div:first-child .o_carousel_product_card {
+                @include border-top-start-radius($border-radius-lg !important);
+            }
+            > div:last-child .o_carousel_product_card {
+                @include border-top-end-radius($border-radius-lg !important);
+            }
+        }
+        &:last-child {
+            > div:first-child .o_carousel_product_card {
+                @include border-bottom-start-radius($border-radius-lg !important);
+            }
+            > div:last-child .o_carousel_product_card {
+                @include border-bottom-end-radius($border-radius-lg !important);
+            }
+        }
     }
 }