From 05fdc8e75f97530d2350afddd2a6e43bd46e15d3 Mon Sep 17 00:00:00 2001
From: "Antoine (anso)" <anso@odoo.com>
Date: Thu, 1 Aug 2024 12:32:17 +0200
Subject: [PATCH] [IMP] theme_*: adapt `s_product_list`
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

task-4048196
Part of task-3619705

Part-of: odoo/design-themes#919
Related: odoo/odoo#180736
Signed-off-by: Soukéina Bojabza (sobo) <sobo@odoo.com>
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../views/snippets/s_product_list.xml         |  23 ++-
 .../views/snippets/s_product_list.xml         |  30 ++--
 .../views/snippets/s_product_list.xml         |  66 ++++++---
 .../views/snippets/s_product_list.xml         | 125 ++++++++---------
 theme_kiddo/static/src/js/tour.js             |   2 +-
 theme_kiddo/views/snippets/s_product_list.xml |  72 ++++------
 theme_notes/views/snippets/s_product_list.xml | 131 +++++++++---------
 .../views/snippets/s_product_list.xml         |  87 +++---------
 theme_vehicle/views/customizations.xml        |  12 +-
 9 files changed, 263 insertions(+), 285 deletions(-)

diff --git a/theme_anelusia/views/snippets/s_product_list.xml b/theme_anelusia/views/snippets/s_product_list.xml
index d3b6db981..81450e878 100644
--- a/theme_anelusia/views/snippets/s_product_list.xml
+++ b/theme_anelusia/views/snippets/s_product_list.xml
@@ -4,11 +4,26 @@
 <template id="s_product_list" inherit_id="website.s_product_list">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="pt72 pb72" separator=" "/>
+        <attribute name="class" add="pt72 pb72" remove="pt64 pb64" separator=" "/>
     </xpath>
-    <!-- Container -->
-    <xpath expr="//div[hasclass('container-fluid')]" position="attributes">
-        <attribute name="class" add="container" remove="container-fluid" separator=" "/>
+    <!-- Cards -->
+    <xpath expr="//div[hasclass('col-lg-2')]//div[hasclass('card')]" position="attributes">
+        <attribute name="style">border-width: 0px !important;</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][2]//div[hasclass('card')]" position="attributes">
+        <attribute name="style">border-width: 0px !important;</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][3]//div[hasclass('card')]" position="attributes">
+        <attribute name="style">border-width: 0px !important;</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][4]//div[hasclass('card')]" position="attributes">
+        <attribute name="style">border-width: 0px !important;</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][5]//div[hasclass('card')]" position="attributes">
+        <attribute name="style">border-width: 0px !important;</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][6]//div[hasclass('card')]" position="attributes">
+        <attribute name="style">border-width: 0px !important;</attribute>
     </xpath>
     <!-- Item #1 - Img -->
     <xpath expr="//img" position="attributes">
diff --git a/theme_artists/views/snippets/s_product_list.xml b/theme_artists/views/snippets/s_product_list.xml
index 16542e7db..17370e038 100644
--- a/theme_artists/views/snippets/s_product_list.xml
+++ b/theme_artists/views/snippets/s_product_list.xml
@@ -6,28 +6,24 @@
     <xpath expr="//section" position="attributes">
         <attribute name="class" add="o_cc o_cc5" separator=" "/>
     </xpath>
-    <!-- Container -->
-    <xpath expr="//div[hasclass('container-fluid')]" position="attributes">
-        <attribute name="class" add="container" remove="container-fluid" separator=" "/>
+    <!-- Cards -->
+    <xpath expr="//div[hasclass('col-lg-2')]//div[hasclass('card')]" position="attributes">
+        <attribute name="class" remove="o_cc o_cc1" add="o_cc o_cc5" separator=" "/>
     </xpath>
-    <!-- Buttons -->
-    <xpath expr="//a[hasclass('btn')]" position="replace" mode="inner">
-        More info
+    <xpath expr="//div[hasclass('col-lg-2')][2]//div[hasclass('card')]" position="attributes">
+        <attribute name="class" remove="o_cc o_cc1" add="o_cc o_cc5" separator=" "/>
     </xpath>
-    <xpath expr="(//a[hasclass('btn')])[2]" position="replace" mode="inner">
-        More info
+    <xpath expr="//div[hasclass('col-lg-2')][3]//div[hasclass('card')]" position="attributes">
+        <attribute name="class" remove="o_cc o_cc1" add="o_cc o_cc5" separator=" "/>
     </xpath>
