Social media is an amazingly significant apparatus for advancing your advertising content. Social media is utilized with the point of making leads, boosting their deals, and spreading brand awareness digitally.
In this article, you will learn how you can add floated social media button to your Shopify store.
Add floated social media buttons
Follow these steps:
- From your Shopify Admin Navigate to Online store > Theme > Actions >Edit Code .

- In online Shopify code editor go to section and click on Add new section, Name new section “shopifya-socialmedia-button“

- Paste this code and save it
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
<!-- Floating Social Media bar by shopifya.com Starts --> <div class="floattedbar"> <div class="float-sm"> <div class="fl-fl float-fb"> <i class="fa fa-facebook"></i> <a href="{{ section.settings.facebook_link }}" target="_blank"> Like us!</a> </div> <div class="fl-fl float-tw"> <i class="fa fa-twitter"></i> <a href="{{ section.settings.twitter_link }}" target="_blank">Follow us!</a> </div> <div class="fl-fl float-rs"> <i class="fa fa-linkedin"></i> <a href="{{ section.settings.linkedin_link }}" target="_blank">Connect Us</a> </div> <div class="fl-fl float-ig"> <i class="fa fa-instagram"></i> <a href="{{ section.settings.instagram_link }}" target="_blank">Follow us!</a> </div> <div class="fl-fl float-pn"> <i class="fa fa-pinterest"></i> <a href="{{ section.settings.pinterest_link }}" target="_blank">Pin us!</a> </div> </div> </div> <!-- Floating Social Media barby shopifya.com Ends --> <style> /* Floating Social Media Bar Style Starts Here */ .fl-fl { background: #000000; text-transform: uppercase; letter-spacing: 3px; padding: 4px; width: 190px; position: fixed; right: -135px; z-index: 1000; font: normal normal 10px Arial; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; } .fa { font-size: 20px; color: #fff; padding: 10px 0; width: 40px; margin-left: 8px; } .fl-fl:hover { right: 0; } .fl-fl a { color: #fff !important; text-decoration: none; text-align: center; line-height: 43px!important; vertical-align: top!important; } .float-fb { top: 160px; } .float-tw { top: 215px; } .float-rs { top: 270px; } .float-ig { top: 325px; } .float-pn { top: 380px; } </style> <!-- Floating Social Media Bar Style Ends Here --> {% schema %} { "name": "SocialBar by shopifya.com", "settings": [ { "id": "facebook_link", "type": "text", "label": "Facebook Acount link", "default": "https://www.facebook.com/Shopifya" }, { "id": "twitter_link", "type": "text", "label": "Twitter Acount link", "default": "https://twitter.com/shopifya_" }, { "id": "linkedin_link", "type": "text", "label": "LinkedIn Acount link", "default": "https://www.linkedin.com/in/shopifya/" }, { "id": "instagram_link", "type": "text", "label": "Instagram Acount link", "default": "https://www.instagram.com/shopifya_official/" }, { "id": "pinterest_link", "type": "text", "label": "Pinterest Acount link", "default": "https://www.pinterest.com/shopifya_/" } ] } {% endschema %} |
- Section is created now from Layout open theme.liquid first add fontawesome cdn to theme and theme include a section in the theme file, add this fontawesome CDN in theme’s
<head>
tag.
1 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> |

Now include Created section to the theme, add this code just under the header includes section or above the footer.
1 |
{% section 'shopifya-socialmedia-button' %} |

- Save it, You’re done, Now you can add your social media links from customize section, go back to Shopify admin and navigate Online store > theme> customize. select Socialbar by shopifya.com section and add your Social media links

demo link. password:12345
Great tutorial, looks great on my website, was wondering though if theirs anyway to have on the left side of page instead of right & if theirs anyway to remove the Linked In button? Any help appreciated.
Hi S…,
Thanks for your appreciation, We will be happy to help you.
To mo these floated icons on the left side follow these steps:
i- in step 3 where code for paste available, just go to line no#38.
ii- replace this code
right: -135px;
withleft: 0px;
———–
To remove the LinkedIn section just fid and delete those two codes:
1-
line #12 to #15
2-,
{
“id”: “linkedin_link”,
“type”: “text”,
“label”: “LinkedIn Acount link”,
“default”: “https://www.linkedin.com/in/shopifya/”
}
Thank you for your help but unfortunately if you change the code as advised – ‘code right: -135px; with left: 0px;’ then this does move it all to the left but the social media icon no longer pop out to show wording when hovered over they are just static & the social icon and wording sticks to far out on to web page, & whilst removing the two pieces of code to remove the linked in section does remove it, it also leaves a big gap in between the twitter & instagram icon! Any ideas how to resolve?
Ok, We Will write a new Article with more features and easily adjustable in different locations on the website.