diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss
index fd01858f398..7b5798697f0 100644
--- a/addons/website/static/src/scss/website.edit_mode.scss
+++ b/addons/website/static/src/scss/website.edit_mode.scss
@@ -215,6 +215,18 @@ body.editor_enable.editor_has_snippets {
     }
 }
 
+// s_countdown preview classes
+body.editor_enable {
+    .s_countdown {
+        .s_countdown_enable_preview {
+            display: initial !important;
+        }
+        .s_countdown_none {
+            display: none !important;
+        }
+    }
+}
+
 //s_dynamic_snippet
 body.editor_enable {
     .s_dynamic {
diff --git a/addons/website/static/src/snippets/s_countdown/options.js b/addons/website/static/src/snippets/s_countdown/options.js
index cec5a29e26a..75f8ac9d2e4 100644
--- a/addons/website/static/src/snippets/s_countdown/options.js
+++ b/addons/website/static/src/snippets/s_countdown/options.js
@@ -12,6 +12,16 @@ options.registry.countdown = options.Class.extend({
         'click .toggle-edit-message': '_onToggleEndMessageClick',
     }),
 
+    /**
+     * Remove any preview classes, if present.
+     *
+     * @override
+     */
+    cleanForSave: async function () {
+        this.$target.find('.s_countdown_canvas_wrapper').removeClass("s_countdown_none");
+        this.$target.find('.s_countdown_end_message').removeClass("s_countdown_enable_preview");
+    },
+
     //--------------------------------------------------------------------------
     // Options
     //--------------------------------------------------------------------------
@@ -87,9 +97,9 @@ options.registry.countdown = options.Class.extend({
      */
     updateUIEndMessage: function () {
         this.$target.find('.s_countdown_canvas_wrapper')
-            .toggleClass("d-none", this.showEndMessage === true && this.$target.hasClass("hide-countdown"));
+            .toggleClass("s_countdown_none", this.showEndMessage === true && this.$target.hasClass("hide-countdown"));
         this.$target.find('.s_countdown_end_message')
-            .toggleClass("d-none", !this.showEndMessage);
+            .toggleClass("s_countdown_enable_preview", this.showEndMessage === true);
     },
 
     //--------------------------------------------------------------------------
diff --git a/addons/website/static/tests/tours/snippet_countdown.js b/addons/website/static/tests/tours/snippet_countdown.js
new file mode 100644
index 00000000000..580565e744d
--- /dev/null
+++ b/addons/website/static/tests/tours/snippet_countdown.js
@@ -0,0 +1,56 @@
+/** @odoo-module */
+
+import tour from 'web_tour.tour';
+import wTourUtils from 'website.tour_utils';
+
+tour.register('snippet_countdown', {
+    test: true,
+    url: '/?enable_editor=1',
+}, [
+    wTourUtils.dragNDrop({id: 's_countdown', name: 'Countdown'}),
+    wTourUtils.clickOnSnippet({id: 's_countdown', name: 'Countdown'}),
+    wTourUtils.changeOption('countdown', 'we-select:has([data-end-action]) we-toggler', 'end action'),
+    wTourUtils.changeOption('countdown', 'we-button[data-end-action="message"]', 'end action'),
+    wTourUtils.changeOption('countdown', 'we-button.toggle-edit-message', 'message preview'),
+    // The next two steps check that the end message does not disappear when a
+    // widgets_start_request is triggered.
+    {
+        content: "Hover an option which has a preview",
+        trigger: '[data-select-class="o_half_screen_height"]',
+        run: function (actions) {
+            this.$anchor.trigger('mouseover');
+            this.$anchor.trigger('mouseenter');
+        },
+    },
+    {
+        content: "Check that the countdown message is still displayed",
+        trigger: '.s_countdown .s_picture',
+        run: () => {
+            // Just a visibility check
+
+            // Also make sure the mouseout and mouseleave are triggered so that
+            // next steps make sense.
+            // TODO the next steps are not actually testing anything without
+            // it and the mouseout and mouseleave make sense but really it
+            // should not be *necessary* to simulate those for the editor flow
+            // to make some sense.
+            const $previousAnchor = $('[data-select-class="o_half_screen_height"]');
+            $previousAnchor.trigger('mouseout');
+            $previousAnchor.trigger('mouseleave');
+        },
+    },
+    // Next, we change the end action to message and no countdown while the edit
+    // message toggle is still activated. It should hide the countdown
+    wTourUtils.changeOption('countdown', 'we-select:has([data-end-action]) we-toggler', 'end action'),
+    wTourUtils.changeOption('countdown', 'we-button[data-end-action="message_no_countdown"]', 'end action'),
+    {
+        content: "Check that the countdown is not displayed",
+        trigger: '.s_countdown:has(.s_countdown_canvas_wrapper:not(:visible))',
+        run: () => null, // Just a visibility check
+    },
+    {
+        content: "Check that the message is still displayed",
+        trigger: '.s_countdown .s_picture',
+        run: () => null, // Just a visibility check
+    },
+]);
diff --git a/addons/website/tests/test_snippets.py b/addons/website/tests/test_snippets.py
index 2d37b3f5ddf..5c0f2dad7f3 100644
--- a/addons/website/tests/test_snippets.py
+++ b/addons/website/tests/test_snippets.py
@@ -28,3 +28,6 @@ class TestSnippets(odoo.tests.HttpCase):
         ]
         snippets_names = ','.join([el.attrib['data-snippet'] for el in data_snippet_els if el.attrib['data-snippet'] not in blacklist])
         self.start_tour("/?enable_editor=1&snippets_names=%s" % snippets_names, "snippets_all_drag_and_drop", login='admin', timeout=300)
+
+    def test_04_countdown_preview(self):
+        self.start_tour("/?enable_editor=1", "snippet_countdown", login='admin')