-    <xpath expr="(//a[hasclass('btn')])[3]" position="replace" mode="inner">
-        More info
+    <xpath expr="//div[hasclass('col-lg-2')][4]//div[hasclass('card')]" position="attributes">
+        <attribute name="class" remove="o_cc o_cc1" add="o_cc o_cc5" separator=" "/>
     </xpath>
-    <xpath expr="(//a[hasclass('btn')])[4]" position="replace" mode="inner">
-        More info
+    <xpath expr="//div[hasclass('col-lg-2')][5]//div[hasclass('card')]" position="attributes">
+        <attribute name="class" remove="o_cc o_cc1" add="o_cc o_cc5" separator=" "/>
     </xpath>
-    <xpath expr="(//a[hasclass('btn')])[5]" position="replace" mode="inner">
-        More info
-    </xpath>
-    <xpath expr="(//a[hasclass('btn')])[6]" position="replace" mode="inner">
-        More info
+    <xpath expr="//div[hasclass('col-lg-2')][6]//div[hasclass('card')]" position="attributes">
+        <attribute name="class" remove="o_cc o_cc1" add="o_cc o_cc5" separator=" "/>
     </xpath>
 </template>
 
diff --git a/theme_beauty/views/snippets/s_product_list.xml b/theme_beauty/views/snippets/s_product_list.xml
index 986f3f016..24ac84787 100644
--- a/theme_beauty/views/snippets/s_product_list.xml
+++ b/theme_beauty/views/snippets/s_product_list.xml
@@ -4,54 +4,86 @@
 <template id="s_product_list" inherit_id="website.s_product_list">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="pt96 pb96" separator=" "/>
-    </xpath>
-    <!-- Container -->
-    <xpath expr="//div[hasclass('container-fluid')]" position="attributes">
-        <attribute name="class" add="container" remove="container-fluid" separator=" "/>
+        <attribute name="class" add="pt96 pb96" remove="pt64 pb64" separator=" "/>
     </xpath>
     <!-- Item #1 -->
-    <xpath expr="//img" position="attributes">
+    <xpath expr="//div[hasclass('col-lg-2')]//img" position="attributes">
         <attribute name="class" add="rounded-circle" separator=" "/>
     </xpath>
-    <xpath expr="//a[hasclass('btn')]" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-2')]//figure" position="attributes">
+        <attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')]//h3" position="replace" mode="inner">
         Make-up
     </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')]//div[hasclass('card')]" position="attributes">
+        <attribute name="style">border-width: 0px !important;</attribute>
+    </xpath>
     <!-- Item #2 -->
-    <xpath expr="(//img)[2]" position="attributes">
+    <xpath expr="//div[hasclass('col-lg-2')][2]//img" position="attributes">
         <attribute name="class" add="rounded-circle" separator=" "/>
     </xpath>
-    <xpath expr="(//a[hasclass('btn')])[2]" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-2')][2]//figure" position="attributes">
+        <attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][2]//h3" position="replace" mode="inner">
         Skin gel
     </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][2]//div[hasclass('card')]" position="attributes">
+        <attribute name="style">border-width: 0px !important;</attribute>
+    </xpath>
     <!-- Item #3 -->
-    <xpath expr="(//img)[3]" position="attributes">
+    <xpath expr="//div[hasclass('col-lg-2')][3]//img" position="attributes">
         <attribute name="class" add="rounded-circle" separator=" "/>
     </xpath>
-    <xpath expr="(//a[hasclass('btn')])[3]" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-2')][3]//figure" position="attributes">
+        <attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][3]//h3" position="replace" mode="inner">
         Lipstick
     </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][3]//div[hasclass('card')]" position="attributes">
+        <attribute name="style">border-width: 0px !important;</attribute>
+    </xpath>
     <!-- Item #4 -->
-    <xpath expr="(//img)[4]" position="attributes">
+    <xpath expr="//div[hasclass('col-lg-2')][4]//img" position="attributes">
         <attribute name="class" add="rounded-circle" separator=" "/>
     </xpath>
-    <xpath expr="(//a[hasclass('btn')])[4]" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-2')][4]//figure" position="attributes">
+        <attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][4]//h3" position="replace" mode="inner">
         Eyeliner
     </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][4]//div[hasclass('card')]" position="attributes">
+        <attribute name="style">border-width: 0px !important;</attribute>
+    </xpath>
     <!-- Item #5 -->
