diff --git a/addons/sale/static/src/js/product_catalog/kanban_view.js b/addons/sale/static/src/js/product_catalog/kanban_view.js
index 8756f7bb4f7..b4856a325ee 100644
--- a/addons/sale/static/src/js/product_catalog/kanban_view.js
+++ b/addons/sale/static/src/js/product_catalog/kanban_view.js
@@ -6,7 +6,7 @@ import { registry } from "@web/core/registry";
 import { ProductCatalogKanbanController } from "./kanban_controller";
 import { ProductCatalogKanbanModel } from "./kanban_model";
 import { ProductCatalogKanbanRenderer } from "./kanban_renderer";
-import { ProductCatalogSearchPanel} from "./search_panel";
+import { ProductCatalogSearchPanel} from "./search/search_panel";
 
 
 export const productCatalogKanbanView = {
diff --git a/addons/sale/static/src/js/product_catalog/search/search_panel.js b/addons/sale/static/src/js/product_catalog/search/search_panel.js
new file mode 100644
index 00000000000..70b43c3366d
--- /dev/null
+++ b/addons/sale/static/src/js/product_catalog/search/search_panel.js
@@ -0,0 +1,56 @@
+/** @odoo-module **/
+
+import { SearchPanel } from "@web/search/search_panel/search_panel";
+import { useState } from "@odoo/owl";
+
+
+export class ProductCatalogSearchPanel extends SearchPanel {
+    setup() {
+        super.setup();
+
+        this.state = useState({
+            ...this.state,
+            sectionOfAttributes: {},
+        });
+    }
+
+    updateActiveValues() {
+        super.updateActiveValues();
+        this.state.sectionOfAttributes = this.buildSection();
+    }
+
+    buildSection() {
+        const values = this.env.searchModel.filters[0].values;
+        let sections = new Map();
+
+        values.forEach(element => {
+            const name = element.display_name;
+            const id = element.id;
+            const count = element.__count;
+
+            if (sections.has(name)) {
+                let currentAttr = sections.get(name);
+                currentAttr.get('ids').push(id);
+                currentAttr.set('count', currentAttr.get('count') + count);
+            } else {
+                let newAttr = new Map();
+                newAttr.set('ids', [id]);
+                newAttr.set('count', count);
+                sections.set(name, newAttr);
+            }
+        });
+
+        return sections;
+    }
+
+    toggleSectionFilterValue(filterId, attrIds, { currentTarget }) {
+        attrIds.forEach(id => {
+            this.toggleFilterValue(filterId, id, { currentTarget });
+        })
+    }
+}
+
+ProductCatalogSearchPanel.subTemplates = {
+    ...SearchPanel.subTemplates,
+    filtersGroup: "sale.ProductCatalogSearchPanel.FiltersGroup",
+}
diff --git a/addons/sale/static/src/js/product_catalog/search/search_panel.xml b/addons/sale/static/src/js/product_catalog/search/search_panel.xml
new file mode 100644
index 00000000000..840a6b6c4c5
--- /dev/null
+++ b/addons/sale/static/src/js/product_catalog/search/search_panel.xml
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<templates id="template" xml:space="preserve">
+    <t t-name="sale.ProductCatalogSearchPanel.FiltersGroup" t-inherit="web.SearchPanel.FiltersGroup" t-inherit-mode="primary">
+        <li t-foreach="[...values.keys()]" position="replace">
+            <li t-foreach="[...this.state.sectionOfAttributes.keys()]" t-as="attrName" t-key="attrName"
+                class="o_search_panel_filter_value list-group-item p-0 mb-1 border-0 o_cursor_pointer"
+                t-att-class="{ 'ps-2' : isChildList }">
+                <t t-set="attrCount" t-value="this.state.sectionOfAttributes.get(attrName).get('count')"/>
+                <t t-set="attrIds" t-value="this.state.sectionOfAttributes.get(attrName).get('ids')"/>
+                <div class="form-check w-100">
+                    <input type="checkbox"
+                           t-attf-id="{{ section.id }}_input_{{ attrName }}"
+                           class="form-check-input"
+                           t-on-click="ev => this.toggleSectionFilterValue(section.id, attrIds, ev)"/>
+                    <label class="o_search_panel_label form-check-label d-flex align-items-center justify-content-between w-100 o_cursor_pointer"
+                           t-attf-for="{{ section.id }}_input_{{ attrName }}"
+                           t-att-title="(group and group.tooltip) or false">
+                        <span class="o_search_panel_label_title text-truncate" t-esc="attrName"/>
+                        <span t-if="section.enableCounters and attrCount gt 0"
+                              class="o_search_panel_counter text-muted mx-2 small"
+                              t-esc="attrCount"/>
+                    </label>
+                </div>
+            </li>
+        </li>
+    </t>
+</templates>
diff --git a/addons/sale/views/product_product_views.xml b/addons/sale/views/product_product_views.xml
index 14743520d40..ba4aeef046a 100644
--- a/addons/sale/views/product_product_views.xml
+++ b/addons/sale/views/product_product_views.xml
@@ -37,6 +37,7 @@
                                          class="d-flex flex-column"/>
                                     <field name="product_template_attribute_value_ids"
                                            widget="many2many_tags"
+                                           domain="[('id', 'in', parent.ids)]"
                                            groups="product.group_product_variant"
                                            options="{'color_field': 'color'}"/>
                                 </div>