diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index 618c60aeca6..77eab228d02 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -40,6 +40,7 @@
         'views/snippets/s_alert.xml',
         'views/snippets/s_card.xml',
         'views/snippets/s_share.xml',
+        'views/snippets/s_rating.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 93%
rename from temp_scss
rename to addons/website/static/src/scss/website.scss
index fd74f5bd4b7..d4c3ed9fe4c 100644
--- a/temp_scss
+++ b/addons/website/static/src/scss/website.scss
@@ -944,62 +944,6 @@ table.table_desc tr td {
 }
 
 
-// Rating
-.s_rating {
-    $star: "\f005";
-    $star-o: "\f006";
-    $circle: "\f111";
-    $circle-o: "\f10c";
-    $heart: "\f004";
-    $heart-o: "\f08a";
-    @mixin s_rating_generate_icons($off, $on) {
-        .fa:before {
-            content: $off;
-        }
-        @for $counter from 5 to 0 {
-            &.s_rating_#{$counter} {
-                .fa:nth-of-type(-n+#{$counter}):before {
-                    content: $on;
-                }
-            }
-        }
-    }
-    > .s_rating_stars   { @include s_rating_generate_icons($star-o, $star);     }
-    > .s_rating_squares { @include s_rating_generate_icons($circle-o, $circle); }
-    > .s_rating_hearts  { @include s_rating_generate_icons($heart-o, $heart);   }
-    > .s_rating_bar {
-        .fa {
-            display: none;
-        }
-        .s_rating_bar {
-            display: flex;
-            height: $progress-height;
-            background-color: $gray-300;
-            &:before {
-                content: "";
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                @include transition($progress-bar-transition);
-                @include gradient-striped();
-                background-size: $progress-height $progress-height;
-                background-color: theme-color('primary');
-                animation: progress-bar-stripes $progress-bar-animation-timing;
-            }
-        }
-        @for $counter from 5 to 0 {
-            &.s_rating_#{$counter} {
-                .s_rating_bar:before {
-                    width: percentage($counter/5);
-                }
-            }
-        }
-    }
-    > .s_rating_1x { .fa { font-size: 1em; }; }
-    > .s_rating_2x { .fa { font-size: 2em; }; }
-    > .s_rating_3x { .fa { font-size: 3em; }; }
-}
-
 //
 // Layout
 //