-    <xpath expr="(//img)[5]" position="attributes">
+    <xpath expr="//div[hasclass('col-lg-2')][5]//img" position="attributes">
         <attribute name="class" add="rounded-circle" separator=" "/>
     </xpath>
-    <xpath expr="(//a[hasclass('btn')])[5]" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-2')][5]//figure" position="attributes">
+        <attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][5]//h3" position="replace" mode="inner">
         Perfume
     </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][5]//div[hasclass('card')]" position="attributes">
+        <attribute name="style">border-width: 0px !important;</attribute>
+    </xpath>
     <!-- Item #6 -->
-    <xpath expr="(//img)[6]" position="attributes">
+    <xpath expr="//div[hasclass('col-lg-2')][6]//img" position="attributes">
         <attribute name="class" add="rounded-circle" separator=" "/>
     </xpath>
-    <xpath expr="(//a[hasclass('btn')])[6]" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-2')][6]//figure" position="attributes">
+        <attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][6]//h3" position="replace" mode="inner">
         Essential oils
     </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][6]//div[hasclass('card')]" position="attributes">
+        <attribute name="style">border-width: 0px !important;</attribute>
+    </xpath>
 </template>
 
 <template id="configurator_s_product_list" inherit_id="website.configurator_s_product_list">
diff --git a/theme_bookstore/views/snippets/s_product_list.xml b/theme_bookstore/views/snippets/s_product_list.xml
index 702966b29..6e8245f22 100644
--- a/theme_bookstore/views/snippets/s_product_list.xml
+++ b/theme_bookstore/views/snippets/s_product_list.xml
@@ -4,72 +4,67 @@
 <template id="s_product_list" inherit_id="website.s_product_list">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="o_cc o_cc5 pb96" separator=" "/>
+        <attribute name="class" add="o_cc o_cc5 pb96" remove="pb64" separator=" "/>
     </xpath>
-    <!-- Container -->
-    <xpath expr="//div[hasclass('container-fluid')]" position="replace">
-        <div class="container">
-            <!-- Row #1 -->
-            <div class="row">
-                <!-- Item #1 -->
-                <div class="h-100 pb16 col-lg-4">
-                    <a href="#">
-                        <img src="/web/image/website.s_product_list_default_image_1" alt="" class="img img-fluid w-100" style="max-height: 100%;"/>
-                    </a>
-                    <div class="s_product_list_item_link">
-                        <a href="#" class="btn btn-primary">View the book</a>
-                    </div>
-                </div>
-                <!-- Item #2 -->
-                <div class="h-100 pb16 col-lg-4">
-                    <a href="#">
-                        <img src="/web/image/website.s_product_list_default_image_2" alt="" class="img img-fluid w-100" style="max-height: 100%;"/>
-                    </a>
-                    <div class="s_product_list_item_link">
-                        <a href="#" class="btn btn-primary">View the book</a>
-                    </div>
-                </div>
-                <!-- Item #3 -->
-                <div class="h-100 pb16 col-lg-4">
-                    <a href="#">
-                        <img src="/web/image/website.s_product_list_default_image_5" alt="" class="img img-fluid w-100" style="max-height: 100%;"/>
-                    </a>
-                    <div class="s_product_list_item_link">
-                        <a href="#" class="btn btn-primary">View the book</a>
-                    </div>
-                </div>
-            </div>
-            <!-- Row #2 -->
-            <div class="row">
-                <!-- Item #4 -->
-                <div class="h-100 pb16 col-lg-4">
-                    <a href="#">
-                        <img src="/web/image/website.s_product_list_default_image_3" alt="" class="img img-fluid w-100" style="max-height: 100%;"/>
-                    </a>
-                    <div class="s_product_list_item_link">
-                        <a href="#" class="btn btn-primary">View the book</a>
-                    </div>
-                </div>
-                <!-- Item #5 -->
-                <div class="h-100 pb16 col-lg-4">
-                    <a href="#">
-                        <img src="/web/image/website.s_product_list_default_image_4" alt="" class="img img-fluid w-100" style="max-height: 100%;"/>
-                    </a>
-                    <div class="s_product_list_item_link">
-                        <a href="#" class="btn btn-primary">View the book</a>
-                    </div>
-                </div>
-                <!-- Item #6 -->
-                <div class="h-100 pb16 col-lg-4">
-                    <a href="#">
-                        <img src="/web/image/website.s_product_list_default_image_6" alt="" class="img img-fluid w-100" style="max-height: 100%;"/>
-                    </a>
-                    <div class="s_product_list_item_link">
-                        <a href="#" class="btn btn-primary">View the book</a>
-                    </div>
-                </div>
-            </div>
-        </div>
+    <!-- Item #1 -->
+    <xpath expr="//div[hasclass('col-lg-2')]//h3/a" position="replace" mode="inner">
+        View the book
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')]//div[hasclass('card')]" position="attributes">
+        <attribute name="style">border-width: 0px !important;</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')]//figure" position="attributes">
+        <attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
+    </xpath>
+    <!-- Item #2 -->
+    <xpath expr="//div[hasclass('col-lg-2')][2]//h3/a" position="replace" mode="inner">
+        View the book
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][2]//div[hasclass('card')]" position="attributes">
+        <attribute name="style">border-width: 0px !important;</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][2]//figure" position="attributes">
+        <attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
+    </xpath>
+    <!-- Item #3 -->
+    <xpath expr="//div[hasclass('col-lg-2')][3]//h3/a" position="replace" mode="inner">
+        View the book
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][3]//div[hasclass('card')]" position="attributes">
+        <attribute name="style">border-width: 0px !important;</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][3]//figure" position="attributes">
+        <attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
+    </xpath>
+    <!-- Item #4 -->
+    <xpath expr="//div[hasclass('col-lg-2')][4]//h3/a" position="replace" mode="inner">
+        View the book
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][4]//div[hasclass('card')]" position="attributes">
+        <attribute name="style">border-width: 0px !important;</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][4]//figure" position="attributes">
+        <attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
+    </xpath>
+    <!-- Item #5 -->
+    <xpath expr="//div[hasclass('col-lg-2')][5]//h3/a" position="replace" mode="inner">
+        View the book
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][5]//div[hasclass('card')]" position="attributes">
+        <attribute name="style">border-width: 0px !important;</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][5]//figure" position="attributes">
+        <attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
+    </xpath>
+    <!-- Item #6 -->
+    <xpath expr="//div[hasclass('col-lg-2')][6]//h3/a" position="replace" mode="inner">
+        View the book
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][6]//div[hasclass('card')]" position="attributes">
+        <attribute name="style">border-width: 0px !important;</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][6]//figure" position="attributes">
+        <attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
     </xpath>
 </template>
 
