Enhancing Your Shopify Store: A Complete Guide to Stylish Social Media Sharing Icons

Elevate your Shopify store's impact by seamlessly integrating social share buttons. In an era where social media is pivotal for brand awareness, website traffic, and ecommerce success, these buttons empower customers to effortlessly share products and content on their social platforms. This not only broadens your reach but also engages new visitors and loyal customers. Unlock the potential of social sharing with quick and easy steps outlined in our blog post, ensuring your store aligns with modern business goals. Maximize visibility, drive traffic, and boost sales through the strategic incorporation of Shopify's social share buttons.

1.  generate social media sharing icons based on the specified settings.
2. Social media icons include Facebook, Instagram, Twitter, Pinterest, Tumblr, Reddit, Vk, WhatsApp, Telegram, and LinkedIn.
3. Each social media icon is a link with an associated SVG icon, and the link directs to the respective sharing URL.

Step 2 Schema Code:

1. The schema defines a type "social_icons" with settings for configuring the display of social media icons.
2. It includes checkboxes for enabling/disabling icons for Facebook, Twitter, Pinterest, Tumblr, Reddit, Vk, WhatsApp, Telegram, LinkedIn, and Instagram.

Styling:

1. The styling section includes CSS rules for the appearance of the sharing icons.
2. Icons are styled with different colors based on the social media platform.
3. Hover effects change the background color to white and rotate the icons.
4. The main-share and parent-share classes provide a centered and styled display for the sharing icons.

Liquid, HTML and CSS code for Social Media Sharing Icons

{% when 'social_icons' %}
 {% assign _share_url = shop.url | append: request.path %}
 {% assign _share_image = product.featured_image | image_url %}
 {% assign _share_descreptoon = product.description | strip_html %}
 <div class="main-share">
 <div class="parent-share">Share</div>
 <div class="sharing">
 {% if block.settings.is_facebook %}
 <a class="sharing-item sharing-facebook" href="https://www.facebook.com/sharer/sharer.php?u={{ _share_url }}"
 target="_blank">
 <svg class="i i-facebook" viewBox="0 0 24 24">
 <path d="M17 14h-3v8h-4v-8H7v-4h3V7a5 5 0 0 1 5-5h3v4h-3q-1 0-1 1v3h4Z"></path>
 </svg>
 </a>
 {% endif %}
 {% if block.settings.is_instagram %}
 <a class="sharing-item sharing-instagram" href="https://www.facebook.com/sharer/sharer.php?u={{ _share_url }}"
 target="_blank">
 <svg class="i i-instagram" viewBox="0 0 24 24">

 <g transform="translate(0.5 0.5)">
 <path d="M12,3C7.589,3,4,6.589,4,11s3.589,8,8,8s8-3.589,8-8S16.411,3,12,3z M12,17c-2.761,0-5-2.239-5-5s2.239-5,5-5
 s5,2.239,5,5S14.761,17,12,17z" fill="none" stroke="currentColor" stroke-linecap="round"
 stroke-linejoin="round"></path>
 <circle cx="17.5" cy="6.5" r="1.5" fill="currentColor"></circle>
 <path d="M17,1H7C3.691,1,1,3.691,1,7v10c0,3.309,2.691,6,6,6h10c3.309,0,6-2.691,6-6V7C23,3.691,20.309,1,17,1z
 M19,17c0,1.104-0.896,2-2,2H7c-1.104,0-2-0.896-2-2V7c0-1.104,0.896-2,2-2h10c1.104,0,2,0.896,2,2V17z" fill="none"
 stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
 </g>
 </svg>
 </a>
 {% endif %}

 {% if block.settings.is_twitter %}
 <a class="sharing-item sharing-twitter"
 href="https://twitter.com/intent/tweet?text={{ _share_url }}&url={{ _share_url }}" target="_blank">
 <svg class="i i-twitter" viewBox="0 0 24 24">
 <path d="m3 21 7.5-7.5m3-3L21 3M8 3H3l13 18h5Z"></path>
 </svg>
 </a>
 {% endif %}
 {% if block.settings.is_pinterest %}
 <a class="sharing-item sharing-pinterest"
 href="https://pinterest.com/pin/create/button/?url={{ _share_url }}&media={{ _share_image }}&description={{ _share_descreptoon }}"
 target="_blank">
 <svg class="i i-pinterest" viewBox="0 0 24 24">
 <circle cx="12" cy="12" r="11"></circle>
 <path d="m8 22 3-11a1 1 0 0 0 5 5.5A6 6 0 1 0 6 12"></path>
 </svg>
 </a>
 {% endif %}

 {% if block.settings.is_tumblr %}
 <a class="sharing-item sharing-tumblr"
 href="https://www.tumblr.com/widgets/share/tool?canonicalUrl={{ _share_url }}&title={{ product.title }}&caption={{ _share_descreptoon }}"
 target="_blank">
 <svg class="i i-tumblr" viewBox="0 0 24 24">
 <path d="M18 17.5V22h-4a5 5 0 0 1-5-5v-7H7V6.5q3.3-.9 3.5-4.5H14v4h4v4h-4v6.5q0 1 1 1Z"></path>
 </svg>
 </a>
 {% endif %}
 {% if block.settings.is_reddit %}
 <a class="sharing-item sharing-reddit"
 href="https://www.reddit.com/submit?url={{ _share_url }}&title={{ product.title }}" target="_blank">
 <svg class="i i-reddit" viewBox="0 0 24 24">
 <circle cx="20" cy="5" r="2"></circle>
 <path
 d="M5 10.5a14 14 0 0 1 14 0 2.4 2.4 0 1 1 2.5 4 9.6 6.6 0 1 1-19 0 2.4 2.4 0 1 1 2.5-4Zm7-1.9 1.5-6.1 4.6 1.7M10 18q2 1 4 0m-5-4h0m6 0h0">
 </path>
 </svg>
 </a>
 {% endif %}
 {% if block.settings.is_vk %}
 <a class="sharing-item sharing-vk" href="http://vk.com/share.php?url={{ _share_url }}" target="_blank">
 <svg class="i i-vk" viewBox="0 0 24 24">
 <rect width="22" height="22" x="1" y="1" rx="5"></rect>
 <path d="M7 8.5a7 8 0 0 0 5 7v-7m5 0Q16 11 13 12q3 1 4 3.5M12 12h1"></path>
 </svg>
 </a>
 {% endif %}
 {% if block.settings.is_whatsapp %}
 <a class="sharing-item sharing-whatsapp" href="https://wa.me/?text={{ _share_url }}" target="_blank">
 <svg class="i i-whatsapp" viewBox="0 0 24 24">
 <circle cx="9" cy="9" r="1"></circle>
 <circle cx="15" cy="15" r="1"></circle>
 <path d="M8 9a7 7 0 0 0 7 7m-9 5.2A11 11 0 1 0 2.8 18L2 22Z"></path>
 </svg>
 </a>
 {% endif %}
 {% if block.settings.is_telegram %}
 <a class="sharing-item sharing-telegram" href="https://t.me/share/url?url={{ _share_url }}&text={{ product.title }}"
 target="_blank">
 <svg class="i i-telegram" viewBox="0 0 24 24">
 <path d="M12.5 16 9 19.5 7 13l-5.5-2 21-8-4 18-7.5-7 4-3"></path>
 </svg>
 </a>
 {% endif %}
 {% if block.settings.is_linkedin %}
 <a class="sharing-item sharing-linkedin" href="https://www.linkedin.com/sharing/share-offsite/?url={{ _share_url }}"
 target="_blank">
 <svg class="i i-linkedin" viewBox="0 0 24 24">
 <circle cx="4" cy="4" r="2"></circle>
 <path d="M2 9h4v12H2Zm20 12h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 12 0Z"></path>
 </svg>
 </a>
 {% endif %}
 </div>
 </div>

