diff --git a/addons/website_sale/static/src/snippets/s_products_searchbar/options.js b/addons/website_sale/static/src/snippets/s_products_searchbar/options.js
deleted file mode 100644
index d4fa9c1e835..00000000000
--- a/addons/website_sale/static/src/snippets/s_products_searchbar/options.js
+++ /dev/null
@@ -1,65 +0,0 @@
-odoo.define('website_sale.s_products_searchbar_options', function (require) {
-'use strict';
-
-const Dialog = require('web.Dialog');
-const options = require('web_editor.snippets.options');
-
-const { qweb, _t } = require('web.core');
-
-options.registry.ProductsSearchBar = options.Class.extend({
-    xmlDependencies: ['/website_sale/static/src/xml/website_sale.editor.xml'],
-
-    /**
-     * @override
-     */
-    start: function () {
-        this.$searchProductsInput = this.$('.search-query');
-        this.$searchOrderField = this.$('.o_wsale_search_order_by');
-        return this._super.apply(this, arguments);
-    },
-
-    //--------------------------------------------------------------------------
-    // Options
-    //--------------------------------------------------------------------------
-
-    /**
-     * @see this.selectClass for parameters
-     */
-    openSearchbarSettings: function (previewMode, widgetValue, params) {
-        var self = this;
-        new Dialog(this, {
-            title: _t("Products Search Bar"),
-            $content: $(qweb.render('website_sale.dialog.productsSearchBar', {
-                currentOrderBy: this.$searchOrderField.val(),
-                currentLimit: parseInt(this.$searchProductsInput.attr('data-limit')),
-                currentDisplayDescription: this.$searchProductsInput.attr('data-display-description') === 'true',
-                currentDisplayPrice: this.$searchProductsInput.attr('data-display-price') === 'true',
-                currentDisplayImage: this.$searchProductsInput.attr('data-display-image') === 'true',
-            })),
-            buttons: [
-                {
-                    text: _t("Save"),
-                    classes: 'btn-primary',
-                    click: function () {
-                        self.$searchOrderField.attr({
-                            'value': this.$('#order_by').val(),
-                        });
-                        self.$searchProductsInput.attr({
-                            'data-limit': this.$('#use_autocomplete').is(':checked') ? this.$('#limit').val() : 0,
-                            'data-display-description': this.$('#display_description').is(':checked'),
-                            'data-display-price': this.$('#display_price').is(':checked'),
-                            'data-display-image': this.$('#display_image').is(':checked'),
-                        });
-                        self.$target.trigger('content_changed');
-                        this.close();
-                    },
-                },
-                {
-                    text: _t("Discard"),
-                    close: true,
-                },
-            ],
-        }).open();
-    },
-});
-});
diff --git a/addons/website_sale/static/src/xml/website_sale.editor.xml b/addons/website_sale/static/src/xml/website_sale.editor.xml
deleted file mode 100644
index 4cc12eafb1a..00000000000
--- a/addons/website_sale/static/src/xml/website_sale.editor.xml
+++ /dev/null
@@ -1,52 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<templates id="template" xml:space="preserve">
-
-<!-- Products Search Bar settings dialog -->
-<div t-name="website_sale.dialog.productsSearchBar">
-    <div class="form-group">
-        <label for="order_by">Search filter to use <b>by default</b></label>
-        <select class="custom-select" id="order_by">
-            <option value="" t-att-selected="!currentOrderBy ? 'selected' : undefined">Default order</option>
-            <option value="name asc" t-att-selected="currentOrderBy == 'name asc' ? 'selected' : undefined">Order by name (A-Z)</option>
-            <option value="name desc" t-att-selected="currentOrderBy == 'name desc' ? 'selected' : undefined">Order by name (Z-A)</option>
-            <option value="list_price asc" t-att-selected="currentOrderBy == 'list_price asc' ? 'selected' : undefined">Order by price: low to high</option>
-            <option value="list_price desc" t-att-selected="currentOrderBy == 'list_price desc' ? 'selected' : undefined">Order by price: high to low</option>
-        </select>
-    </div>
-    <div class="form-group">
-        <div class="custom-control custom-switch" data-toggle="collapse" data-target="#use_autocomplete_options">
-            <input type="checkbox" class="custom-control-input" id="use_autocomplete" t-att-checked="currentLimit > 0 ? 'checked' : undefined"/>
-            <label class="custom-control-label" for="use_autocomplete">Add product suggestions</label>
-        </div>
-    </div>
-    <div id="use_autocomplete_options" t-attf-class="collapse #{currentLimit > 0 ? 'show' : ''}">
-        <div class="form-group">
-            <label for="limit">Maximum number of products to display</label>
-            <select class="custom-select" id="limit">
-                <option t-foreach="20" t-as="limit"
-                    t-esc="limit + 1" t-att-value="limit + 1"
-                    t-att-selected="currentLimit == (limit + 1) ? 'selected' : undefined"/>
-            </select>
-        </div>
-        <div class="form-group">
-            <div class="custom-control custom-switch">
-                <input type="checkbox" class="custom-control-input" id="display_description" t-att-checked="currentDisplayDescription ? 'checked' : undefined"/>
-                <label class="custom-control-label" for="display_description">Display product <b>description</b> and allow to search in</label>
-            </div>
-        </div>
-        <div class="form-group">
-            <div class="custom-control custom-switch">
-                <input type="checkbox" class="custom-control-input" id="display_price" t-att-checked="currentDisplayPrice ? 'checked' : undefined"/>
-                <label class="custom-control-label" for="display_price">Display product <b>price</b></label>
-            </div>
-        </div>
-        <div class="form-group">
-            <div class="custom-control custom-switch">
-                <input type="checkbox" class="custom-control-input" id="display_image" t-att-checked="currentDisplayImage ? 'checked' : undefined"/>
-                <label class="custom-control-label" for="display_image">Display product <b>image</b></label>
-            </div>
-        </div>
-    </div>
-</div>
-
-</templates>
diff --git a/addons/website_sale/views/snippets/s_products_searchbar.xml b/addons/website_sale/views/snippets/s_products_searchbar.xml
index 7658abe64dc..5a80366b2c9 100644
--- a/addons/website_sale/views/snippets/s_products_searchbar.xml
+++ b/addons/website_sale/views/snippets/s_products_searchbar.xml
@@ -26,9 +26,23 @@
 
 <template id="searchbar_input_snippet_options" inherit_id="website_sale.snippet_options" name="search bar snippet options">
     <xpath expr="." position="inside">