diff --git a/theme_kiddo/static/src/js/tour.js b/theme_kiddo/static/src/js/tour.js
index 8b1548063..2ebf380f3 100644
--- a/theme_kiddo/static/src/js/tour.js
+++ b/theme_kiddo/static/src/js/tour.js
@@ -21,7 +21,7 @@ const snippets = [
     {
         id: 's_product_list',
         name: 'Items',
-        groupName: "Content",
+        groupName: "Columns",
     },
     {
         id: 's_call_to_action',
diff --git a/theme_kiddo/views/snippets/s_product_list.xml b/theme_kiddo/views/snippets/s_product_list.xml
index ed396718b..2c09a5383 100644
--- a/theme_kiddo/views/snippets/s_product_list.xml
+++ b/theme_kiddo/views/snippets/s_product_list.xml
@@ -4,92 +4,72 @@
 <template id="s_product_list" inherit_id="website.s_product_list">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="pt96 pb96" separator=" "/>
+        <attribute name="class" add="pt96 pb96" remove="pt64 pb64" separator=" "/>
     </xpath>
 
-    <!-- Container -->
-    <xpath expr="//div[hasclass('container-fluid')]" position="attributes">
-        <attribute name="class" add="container" remove="container-fluid" separator=" "/>
-    </xpath>
-    <xpath expr="//div[hasclass('row')]" position="attributes">
-        <attribute name="class" add="justify-content-center" separator=" "/>
+    <!-- Title -->
+    <xpath expr="//h2" position="attributes">
+        <attribute name="style">text-align: center;</attribute>
     </xpath>
     
     <!-- Item n°1 -->
     <xpath expr="//div[hasclass('col-lg-2')]" position="attributes">
-        <attribute name="class" add="border rounded mx-3" separator=" "/>
+        <attribute name="class" add="offset-lg-1" separator=" "/>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')]//h3" position="replace" mode="inner">
+        About us
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')]//div[hasclass('card')]" position="attributes">
         <attribute name="style">border-radius: 16px !important; border-width: 4px !important; border-style: dotted !important; border-color: var(--o-color-2) !important;</attribute>
     </xpath>
-    <xpath expr="//div[hasclass('s_product_list_item_link')]" position="attributes">
-        <attribute name="class" add="pb24" separator=" "/>
-    </xpath>
-    <xpath expr="//div[hasclass('s_product_list_item_link')]//a" position="replace">
-        <a t-att-href="url">About us</a>
-    </xpath>
     <!-- Item n°1 : SVG with dynamic color -->
     <xpath expr="//div[hasclass('col-lg-2')]//img" position="attributes">
         <attribute name="src">/web_editor/shape/theme_kiddo/s_product_list_1.svg?c1=o-color-1&amp;c2=o-color-2</attribute>
     </xpath>
     
     <!-- Item n°2 -->
-    <xpath expr="(//div[hasclass('col-lg-2')])[2]" position="attributes">
-        <attribute name="class" add="border rounded mx-3" separator=" "/>
+    <xpath expr="(//div[hasclass('col-lg-2')])[2]//h3" position="replace" mode="inner">
+        Our team
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][2]//div[hasclass('card')]" position="attributes">
         <attribute name="style">border-radius: 16px !important; border-width: 4px !important; border-style: dotted !important; border-color: var(--o-color-2) !important;</attribute>
     </xpath>
-    <xpath expr="(//div[hasclass('s_product_list_item_link')])[2]" position="attributes">
-        <attribute name="class" add="pb24" separator=" "/>
-    </xpath>
-    <xpath expr="(//div[hasclass('s_product_list_item_link')])[2]//a" position="replace">
-        <a t-att-href="url">Our team</a>
-    </xpath>
     <!-- Item n°2 : SVG with dynamic color -->
     <xpath expr="(//div[hasclass('col-lg-2')])[2]//img" position="attributes">
         <attribute name="src">/web_editor/shape/theme_kiddo/s_product_list_2.svg?c1=o-color-1&amp;c2=o-color-2</attribute>
     </xpath>
     
     <!-- Item n°3 -->
-    <xpath expr="(//div[hasclass('col-lg-2')])[3]" position="attributes">
-        <attribute name="class" add="border rounded mx-3" separator=" "/>
+    <xpath expr="(//div[hasclass('col-lg-2')])[3]//h3" position="replace" mode="inner">
+        Playground
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][3]//div[hasclass('card')]" position="attributes">
         <attribute name="style">border-radius: 16px !important; border-width: 4px !important; border-style: dotted !important; border-color: var(--o-color-2) !important;</attribute>
     </xpath>
