diff --git a/addons/website_sale/static/src/js/website_sale.editor.js b/addons/website_sale/static/src/js/website_sale.editor.js
index 608f6c632b6..ef24939829b 100644
--- a/addons/website_sale/static/src/js/website_sale.editor.js
+++ b/addons/website_sale/static/src/js/website_sale.editor.js
@@ -380,6 +380,15 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({
         // Ribbons may have been edited or deleted in another products' option, need to make sure they're up to date
         this.rerender = true;
     },
+    /**
+     * @override
+     */
+    onBlur: function () {
+        // Since changes will not be saved unless they are validated, reset the
+        // previewed ribbon onBlur to communicate that to the user
+        this._resetRibbonDummy();
+        this._toggleEditingUI(false);
+    },
 
     //--------------------------------------------------------------------------
     // Options
@@ -400,6 +409,11 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({
      * @see this.selectClass for params
      */
     async setRibbon(previewMode, widgetValue, params) {
+        if (previewMode === 'reset') {
+            widgetValue = this.prevRibbonId;
+        } else {
+            this.prevRibbonId = this.$target[0].dataset.ribbonId;
+        }
         this.$target[0].dataset.ribbonId = widgetValue;
         this.trigger_up('set_product_ribbon', {
             templateId: this.productTemplateID,
@@ -420,6 +434,7 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({
             $(`[data-ribbon-id="${widgetValue}"]`).each((index, product) => delete product.dataset.ribbonId);
         }
         this._resetRibbonDummy();
+        this._toggleEditingUI(false);
     },
     /**
      * @see this.selectClass for params
@@ -608,6 +623,8 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({
     _toggleEditingUI(state) {
         this.$el.find('[data-name="ribbon_options"]').toggleClass('d-none', state);
         this.$el.find('[data-name="ribbon_customize_opt"]').toggleClass('d-none', !state);
+        this.$('.o_ribbon:not(.o_wsale_ribbon_dummy)').toggleClass('d-none', state);
+        this.$ribbon.toggleClass('d-none', !state);
     },
     /**
      * Creates a copy of current ribbon to manipulate for edition/creation.
@@ -618,7 +635,8 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({
         if (this.$ribbon) {
             this.$ribbon.remove();
         }
-        this.$ribbon = this.$('.o_ribbon').clone().addClass('d-none o_wsale_ribbon_dummy').appendTo(this.$target);
+        const $original = this.$('.o_ribbon');
+        this.$ribbon = $original.clone().addClass('d-none o_wsale_ribbon_dummy').appendTo($original.parent());
     },
 
     //--------------------------------------------------------------------------
diff --git a/addons/website_sale/views/snippets/snippets.xml b/addons/website_sale/views/snippets/snippets.xml
index 8270be6aa3d..22513b2e09f 100644
--- a/addons/website_sale/views/snippets/snippets.xml
+++ b/addons/website_sale/views/snippets/snippets.xml
@@ -60,7 +60,7 @@
             </div>
 
             <we-row data-name="ribbon_options">
-                <we-select string="Ribbon" data-no-preview="true" class="o_wsale_ribbon_select">
+                <we-select string="Ribbon" class="o_wsale_ribbon_select">
                     <we-button data-set-ribbon="" data-name="no_ribbon_opt">None</we-button>
                     <!-- Ribbons are filled in JS -->
                 </we-select>
@@ -69,12 +69,12 @@
             </we-row>
             <div class="d-none" data-name="ribbon_customize_opt">
                 <we-row string="Ribbon">
-                    <we-input data-set-ribbon-html="" class="o_we_large_input" data-apply-to=".o_wsale_ribbon_dummy" data-no-preview="true"/>
+                    <we-input data-set-ribbon-html="" class="o_we_large_input" data-apply-to=".o_wsale_ribbon_dummy"/>
                     <we-button class="fa fa-check" data-save-ribbon="" title="Validate" data-no-preview="true"/>
                     <we-button class="fa fa-trash" data-delete-ribbon="" title="Delete" data-no-preview="true"/>
                 </we-row>
-                <we-colorpicker string="⌙ Background" title="" data-select-style="" data-apply-to=".o_wsale_ribbon_dummy" data-css-property="background-color" data-color-prefix="bg-" data-no-preview="true"/>
-                <we-colorpicker string="⌙ Text" title="" data-select-style="" data-apply-to=".o_wsale_ribbon_dummy" data-css-property="color" data-no-preview="true"/>
+                <we-colorpicker string="⌙ Background" title="" data-select-style="" data-apply-to=".o_wsale_ribbon_dummy" data-css-property="background-color" data-color-prefix="bg-"/>
+                <we-colorpicker string="⌙ Text" title="" data-select-style="" data-apply-to=".o_wsale_ribbon_dummy" data-css-property="color"/>
                 <we-select string="⌙ Mode">
                     <we-button data-set-ribbon-mode="ribbon">Slanted</we-button>
                     <we-button data-set-ribbon-mode="tag">Tag</we-button>