diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index d6b84ff52e0..367188a8053 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -39,6 +39,8 @@ $o-social-colors: (
     'youtube': #ff0000,
     'github': #1a1e22,
     'instagram': #cf2872,
+    'whatsapp': #25d366,
+    'pinterest': #C8232C,
 );
 
 $o-theme-figcaption-opacity: 0.6;
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 3637f8d714b..b2b51c732ee 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -199,6 +199,12 @@ font[class*='bg-'] {
         border-top-left-radius: $size;
         border-bottom-right-radius: $size;
     }
+    &.rounded-empty-circle {
+        @extend .rounded-circle;
+        border-width: ceil(1.4 * $border-width);
+        border-style: solid;
+        background: transparent;
+    }
 }
 // Smaller container
 .o_container_small {
diff --git a/addons/website/static/src/snippets/s_share/000.scss b/addons/website/static/src/snippets/s_share/000.scss
index a7e12a2a4da..e02e2711cab 100644
--- a/addons/website/static/src/snippets/s_share/000.scss
+++ b/addons/website/static/src/snippets/s_share/000.scss
@@ -10,16 +10,36 @@
     > a + a {
         margin-left: .4rem;
     }
-    .s_share_facebook {
-        &, &:hover, &:focus { color: #3b5998; }
-    }
-    .s_share_twitter {
-        &, &:hover, &:focus { color: #1da1f2; }
-    }
-    .s_share_linkedin {
-        &, &:hover, &:focus { color: #0077b5; }
-    }
-    .s_share_google {
-        &, &:hover, &:focus { color: #db4437; }
+    &:not(.no_icon_color) {
+        .s_share_facebook {
+            &, &:hover, &:focus {
+                @extend .text-facebook;
+            }
+        }
+        .s_share_twitter {
+            &, &:hover, &:focus {
+                @extend .text-twitter;
+            }
+        }
+        .s_share_linkedin {
+            &, &:hover, &:focus {
+                @extend .text-linkedin;
+            }
+        }
+        .s_share_google {
+            &, &:hover, &:focus {
+                @extend .text-google-plus;
+            }
+        }
+        .s_share_whatsapp {
+            &, &:hover, &:focus {
+                @extend .text-whatsapp;
+            }
+        }
+        .s_share_pinterest {
+            &, &:hover, &:focus {
+                @extend .text-pinterest;
+            }
+        }
     }
 }
diff --git a/addons/website/views/snippets/s_share.xml b/addons/website/views/snippets/s_share.xml
index 6860d0550e6..d0432022c17 100644
--- a/addons/website/views/snippets/s_share.xml
+++ b/addons/website/views/snippets/s_share.xml
@@ -2,7 +2,7 @@
 <odoo>
 
 <template id="s_share" name="Share">
-    <div t-attf-class="s_share #{_classes}">
+    <div t-attf-class="s_share text-left #{_classes}">
         <h4 t-if="not _no_title" class="s_share_title">Share</h4>
         <a href="https://www.facebook.com/sharer/sharer.php?u={url}" t-attf-class="s_share_facebook #{_link_classes}" target="_blank">
             <i t-attf-class="fa fa-1x fa-facebook #{not _link_classes and 'rounded shadow-sm'}"/>
@@ -13,12 +13,38 @@
         <a href="http://www.linkedin.com/shareArticle?mini=true&amp;url={url}&amp;title={title}&amp;" t-attf-class="s_share_linkedin #{_link_classes}" target="_blank">
             <i t-attf-class="fa fa-1x fa-linkedin #{not _link_classes and 'rounded shadow-sm'}"/>
         </a>
+        <a href="whatsapp://send?text={title}&amp;url={url}" t-attf-class="s_share_whatsapp #{_link_classes}" target="_blank">
+            <i t-attf-class="fa fa-1x fa-whatsapp #{not _link_classes and 'rounded shadow-sm'}"/>
+        </a>
+        <a href="http://pinterest.com/pin/create/button/?url={url}&amp;description={title}" t-attf-class="s_share_pinterest #{_link_classes}" target="_blank">
+            <i t-attf-class="fa fa-1x fa-pinterest #{not _link_classes and 'rounded shadow-sm'}"/>
+        </a>
         <a href="mailto:?body={url}&amp;subject={title}" t-attf-class="s_share_email #{_link_classes}">
             <i t-attf-class="fa fa-1x fa-envelope #{not _link_classes and 'rounded shadow-sm'}"/>
         </a>
     </div>
 </template>
 
+<template id="s_share_options" inherit_id="website.snippet_options">
+    <xpath expr="." position="inside">
+        <div data-selector=".s_share">
+            <we-select string="Title Position" data-apply-to=".s_share_title">
+                <we-button data-select-class="d-block">Top</we-button>
+                <we-button data-select-class="">Left</we-button>
+                <we-button data-select-class="d-none">None</we-button>
+            </we-select>
+            <we-select string="Icon Layout" data-apply-to=".fa">
+                <we-button data-select-class="rounded shadow-sm">Square</we-button>
+                <we-button data-select-class="rounded-empty-circle shadow-sm">Circle</we-button>
+                <we-button data-select-class="rounded-circle shadow-sm">Disk</we-button>
+                <we-button data-select-class="m-3">None</we-button>
+            </we-select>
+            <!-- Compatibility, keep reverse logical, don't use `icon_color` -->
+            <we-checkbox string="Icon Layout Color" data-select-class="no_icon_color|"/>
+        </div>
+    </xpath>
+</template>
+
 <template id="assets_snippet_s_share_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_share/000.scss"/>