-    <xpath expr="(//div[hasclass('s_product_list_item_link')])[3]" position="attributes">
-        <attribute name="class" add="pb24" separator=" "/>
-    </xpath>
-    <xpath expr="(//div[hasclass('s_product_list_item_link')])[3]//a" position="replace">
-        <a t-att-href="url">Playground</a>
-    </xpath>
     <!-- Item n°3 : SVG with dynamic color -->
     <xpath expr="(//div[hasclass('col-lg-2')])[3]//img" position="attributes">
         <attribute name="src">/web_editor/shape/theme_kiddo/s_product_list_3.svg?c1=o-color-1&amp;c2=o-color-2</attribute>
     </xpath>
     
     <!-- Item n°4 -->
-    <xpath expr="(//div[hasclass('col-lg-2')])[4]" position="attributes">
-        <attribute name="class" add="border rounded mx-3" separator=" "/>
+    <xpath expr="(//div[hasclass('col-lg-2')])[4]//h3" position="replace" mode="inner">
+        Events
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][4]//div[hasclass('card')]" position="attributes">
         <attribute name="style">border-radius: 16px !important; border-width: 4px !important; border-style: dotted !important; border-color: var(--o-color-2) !important;</attribute>
     </xpath>
-    <xpath expr="(//div[hasclass('s_product_list_item_link')])[4]" position="attributes">
-        <attribute name="class" add="pb24" separator=" "/>
-    </xpath>
-    <xpath expr="(//div[hasclass('s_product_list_item_link')])[4]//a" position="replace">
-        <a t-att-href="url">Events</a>
-    </xpath>
     <!-- Item n°4 : SVG with dynamic color -->
     <xpath expr="(//div[hasclass('col-lg-2')])[4]//img" position="attributes">
         <attribute name="src">/web_editor/shape/theme_kiddo/s_product_list_4.svg?c1=o-color-1&amp;c2=o-color-2</attribute>
     </xpath>
     
     <!-- Item n°5 -->
