diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.js b/addons/website/static/src/client_actions/website_preview/website_preview.js
index 891624571fe..1f84b1ea21c 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.js
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.js
@@ -187,16 +187,22 @@ export class WebsitePreview extends Component {
         return host !== window.location.host || (pathname && (backendRoutes.includes(pathname) || pathname.startsWith('/@/')));
     }
 
-    _onPageLoaded() {
-        this.iframe.el.contentWindow.addEventListener('beforeunload', this._onPageUnload.bind(this));
-
-        // This replaces the browser url (/web#action=website...) with
-        // the iframe's url (it is clearer for the user).
+    /**
+     * This replaces the browser url (/web#action=website...) with
+     * the iframe's url (it is clearer for the user).
+     */
+    _replaceBrowserUrl() {
         const currentUrl = new URL(this.iframe.el.contentDocument.location.href);
         currentUrl.pathname = `/@${currentUrl.pathname}`;
         this.currentTitle = this.iframe.el.contentDocument.title;
         history.replaceState({}, this.currentTitle, currentUrl.href);
         this.title.setParts({ action: this.currentTitle });
+    }
+
+    _onPageLoaded() {
+        this.iframe.el.contentWindow.addEventListener('beforeunload', this._onPageUnload.bind(this));
+        this._replaceBrowserUrl();
+        this.iframe.el.contentWindow.addEventListener('hashchange', this._replaceBrowserUrl.bind(this));
 
         this.websiteService.pageDocument = this.iframe.el.contentDocument;
 
diff --git a/addons/website_sale/static/src/js/website_sale.js b/addons/website_sale/static/src/js/website_sale.js
index 6d25860a9af..514a88ef80e 100644
--- a/addons/website_sale/static/src/js/website_sale.js
+++ b/addons/website_sale/static/src/js/website_sale.js
@@ -326,7 +326,7 @@ publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(VariantMixin, car
         var attributeIds = _.map($attributes, function (elem) {
             return $(elem).data('value_id');
         });
-        history.replaceState(undefined, undefined, '#attr=' + attributeIds.join(','));
+        window.location.hash = 'attr=' + attributeIds.join(',');
     },
     /**
      * Set the checked values active.
@@ -784,7 +784,7 @@ publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(VariantMixin, car
                 }
             }
             if (dataValueIds.length) {
-                history.replaceState(undefined, undefined, `#attr=${dataValueIds.join(',')}`);
+                window.location.hash = `attr=${dataValueIds.join(',')}`;
             }
         }
         this._applyHash();
@@ -957,7 +957,7 @@ publicWidget.registry.websiteSaleCarouselProduct = publicWidget.Widget.extend({
     /**
      * Center the selected indicator to scroll the indicators list when it
      * overflows.
-     * 
+     *
      * @private
      * @param {Event} ev
      */