diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index 81a76ff5a1b..ab0fa13769f 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -37,6 +37,7 @@
         'views/snippets/s_three_columns.xml',
         'views/snippets/s_picture.xml',
         'views/snippets/s_carousel.xml',
+        'views/snippets/s_alert.xml',
         'views/website_views.xml',
         'views/website_visitor_views.xml',
         'views/res_config_settings_views.xml',
diff --git a/temp_scss b/addons/website/static/src/scss/website.scss
similarity index 98%
rename from temp_scss
rename to addons/website/static/src/scss/website.scss
index 53948ebfbaf..423049beec8 100644
--- a/temp_scss
+++ b/addons/website/static/src/scss/website.scss
@@ -417,38 +417,6 @@ table.table_desc tr td {
 }
 
 
-// Alert
-.s_alert {
-    margin: $grid-gutter-width/2 0;
-    border: 1px solid;
-    border-radius: 0.25rem;
-    p, ul, ol {
-        &:last-child {
-            margin-bottom: 0;
-        }
-    }
-    &_sm {
-        padding: $grid-gutter-width/3;
-        font-size: $font-size-sm;
-    }
-    &_md {
-        padding: $grid-gutter-width/2;
-        font-size: $font-size-base;
-    }
-    &_lg {
-        padding: $grid-gutter-width;
-        font-size: $font-size-lg;
-    }
-    &_icon {
-        float: left;
-        margin-right: 10px;
-    }
-    &_content {
-        overflow: hidden;
-    }
-}
-
-
 // Comparisons
 .s_comparisons {
     .card-body {
diff --git a/addons/website/static/src/snippets/s_alert/000.scss b/addons/website/static/src/snippets/s_alert/000.scss
new file mode 100644
index 00000000000..7a6fd02f076
--- /dev/null
+++ b/addons/website/static/src/snippets/s_alert/000.scss
@@ -0,0 +1,30 @@
+
+.s_alert {
+    margin: $grid-gutter-width/2 0;
+    border: 1px solid;
+    border-radius: 0.25rem;
+    p, ul, ol {
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+    &_sm {
+        padding: $grid-gutter-width/3;
+        font-size: $font-size-sm;
+    }
+    &_md {
+        padding: $grid-gutter-width/2;
+        font-size: $font-size-base;
+    }
+    &_lg {
+        padding: $grid-gutter-width;
+        font-size: $font-size-lg;
+    }
+    &_icon {
+        float: left;
+        margin-right: 10px;
+    }
+    &_content {
+        overflow: hidden;
+    }
+}
diff --git a/addons/website/views/snippets/s_alert.xml b/addons/website/views/snippets/s_alert.xml
new file mode 100644
index 00000000000..2b917a3dbad
--- /dev/null
+++ b/addons/website/views/snippets/s_alert.xml
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_alert" name="Alert">
+    <div class="s_alert s_alert_md alert-delta w-100 clearfix">
+        <i class="fa fa-2x fa-info-circle s_alert_icon"/>
+        <div class="s_alert_content">
+            <p>Explain the benefits you offer. <br/>Don't write about products or services here, write about solutions.</p>
+        </div>
+    </div>
+</template>
+
+<template id="s_alert_options" inherit_id="website.snippet_options">
+    <xpath expr="." position="inside">
+        <div data-selector=".s_alert">
+            <we-colorpicker string="Color"
+                data-select-style="true"
+                data-css-property="background-color"
+                data-color-prefix="alert-"/>
+        </div>
+
+        <div data-selector=".s_alert">
+            <we-select string="Size">
+                <we-button data-select-class="s_alert_sm">Small</we-button>
+                <we-button data-select-class="s_alert_md">Medium</we-button>
+                <we-button data-select-class="s_alert_lg">Large</we-button>
+            </we-select>
+        </div>
+    </xpath>
+</template>
+
+<template id="assets_snippet_s_alert_css_000" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_alert/000.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/temp_xml b/addons/website/views/snippets/snippets.xml
similarity index 98%
rename from temp_xml
rename to addons/website/views/snippets/snippets.xml
index dafc8051b52..195d41475b1 100644
--- a/temp_xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -1,15 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 
-<template id="s_alert" name="Alert">
-    <div class="s_alert s_alert_md alert-delta w-100 clearfix">
-        <i class="fa fa-2x fa-info-circle s_alert_icon"/>
-        <div class="s_alert_content">
-            <p>Explain the benefits you offer. <br/>Don't write about products or services here, write about solutions.</p>
-        </div>
-    </div>
-</template>
-
 <template id="s_card" name="Card">
     <div class="s_card card bg-white w-100">
         <h4 class="card-header">Feature Title</h4>
@@ -770,14 +761,6 @@
             data-color-prefix="bg-"/>
     </div>
 
-    <!-- COLOR | .s_alert -->
-    <div data-selector=".s_alert">
-        <we-colorpicker string="Color"
-            data-select-style="true"
-            data-css-property="background-color"
-            data-color-prefix="alert-"/>
-    </div>
-
     <!-- H-ALIGN | .s_btn -->
     <div data-selector=".s_btn, .s_share">
         <we-select string="Alignment">
@@ -787,14 +770,6 @@
         </we-select>
     </div>
 
-    <div data-selector=".s_alert">
-        <we-select string="Size">
-            <we-button data-select-class="s_alert_sm">Small</we-button>
-            <we-button data-select-class="s_alert_md">Medium</we-button>
-            <we-button data-select-class="s_alert_lg">Large</we-button>
-        </we-select>
-    </div>
-
     <div data-selector=".s_alert, .s_card">
         <we-select string="Width">
             <we-button data-select-class="w-25">25%</we-button>