-    <xpath expr="(//div[hasclass('col-lg-2')])[5]" position="attributes">
-        <attribute name="class" add="border rounded mx-3" separator=" "/>
+    <xpath expr="(//div[hasclass('col-lg-2')])[5]//h3" position="replace" mode="inner">
+        Visit us
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][5]//div[hasclass('card')]" position="attributes">
         <attribute name="style">border-radius: 16px !important; border-width: 4px !important; border-style: dotted !important; border-color: var(--o-color-2) !important;</attribute>
     </xpath>
-    <xpath expr="(//div[hasclass('s_product_list_item_link')])[5]" position="attributes">
-        <attribute name="class" add="pb24" separator=" "/>
-    </xpath>
-    <xpath expr="(//div[hasclass('s_product_list_item_link')])[5]//a" position="replace">
-        <a t-att-href="url">Visit us</a>
-    </xpath>
     <!-- Item n°5 : SVG with dynamic color -->
     <xpath expr="(//div[hasclass('col-lg-2')])[5]//img" position="attributes">
         <attribute name="src">/web_editor/shape/theme_kiddo/s_product_list_6.svg?c1=o-color-1&amp;c2=o-color-2</attribute>
diff --git a/theme_notes/views/snippets/s_product_list.xml b/theme_notes/views/snippets/s_product_list.xml
index 191fa23b7..43d0da836 100644
--- a/theme_notes/views/snippets/s_product_list.xml
+++ b/theme_notes/views/snippets/s_product_list.xml
@@ -4,72 +4,73 @@
 <template id="s_product_list" inherit_id="website.s_product_list">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="o_cc o_cc5 pb80 pt96" separator=" "/>
+        <attribute name="class" add="o_cc o_cc5 pb80 pt96" remove="pt64 pb64" separator=" "/>
     </xpath>
-    <!-- Container -->
-    <xpath expr="//div[hasclass('container-fluid')]" position="replace">
-        <div class="container">
-            <!-- Row #1 -->
-            <div class="row">
-                <!-- Item #1 -->
-                <div class="h-100 pb16 col-lg-4">
-                    <a href="#">
-                        <img src="/web/image/website.s_product_list_default_image_1" alt="" class="img img-fluid w-100 rounded" style="max-height: 100%;"/>
-                    </a>
-                    <div class="s_product_list_item_link">
-                        <a href="#" class="btn btn-primary">T-shirts</a>
-                    </div>
-                </div>
-                <!-- Item #2 -->
-                <div class="h-100 pb16 col-lg-4">
-                    <a href="#">
-                        <img src="/web/image/website.s_product_list_default_image_2" alt="" class="img img-fluid w-100 rounded" style="max-height: 100%;"/>
-                    </a>
-                    <div class="s_product_list_item_link">
-                        <a href="#" class="btn btn-primary">Hoodies</a>
-                    </div>
-                </div>
-                <!-- Item #3 -->
-                <div class="h-100 pb16 col-lg-4">
-                    <a href="#">
-                        <img src="/web/image/website.s_product_list_default_image_5" alt="" class="img img-fluid w-100 rounded" style="max-height: 100%;"/>
-                    </a>
-                    <div class="s_product_list_item_link">
-                        <a href="#" class="btn btn-primary">Vinyls</a>
-                    </div>
-                </div>
-            </div>
-            <!-- Row #2 -->
-            <div class="row">
-                <!-- Item #4 -->
-                <div class="h-100 pb16 col-lg-4">
-                    <a href="#">
-                        <img src="/web/image/website.s_product_list_default_image_3" alt="" class="img img-fluid w-100 rounded" style="max-height: 100%;"/>
-                    </a>
-                    <div class="s_product_list_item_link">
-                        <a href="#" class="btn btn-primary">Sunglasses</a>
-                    </div>
-                </div>
-                <!-- Item #5 -->
-                <div class="h-100 pb16 col-lg-4">
-                    <a href="#">
-                        <img src="/web/image/website.s_product_list_default_image_4" alt="" class="img img-fluid w-100 rounded" style="max-height: 100%;"/>
-                    </a>
-                    <div class="s_product_list_item_link">
-                        <a href="#" class="btn btn-primary">Caps</a>
-                    </div>
-                </div>
-                <!-- Item #6 -->
-                <div class="h-100 pb16 col-lg-4">
-                    <a href="#">
-                        <img src="/web/image/website.s_product_list_default_image_6" alt="" class="img img-fluid w-100 rounded" style="max-height: 100%;"/>
-                    </a>
-                    <div class="s_product_list_item_link">
-                        <a href="#" class="btn btn-primary">CD Albums</a>
-                    </div>
-                </div>
-            </div>
-        </div>
+    <!-- Item #1 -->
+    <xpath expr="//div[hasclass('col-lg-2')]//h3/a" position="replace" mode="inner">
+        T-shirts
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')]//div[hasclass('card')]" position="attributes">
+        <attribute name="class" remove="o_cc1" add="o_cc4" separator=" "/>
+        <attribute name="style">border-width: 0px !important;</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')]//figure" position="attributes">
+        <attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
+    </xpath>
+    <!-- Item #2 -->
+    <xpath expr="//div[hasclass('col-lg-2')][2]//h3/a" position="replace" mode="inner">
+        Hoodies
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][2]//div[hasclass('card')]" position="attributes">
+        <attribute name="class" remove="o_cc1" add="o_cc4" separator=" "/>
+        <attribute name="style">border-width: 0px !important;</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][2]//figure" position="attributes">
+        <attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
+    </xpath>
+    <!-- Item #3 -->
+    <xpath expr="//div[hasclass('col-lg-2')][3]//h3/a" position="replace" mode="inner">
+        Vinyls
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][3]//div[hasclass('card')]" position="attributes">
+        <attribute name="class" remove="o_cc1" add="o_cc4" separator=" "/>
+        <attribute name="style">border-width: 0px !important;</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][3]//figure" position="attributes">
+        <attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
+    </xpath>
+    <!-- Item #4 -->
+    <xpath expr="//div[hasclass('col-lg-2')][4]//h3/a" position="replace" mode="inner">
+        Sunglasses
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][4]//div[hasclass('card')]" position="attributes">
+        <attribute name="class" remove="o_cc1" add="o_cc4" separator=" "/>
+        <attribute name="style">border-width: 0px !important;</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][4]//figure" position="attributes">
+        <attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
+    </xpath>
+    <!-- Item #5 -->
+    <xpath expr="//div[hasclass('col-lg-2')][5]//h3/a" position="replace" mode="inner">
+        Caps
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][5]//div[hasclass('card')]" position="attributes">
+        <attribute name="class" remove="o_cc1" add="o_cc4" separator=" "/>
+        <attribute name="style">border-width: 0px !important;</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][5]//figure" position="attributes">
+        <attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
+    </xpath>
+    <!-- Item #6 -->
+    <xpath expr="//div[hasclass('col-lg-2')][6]//h3/a" position="replace" mode="inner">
+        CD Albums
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][6]//div[hasclass('card')]" position="attributes">
+        <attribute name="class" remove="o_cc1" add="o_cc4" separator=" "/>
+        <attribute name="style">border-width: 0px !important;</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')][6]//figure" position="attributes">
+        <attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
     </xpath>
 </template>
 