-        <div data-js="ProductsSearchBar"
-            data-selector=".s_wsale_products_searchbar_input">
-            <we-button data-no-preview="true" data-open-searchbar-settings="">Products Search Bar</we-button>
+        <div data-selector=".s_wsale_products_searchbar_input">
+            <we-select string="Order by" id="order_by" data-attribute-name="value" data-apply-to=".o_wsale_search_order_by">
+                <we-button data-select-attribute="">default</we-button>
+                <we-button data-select-attribute="name asc">name (A-Z)</we-button>
+                <we-button data-select-attribute="name desc">name (Z-A)</we-button>
+                <we-button data-select-attribute="list_price asc">price (low to high)</we-button>
+                <we-button data-select-attribute="list_price desc">price (high to low)</we-button>
+            </we-select>
+            <t t-set="unit">products</t>
+            <we-input string="Suggestions" data-name="product_limit_opt" data-attribute-name="limit"
+                      data-apply-to=".search-query" data-select-data-attribute="" t-att-data-unit="unit"/>
+            <we-checkbox string="Description" data-dependencies="product_limit_opt" data-select-data-attribute="true" data-attribute-name="displayDescription"
+                         data-apply-to=".search-query"/>
+            <we-checkbox string="Price" data-dependencies="product_limit_opt" data-select-data-attribute="true" data-attribute-name="displayPrice"
+                         data-apply-to=".search-query"/>
+            <we-checkbox string="Image" data-dependencies="product_limit_opt" data-select-data-attribute="true" data-attribute-name="displayImage"
+                         data-apply-to=".search-query"/>
         </div>
     </xpath>
     <xpath expr="//*[@t-set='so_content_addition_selector']" position="inside">, .s_wsale_products_searchbar_input</xpath>
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index b7ae763cb57..230471ba92c 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -47,7 +47,6 @@
             <script type="text/javascript" src="/website_sale/static/src/js/website_sale.editor.js"></script>
             <script type="text/javascript" src="/website_sale/static/src/js/website_sale_form_editor.js"></script>
             <script type="text/javascript" src="/website_sale/static/src/js/tours/website_sale_shop_frontend.js"></script>
-            <script type="text/javascript" src="/website_sale/static/src/snippets/s_products_searchbar/options.js"></script>
         </xpath>
     </template>