<style>
 .sharing {display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sharing-gap, 1.5rem);}
 .sharing-item {transition: background 0.3s, color 0.3s; color: var(--sharing-color, #fff); background-color: var(--sharing-bg, #000); padding: var(--sharing-padding, 0.875rem); border-radius: var(--sharing-radius, 0.5rem); box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.1), 0 2px 5px -1px rgba(0, 0, 0, 0.05);}
 .sharing-item .i {stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; fill: none; transition: transform 0.3s; stroke-width: 2; width: var(--sharing-size, 22px); height: var(--sharing-size, 22px); display: block;}
 .sharing-item:hover {background-color: #fff; --sharing-color: var(--sharing-bg, #000);}
 .sharing-item:hover .i {transform: rotate(360deg);}
 .sharing-facebook {--sharing-bg: #1778F2;}
 .sharing-bluesky {--sharing-bg: #0085ff;}
 .sharing-twitter {--sharing-bg: #55ACEE;}
 .sharing-pinterest {--sharing-bg: #F0002A;}
 .sharing-threads {--sharing-bg: #000000;}
 .sharing-tumblr {--sharing-bg: #35465C;}
 .sharing-reddit {--sharing-bg: #FF4500;}
 .sharing-vk {--sharing-bg: #4376A6;}
 .sharing-whatsapp {--sharing-bg: #4FCE5D;}
 .sharing-telegram {--sharing-bg: #0088CC;}
 .sharing-linkedin {--sharing-bg: #0077B5;}
 .sharing-instagram {--sharing-bg: #E1306C;}
 .sharing-envelope {--sharing-bg: #464EB8;}
 
 .main-share {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; flex-direction: column;}
 .parent-share {margin: 0 20px; font-weight: 800; font-size: 18px;}
</style> 

Schema code for Social Media Sharing Icons

{
 "type":"social_icons",
 "name":"Social Share",
 "limit":1,
 "settings":[
 {
 "type":"checkbox",
 "id":"is_facebook",
 "label":" Facebook"
 },
 {
 "type":"checkbox",
 "id":"is_twitter",
 "label":" Twitter"
 },
 {
 "type":"checkbox",
 "id":"is_pinterest",
 "label":" Pinterest"
 },
 {
 "type":"checkbox",
 "id":"is_tumblr",
 "label":" Tumblr"
 },
 {
 "type":"checkbox",
 "id":"is_reddit",
 "label":" Reddit"
 },
 {
 "type":"checkbox",
 "id":"is_vk",
 "label":" Vk"
 },{
 "type":"checkbox",
 "id":"is_whatsapp",
 "label":" Whatsapp"
 },{
 "type":"checkbox",
 "id":"is_telegram",
 "label":" Telegram"
 },{
 "type":"checkbox",
 "id":"is_linkedin",
 "label":" linkedin"
 },
 {
 "type":"checkbox",
 "id":"is_instagram",
 "label":" Instagram"
 }
 ]
}

Related article :