How to add floated social media buttons to Shopify

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

<!-- 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 %}

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

</div>

<a href="{{ section.settings.twitter_link }}" target="_blank">Follow us!</a>

</div>

<a href="{{ section.settings.linkedin_link }}" target="_blank">Connect Us</a>

</div>

<a href="{{ section.settings.instagram_link }}" target="_blank">Follow us!</a>

</div>

</div>

<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>

{% 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.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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.

{% section 'shopifya-socialmedia-button' %}

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

4 thoughts on “How to add floated social media buttons to Shopify”

S April 20, 2021 at 8:49 pm

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.

1. admin April 22, 2021 at 5:39 pm
  
  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; with left: 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/”
  }
  
2. 1. Sammy April 22, 2021 at 8:22 pm
    
    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?
    
  2. 1. admin April 25, 2021 at 7:54 am
      
      Ok, We Will write a new Article with more features and easily adjustable in different locations on the website.

How to add floated social media buttons to Shopify

Add floated social media buttons

4 thoughts on “How to add floated social media buttons to Shopify”

Leave a Reply Cancel reply

Shopifya is a complete help for your store

Useful Links

Legal