From e67498156c921325870371ff08d21df8aee2166e Mon Sep 17 00:00:00 2001
From: Brieuc-brd <brd@odoo.com>
Date: Tue, 14 Dec 2021 08:07:14 +0000
Subject: [PATCH] [IMP] website, website_sale: improve design of templates

This commit improves the design of dynamic products templates.
It introduces templates using multiples rows and fine tunes the
design of the other ones.
To make thumbnails work in the template selector, an extra
data-attribute can now be processed by the snippet option.

- data-thumb: it references the location of the thumbnail for a
template. If present the option will show the svg / img.
If not it will display the name of the template.

task-2677203

Part-of: odoo/odoo#80128
Co-authored-by: Arthur Detroux <ard@odoo.com>
---
 addons/website/controllers/main.py            |   1 +
 .../src/snippets/s_dynamic_snippet/options.js |   6 +-
 .../data/product_snippet_template_data.xml    | 290 ++++++++++++------
 .../snippets_options/product_add_to_cart.svg  |  40 +++
 .../img/snippets_options/product_banner.svg   |  43 +++
 .../snippets_options/product_borderless_1.svg |  38 +++
 .../snippets_options/product_borderless_2.svg |  40 +++
 .../snippets_options/product_card_group.svg   |  41 +++
 .../img/snippets_options/product_centered.svg |  41 +++
 .../product_horizontal_card.svg               |  44 +++
 .../product_horizontal_card_2.svg             |  38 +++
 .../snippets_options/product_image_only.svg   |  33 ++
 .../product_image_with_name.svg               |  36 +++
 .../product_image_with_price.svg              |  37 +++
 .../snippets_options/product_view_detail.svg  |  41 +++
 .../s_dynamic_snippet_products/000.scss       |  54 +++-
 16 files changed, 723 insertions(+), 100 deletions(-)
 create mode 100644 addons/website_sale/static/src/img/snippets_options/product_add_to_cart.svg
 create mode 100644 addons/website_sale/static/src/img/snippets_options/product_banner.svg
 create mode 100644 addons/website_sale/static/src/img/snippets_options/product_borderless_1.svg
 create mode 100644 addons/website_sale/static/src/img/snippets_options/product_borderless_2.svg
 create mode 100644 addons/website_sale/static/src/img/snippets_options/product_card_group.svg
 create mode 100644 addons/website_sale/static/src/img/snippets_options/product_centered.svg
 create mode 100644 addons/website_sale/static/src/img/snippets_options/product_horizontal_card.svg
 create mode 100644 addons/website_sale/static/src/img/snippets_options/product_horizontal_card_2.svg
 create mode 100644 addons/website_sale/static/src/img/snippets_options/product_image_only.svg
 create mode 100644 addons/website_sale/static/src/img/snippets_options/product_image_with_name.svg
 create mode 100644 addons/website_sale/static/src/img/snippets_options/product_image_with_price.svg
 create mode 100644 addons/website_sale/static/src/img/snippets_options/product_view_detail.svg

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);
+            }
+        }
     }
 }