diff --git a/theme_odoo_experts/views/snippets/s_product_list.xml b/theme_odoo_experts/views/snippets/s_product_list.xml
index 4a589ff16..f7af58cec 100644
--- a/theme_odoo_experts/views/snippets/s_product_list.xml
+++ b/theme_odoo_experts/views/snippets/s_product_list.xml
@@ -2,70 +2,29 @@
 <odoo>
 
 <template id="s_product_list" inherit_id="website.s_product_list">
-    <!-- Container -->
-    <xpath expr="//div[hasclass('container-fluid')]" position="replace">
-        <div class="container">
-            <!-- Row #1 -->
-            <div class="row">
-                <!-- Item #1 -->
-                <div class="h-100 pb16 col-lg-4">
-                    <a href="#">
-                        <img src="/web/image/website.s_product_list_default_image_1" alt="" class="img img-fluid w-100" style="max-height: 100%;"/>
-                    </a>
-                    <div class="s_product_list_item_link">
-                        <a href="#" class="btn btn-primary">Social Strategy</a>
-                    </div>
-                </div>
-                <!-- Item #2 -->
-                <div class="h-100 pb16 col-lg-4">
-                    <a href="#">
-                        <img src="/web/image/website.s_product_list_default_image_2" alt="" class="img img-fluid w-100" style="max-height: 100%;"/>
-                    </a>
-                    <div class="s_product_list_item_link">
-                        <a href="#" class="btn btn-primary">Executive Strategy</a>
-                    </div>
-                </div>
-                <!-- Item #3 -->
-                <div class="h-100 pb16 col-lg-4">
-                    <a href="#">
-                        <img src="/web/image/website.s_product_list_default_image_5" alt="" class="img img-fluid w-100" style="max-height: 100%;"/>
-                    </a>
-                    <div class="s_product_list_item_link">
-                        <a href="#" class="btn btn-primary">Corporate Finance</a>
-                    </div>
-                </div>
-            </div>
-            <!-- Row #2 -->
-            <div class="row">
-                <!-- Item #4 -->
-                <div class="h-100 pb16 col-lg-4">
-                    <a href="#">
-                        <img src="/web/image/website.s_product_list_default_image_3" alt="" class="img img-fluid w-100" style="max-height: 100%;"/>
-                    </a>
-                    <div class="s_product_list_item_link">
-                        <a href="#" class="btn btn-primary">Growth &amp; Innovation</a>
-                    </div>
-                </div>
-                <!-- Item #5 -->
-                <div class="h-100 pb16 col-lg-4">
-                    <a href="#">
-                        <img src="/web/image/website.s_product_list_default_image_4" alt="" class="img img-fluid w-100" style="max-height: 100%;"/>
-                    </a>
-                    <div class="s_product_list_item_link">
-                        <a href="#" class="btn btn-primary">Digital Strategy</a>
-                    </div>
-                </div>
-                <!-- Item #6 -->
-                <div class="h-100 pb16 col-lg-4">
-                    <a href="#">
-                        <img src="/web/image/website.s_product_list_default_image_6" alt="" class="img img-fluid w-100" style="max-height: 100%;"/>
-                    </a>
-                    <div class="s_product_list_item_link">
-                        <a href="#" class="btn btn-primary">Business Strategy</a>
-                    </div>
-                </div>
-            </div>
-        </div>
+    <!-- Item #1 -->
+    <xpath expr="//div[hasclass('col-lg-2')]//h3/a" position="replace" mode="inner">
+        Social Strategy
+    </xpath>
+    <!-- Item #2 -->
+    <xpath expr="//div[hasclass('col-lg-2')][2]//h3/a" position="replace" mode="inner">
+        Executive Strategy
+    </xpath>
+    <!-- Item #3 -->
+    <xpath expr="//div[hasclass('col-lg-2')][3]//h3/a" position="replace" mode="inner">
+        Corporate Finance
+    </xpath>
+    <!-- Item #4 -->
+    <xpath expr="//div[hasclass('col-lg-2')][4]//h3/a" position="replace" mode="inner">
+        Growth &amp; Innovation
+    </xpath>
+    <!-- Item #5 -->
+    <xpath expr="//div[hasclass('col-lg-2')][5]//h3/a" position="replace" mode="inner">
+        Digital Strategy
+    </xpath>
+    <!-- Item #6 -->
+    <xpath expr="//div[hasclass('col-lg-2')][6]//h3/a" position="replace" mode="inner">
+        Business Strategy
     </xpath>
 </template>
 
