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:

  1. From your Shopify Admin Navigate to Online store > Theme > Actions >Edit Code .
shopify admin
  1. In online Shopify code editor go to section and click on Add new section, Name new section “shopifya-socialmedia-button
create section image
  1. Paste this code and save it
  1. 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.
add fontawesome cdn ss

Now include Created section to the theme, add this code just under the header includes section or above the footer.

include section ss
  1. 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

demo link. password:12345

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

  1. 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. 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?

Leave a Reply

Your email address will not be published. Required fields are marked *