How To Create a Fixed Social Bar on Your Shopify Store Manually

I’ve written an article to introduce you about the best Shopify apps for creating sticky social media buttons bar. If you are technical or have a custom developer at your disposal, you can follow this article to know how to create a fixed social bar on your Shopify store manually.

1. From your Shopify admin, go to Online Store > Themes.
2. Under the Layout folder, click onto theme.liquid to open file editor.
3. In the online code editor, insert the below code before the closing body tag.
   
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> .icon-bar { position: fixed; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .icon-bar a { display: block; text-align: center; padding: 16px; transition: all 0.3s ease; color: white; font-size: 20px; } .icon-bar a:hover { background-color: #000; } .facebook { background: #3B5998; color: white; } .twitter { background: #55ACEE; color: white; } .google { background: #dd4b39; color: white; } .linkedin { background: #007bb5; color: white; } .youtube { background: #bb0000; color: white; } </style> <div class="icon-bar"> <a href="//www.facebook.com/huraapps/" class="facebook" target="_blank"><i class="fa fa-facebook"></i></a> <a href="//twitter.com/huynhmaianhkiet" class="twitter" target="_blank"><i class="fa fa-twitter"></i></a> <a href="//www.linkedin.com/in/huynhmaianhkiet/" class="linkedin" target="_blank"><i class="fa fa-linkedin"></i></a> <a href="//www.youtube.com/channel/UCYMaWhhln4yhyxajt4HKV9Q" class="youtube" target="_blank"><i class="fa fa-youtube"></i></a> </div>

   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

   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> .icon-bar { position: fixed; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .icon-bar a { display: block; text-align: center; padding: 16px; transition: all 0.3s ease; color: white; font-size: 20px; } .icon-bar a:hover { background-color: #000; } .facebook { background: #3B5998; color: white; } .twitter { background: #55ACEE; color: white; } .google { background: #dd4b39; color: white; } .linkedin { background: #007bb5; color: white; } .youtube { background: #bb0000; color: white; } </style>   <div class="icon-bar"> <a href="//www.facebook.com/huraapps/" class="facebook" target="_blank"><i class="fa fa-facebook"></i></a> <a href="//twitter.com/huynhmaianhkiet" class="twitter" target="_blank"><i class="fa fa-twitter"></i></a> <a href="//www.linkedin.com/in/huynhmaianhkiet/" class="linkedin" target="_blank"><i class="fa fa-linkedin"></i></a> <a href="//www.youtube.com/channel/UCYMaWhhln4yhyxajt4HKV9Q" class="youtube" target="_blank"><i class="fa fa-youtube"></i></a> </div>

4. Click Save and you are done.

LIVE DEMO

Don’t forget to change my URLs to your URLs.

Happy coding!