diff --git a/theme_vehicle/views/customizations.xml b/theme_vehicle/views/customizations.xml
index 3a5f026e0..9b68e0b8c 100644
--- a/theme_vehicle/views/customizations.xml
+++ b/theme_vehicle/views/customizations.xml
@@ -412,22 +412,22 @@
 
 <!-- ======== PRODUCT LIST ======== -->
 <template id="s_product_list" inherit_id="website.s_product_list">
-    <xpath expr="(//div[hasclass('s_product_list_item_link')]//a)" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-2')]//h3" position="replace" mode="inner">
         Brakes #1
     </xpath>
-    <xpath expr="(//div[hasclass('s_product_list_item_link')]//a)[2]" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-2')][2]//h3" position="replace" mode="inner">
         Brakes #2
     </xpath>
-    <xpath expr="(//div[hasclass('s_product_list_item_link')]//a)[3]" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-2')][3]//h3" position="replace" mode="inner">
         Brakes #3
     </xpath>
-    <xpath expr="(//div[hasclass('s_product_list_item_link')]//a)[4]" position="replace"  mode="inner">
+    <xpath expr="//div[hasclass('col-lg-2')][4]//h3" position="replace"  mode="inner">
         Brakes #4
     </xpath>
-    <xpath expr="(//div[hasclass('s_product_list_item_link')]//a)[5]" position="replace"  mode="inner">
+    <xpath expr="//div[hasclass('col-lg-2')][5]//h3" position="replace"  mode="inner">
         Brakes #5
     </xpath>
-    <xpath expr="(//div[hasclass('s_product_list_item_link')]//a)[6]" position="replace"  mode="inner">
+    <xpath expr="//div[hasclass('col-lg-2')][6]//h3" position="replace"  mode="inner">
         Brakes #6
     </xpath>
 </template>