Social media - Add social media buttons

Highlighted
Community Manager
Community Manager
506 29 789

There are two ways you can get social media buttons:

 

  • Option 1
    Get an app that does all of the work. Check out the Social media section of the App Store. Some of our themes from the Theme Store already come with this feature enabled. Check to see if your theme already has a social media button by going to the theme editor and checking the Header, Sidebar, Homepage, and/or Footer menus.

  • Option 2 (Advanced)
    Code the buttons into any theme you want.

For finding Facebook, Pinterest and other social site buttons and icons go to their websites and look for the buttons or use the awesome Icon Finder.

 

 

Adding the buttons

 

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. To get your button on your site we are going to upload the social media icon image to your theme. Click the Assets folder to open it.

    smbutton01.jpg

  4. Click the Add a new asset link.

    smbutton02.jpg

  5. Choose the icons file on your computer and click Upload asset.
  6. Now that the physical button icon is there, we are going to add in the code to make the button work. Click the theme.liquid file to open it in the online code editor.

    smbutton03.jpg

  7. The line you paste in the code depends on where you want the buttons to appear in your theme. Look through the code to find your perfect location. This code example is specifically for Twitter but will also work for Facebook, Pinterest and other social media:

    {{ 'my-twitter-button.png' | asset_url | img_tag | link_to: 'https://twitter.com/iamawesome', 'follow me on twitter' }}

    Alternate button code with HTML:

    <a href="https://twitter.com"><img src="my-button.jpg" alt="Follow on Twitter"/></a>

     

  8. Save your changes.

For more information on theme editing, read our design policy.

TyW | Online Community Manager @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Highlighted
New Member
1 0 0

I used the above and it worked great but the only issue was my button was HUGE - how do I make it smaller? 

0 Likes
Highlighted
New Member
2 0 1

Hi, I tried to do your solution but on my debut theme the icons downloaded from icon finder show up as ugly little pages with a mountain and a cloud (not the icon). The code says jpg but even as I input png I get the same result. Is there a way to fix it so that I get the real icon to show up?

Highlighted
New Member
2 0 0

same for me... there is only a really big icon :)

0 Likes
Highlighted
New Member
2 0 1

Hi, had you managed to resolve this?

0 Likes
Highlighted
New Member
2 0 1

Hi,

1) You need to re-adjust the SVG image size to 20x20px and save it as SVG file again, in a vector image editor such Adobe Illustrator.
2) Copy and paste this code from another social media icon under your Snippets (say for example "icon-facebook.liquid"), into the NEW social media icon, say "icon-linkedin.liquid":

  • <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-facebook" viewBox="0 0 20 20"><path fill="#444" d="svg data"/></svg>
  • <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-linkedin" viewBox="0 0 20 20"><path fill="#444" d="svg data"/></svg>

3) Open the SVG file in your text application and file this d="svg data"; copy and paste this long string of svg data into this under your  NEW social media icon, say "icon-linkedin.liquid":

  • <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-linkedin" viewBox="0 0 20 20"><path fill="#444" d="svg data"/></svg>

It works for me.

Highlighted
New Member
2 0 1
Thank you I’ll try that and let you know how it goes. I appreciate it!
0 Likes
Highlighted
New Member
2 0 0

Hi

Nice insightful guide. 

However,  you had provided the code example specifically for Twitter.

Can you provide the code specifspecifically for whatsapp and instagram please. 

Much appreciated. 

Thank you. 

0 Likes
Highlighted
Excursionist
19 0 2

I'm trying to add Etsy icon but I followed the steps and it's not working. Can you help please?

0 Likes
Highlighted
New Member
3 0 0

I'm just promoting my business pages and I also need to make a button that will show them. Thank you for sharing. I hope that I will be able to configure this function and if I can't, I will have to call a specialist. As for social media, I was lucky that I was able to get new customers thanks to the advertising and interesting posts (photos, videos). But I don't stop there and I want to develop my YouTube channel. To do this, I decided to use the service, you can view their home page. I hope that I will succeed.

0 Likes