diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index e1b876e3ada..5d1bd417c6b 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -376,3 +376,34 @@ $o-theme-font-configs: (
         'url': 'Arvo:300,300i,400,400i,700,700i',
     ),
 ) !default;
+
+//------------------------------------------------------------------------------
+// Mixins
+//------------------------------------------------------------------------------
+
+@mixin o-ribbon-right() {
+    @include o-position-absolute($top: 0, $right: 0);
+    padding: 0.5rem $ribbon-padding;
+    // 0.708 is 1 - cos(45deg)
+    // Transforms are applied right-to-left
+    // Cannot use matrix because of the use of % values.
+    transform: translateX(calc(-0.708 * (100% - #{2 * $ribbon-padding}))) rotate(45deg) translateX(calc(100% - #{$ribbon-padding}));
+    transform-origin: top right;
+};
+
+@mixin o-ribbon-left() {
+    @include o-position-absolute($top: 0, $left: 0);
+    padding: 0.5rem $ribbon-padding;
+    transform: translateX(calc(0.708 * (100% - #{2 * $ribbon-padding}) - 100%)) rotate(-45deg) translateX($ribbon-padding);
+    transform-origin: top right;
+};
+
+@mixin o-tag-right() {
+    @include o-position-absolute($top: 0, $right: 0);
+    padding: 0.25rem 1rem;
+};
+
+@mixin o-tag-left() {
+    @include o-position-absolute($top: 0, $left: 0);
+    padding: 0.25rem 1rem;
+};
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 80cfed35889..bf42f2610d7 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -1365,6 +1365,7 @@ header {
     }
 }
 
+// Ribbons
 $ribbon-padding: 100px;
 .o_ribbon {
     margin: 0;
@@ -1376,30 +1377,19 @@ $ribbon-padding: 100px;
 }
 
 .o_ribbon_right {
-    @include o-position-absolute($top: 0, $right: 0);
-    padding: 0.5rem $ribbon-padding;
-    // 0.708 is 1 - cos(45deg)
-    // Transforms are applied right-to-left
-    // Cannot use matrix because of the use of % values.
-    transform: translateX(calc(-0.708 * (100% - #{2 * $ribbon-padding}))) rotate(45deg) translateX(calc(100% - #{$ribbon-padding}));
-    transform-origin: top right;
+    @include o-ribbon-right();
 }
 
 .o_ribbon_left {
-    @include o-position-absolute($top: 0, $left: 0);
-    padding: 0.5rem $ribbon-padding;
-    transform: translateX(calc(0.708 * (100% - #{2 * $ribbon-padding}) - 100%)) rotate(-45deg) translateX($ribbon-padding);
-    transform-origin: top right;
+    @include o-ribbon-left();
 }
 
 .o_tag_right {
-    @include o-position-absolute($top: 0, $right: 0);
-    padding: 0.25rem 1rem;
+    @include o-tag-right();
 }
 
 .o_tag_left {
-    @include o-position-absolute($top: 0, $left: 0);
-    padding: 0.25rem 1rem;
+    @include o-tag-left();
 }
 
 // Cookies Bar
diff --git a/addons/website_sale/i18n/website_sale.pot b/addons/website_sale/i18n/website_sale.pot
index af08e16456b..d737dd516af 100644
--- a/addons/website_sale/i18n/website_sale.pot
+++ b/addons/website_sale/i18n/website_sale.pot
@@ -2206,7 +2206,7 @@ msgstr ""
 
 #. module: website_sale
 #: model_terms:ir.ui.view,arch_db:website_sale.snippet_options
-msgid "Right"
+msgid "Right (only on grid view)"
 msgstr ""
 
 #. module: website_sale
diff --git a/addons/website_sale/static/src/scss/website_sale.scss b/addons/website_sale/static/src/scss/website_sale.scss
index 982a5aa4e26..0eb2ed1115d 100644
--- a/addons/website_sale/static/src/scss/website_sale.scss
+++ b/addons/website_sale/static/src/scss/website_sale.scss
@@ -278,6 +278,12 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
                         background-color: $white !important;
                     }
                 }
+                .o_ribbon_right {
+                    @include o-ribbon-left();
+                }
+                .o_tag_right {
+                    @include o-tag-left();
+                }
             }
         }
     }
diff --git a/addons/website_sale/views/snippets/snippets.xml b/addons/website_sale/views/snippets/snippets.xml
index 22513b2e09f..fa6e7ca6c0b 100644
--- a/addons/website_sale/views/snippets/snippets.xml
+++ b/addons/website_sale/views/snippets/snippets.xml
@@ -81,7 +81,7 @@
                 </we-select>
                 <we-select string="⌙ Position">
                     <we-button data-set-ribbon-position="left">Left</we-button>
-                    <we-button data-set-ribbon-position="right">Right</we-button>
+                    <we-button data-set-ribbon-position="right">Right (only on grid view)</we-button>
                 </we-select>
             </div>