diff --git a/addons/website/static/src/snippets/s_rating/000.scss b/addons/website/static/src/snippets/s_rating/000.scss
new file mode 100644
index 00000000000..c16b99e9c59
--- /dev/null
+++ b/addons/website/static/src/snippets/s_rating/000.scss
@@ -0,0 +1,55 @@
+
+.s_rating {
+    $star: "\f005";
+    $star-o: "\f006";
+    $circle: "\f111";
+    $circle-o: "\f10c";
+    $heart: "\f004";
+    $heart-o: "\f08a";
+    @mixin s_rating_generate_icons($off, $on) {
+        .fa:before {
+            content: $off;
+        }
+        @for $counter from 5 to 0 {
+            &.s_rating_#{$counter} {
+                .fa:nth-of-type(-n+#{$counter}):before {
+                    content: $on;
+                }
+            }
+        }
+    }
+    > .s_rating_stars   { @include s_rating_generate_icons($star-o, $star);     }
+    > .s_rating_squares { @include s_rating_generate_icons($circle-o, $circle); }
+    > .s_rating_hearts  { @include s_rating_generate_icons($heart-o, $heart);   }
+    > .s_rating_bar {
+        .fa {
+            display: none;
+        }
+        .s_rating_bar {
+            display: flex;
+            height: $progress-height;
+            background-color: $gray-300;
+            &:before {
+                content: "";
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                @include transition($progress-bar-transition);
+                @include gradient-striped();
+                background-size: $progress-height $progress-height;
+                background-color: theme-color('primary');
+                animation: progress-bar-stripes $progress-bar-animation-timing;
+            }
+        }
+        @for $counter from 5 to 0 {
+            &.s_rating_#{$counter} {
+                .s_rating_bar:before {
+                    width: percentage($counter/5);
+                }
+            }
+        }
+    }
+    > .s_rating_1x { .fa { font-size: 1em; }; }
+    > .s_rating_2x { .fa { font-size: 2em; }; }
+    > .s_rating_3x { .fa { font-size: 3em; }; }
+}
diff --git a/addons/website/views/snippets/s_rating.xml b/addons/website/views/snippets/s_rating.xml
new file mode 100644
index 00000000000..2b2c9fe8eff
--- /dev/null
+++ b/addons/website/views/snippets/s_rating.xml
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_rating" name="Rating">
+    <div class="s_rating row">
+        <div class="col-lg-12 s_rating_stars s_rating_3 s_rating_1x pt16 pb16">
+            <h4>Quality</h4>
+            <i class="fa fa-1x"/>
+            <i class="fa fa-1x"/>
+            <i class="fa fa-1x"/>
+            <i class="fa fa-1x"/>
+            <i class="fa fa-1x"/>
+            <div class="s_rating_bar"/>
+        </div>
+    </div>
+</template>
+
+<template id="s_rating_options" inherit_id="website.snippet_options">
+    <xpath expr="." position="inside">
+        <div data-selector=".s_rating > div">
+            <we-select string="Icon">
+                <we-button data-select-class="s_rating_stars"><i class="fa fa-fw fa-star"/> Stars</we-button>
+                <we-button data-select-class="s_rating_squares"><i class="fa fa-fw fa-square"/> Squares</we-button>
+                <we-button data-select-class="s_rating_hearts"><i class="fa fa-fw fa-heart"/> Hearts</we-button>
+                <we-button data-select-class="s_rating_bar"><i class="fa fa-fw fa-tasks"/> Progress Bar</we-button>
+            </we-select>
+            <we-select string="Value">
+                <we-button data-select-class="">0</we-button>
+                <we-button data-select-class="s_rating_1">1/5</we-button>
+                <we-button data-select-class="s_rating_2">2/5</we-button>
+                <we-button data-select-class="s_rating_3">3/5</we-button>
+                <we-button data-select-class="s_rating_4">4/5</we-button>
+                <we-button data-select-class="s_rating_5">5/5</we-button>
+            </we-select>
+            <we-select string="Size">
+                <we-button data-select-class="s_rating_1x">Small</we-button>
+                <we-button data-select-class="s_rating_2x">Medium</we-button>
+                <we-button data-select-class="s_rating_3x">Big</we-button>
+            </we-select>
+        </div>
+    </xpath>
+</template>
+
+<template id="assets_snippet_s_rating_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_rating/000.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/temp_xml b/addons/website/views/snippets/snippets.xml
similarity index 97%
rename from temp_xml
rename to addons/website/views/snippets/snippets.xml
index 3c516d68c00..285832c2e3c 100644
--- a/temp_xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -1,20 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 
-<template id="s_rating" name="Rating">
-    <div class="s_rating row">
-        <div class="col-lg-12 s_rating_stars s_rating_3 s_rating_1x pt16 pb16">
-            <h4>Quality</h4>
-            <i class="fa fa-1x"/>
-            <i class="fa fa-1x"/>
-            <i class="fa fa-1x"/>
-            <i class="fa fa-1x"/>
-            <i class="fa fa-1x"/>
-            <div class="s_rating_bar"/>
-        </div>
-    </div>
-</template>
-
 <template id="s_btn" name="Button">
     <div class="s_btn text-center pt16 pb16" data-name="Buttons">
         <a href="#" class="btn btn-primary">Read more</a>
@@ -749,29 +735,6 @@
         </we-select>
     </div>
 
-    <!-- STYLES | .s_rating -->
-    <div data-selector=".s_rating > div">
-        <we-select string="Icon">
-            <we-button data-select-class="s_rating_stars"><i class="fa fa-fw fa-star"/> Stars</we-button>
-            <we-button data-select-class="s_rating_squares"><i class="fa fa-fw fa-square"/> Squares</we-button>
-            <we-button data-select-class="s_rating_hearts"><i class="fa fa-fw fa-heart"/> Hearts</we-button>
-            <we-button data-select-class="s_rating_bar"><i class="fa fa-fw fa-tasks"/> Progress Bar</we-button>
-        </we-select>
-        <we-select string="Value">
-            <we-button data-select-class="">0</we-button>
-            <we-button data-select-class="s_rating_1">1/5</we-button>
-            <we-button data-select-class="s_rating_2">2/5</we-button>
-            <we-button data-select-class="s_rating_3">3/5</we-button>
-            <we-button data-select-class="s_rating_4">4/5</we-button>
-            <we-button data-select-class="s_rating_5">5/5</we-button>
-        </we-select>
-        <we-select string="Size">
-            <we-button data-select-class="s_rating_1x">Small</we-button>
-            <we-button data-select-class="s_rating_2x">Medium</we-button>
-            <we-button data-select-class="s_rating_3x">Big</we-button>
-        </we-select>
-    </div>
-
     <!-- STYLES | .s_hr -->
     <div data-selector=".s_hr" data-target="hr">
         <we-select string="Thickness">