Social media - Add social media icons via Assets

[TyW]

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of HTML, CSS, JavaScript, and Liquid is required. Consider hiring a Shopify Expert if you aren't comfortable doing the steps in the tutorial.

---

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.
  
  Note: This method may provide addition support options compared to coding this yourself. If you anticipate needing assistance consider an app! 
  
  
• 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.
   
   
   
   
4. Click the Add a new asset link.
   
   
   
   
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.
   
   
   
   
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.

[TammyTaz]

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

[abraham323]

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?

[thilonieke]

same for me... there is only a really big icon 🙂

[eiizumidesign]

Hi, had you managed to resolve this?

[eiizumidesign]

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.

[abraham323]

Thank you I’ll try that and let you know how it goes. I appreciate it!

[savage21]

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. 

[madari21]

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

[quiqcorp]

I solved this by:

1. grabbing the social icon png that you want like https://www.iconfinder.com/search/?q=facebook
2. upload it to your files and copy the link, use that as the image source

     {%- endif -%}

            <li class="social-icons__item">
              <a class="social-icons__link" href="https://www.facebook.com/Rossendalewines"><img src="https://cdn.shopify.com/s/files/1/0276/4849/1609/files/iconfinder_icon-02_2515845.png?v=1605847788"/></a>
            </li>
                       <li class="social-icons__item">
              <a class="social-icons__link" href="https://www.instagram.com/rossendalewines/"><img src="https://cdn.shopify.com/s/files/1/0276/4849/1609/files/iconfinder_social_media_social_media_logo_instagram_1916008.png?v=1605847728"/></a>
            </li>
            <li class="social-icons__item">
              <a class="social-icons__link" href="https://www.linkedin.com/company/rossendale-wines/"><img src="https://cdn.shopify.com/s/files/1/0276/4849/1609/files/iconfinder_LinkedIn_3380448.svg?v=1605846702"/></a>
            </li>​

• in footer.liquid add the following for each that you want to add, and remove any unwanted code such as 

    <li class="social-icons__item">
                  <a class="social-icons__link" href="{{ settings[social_link] | escape }}" aria-describedby="a11y-external-message">
                    {%- include icon_link -%}
                    <span class="icon__fallback-text">{{ social }}</span>
                  </a>
                </li>​

[VivekB]

Hi TyW,

Thanks a million for this quick guide to add social media buttons. I've tried to add this code, and it does work. However, like for other people commenting here, I get a huge Instagram/FB icon, and when trying to adjust the size in CSS, the icon gest displaced to the lowest corner on the left side of the page, and it stops working. Would you be able to please guide me on what's going wrong here. How could I place the icon properly in the footer, with the right seize and so it continues working?

Thanks again!

[Chrisc1623]

I've done these steps and created the new "icon-linkedin.liquid" file with the SVG data from my image. However, it's not showing up as of yet. How do i link the image file to the snippet as I can't see how it would know where to find the image etc.. 

Best

Chris

[eiizumidesign]

Hi Savage21,

Kindly follow colonel the colored highlights of my previous comment.

I had use the example convert the existing Facebook icon to LinkedIn one.

[eiizumidesign]

After follow TyW’s, go my comment and follow mine. I based mine working on FB to LinkedIn one.

[Chrisc1623]

I have followed the steps and no image is showing up. Here is my "icon-linkedin.liquid" code. Am I missing something? 

<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-linkedin" viewBox="0 0 20 20"><path fill="#444" d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-386.892,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Zm-288.985,423.278l0,-225.717l-75.04,0l0,225.717l75.04,0Zm270.539,0l0,-129.439c0,-69.333 -37.018,-101.586 -86.381,-101.586c-39.804,0 -57.634,21.891 -67.617,37.266l0,-31.958l-75.021,0c0.995,21.181 0,225.717 0,225.717l75.02,0l0,-126.056c0,-6.748 0.486,-13.492 2.474,-18.315c5.414,-13.475 17.767,-27.434 38.494,-27.434c27.135,0 38.007,20.707 38.007,51.037l0,120.768l75.024,0Zm-307.552,-334.556c-25.674,0 -42.448,16.879 -42.448,39.002c0,21.658 16.264,39.002 41.455,39.002l0.484,0c26.165,0 42.452,-17.344 42.452,-39.002c-0.485,-22.092 -16.241,-38.954 -41.943,-39.002Z"/>"/></svg>

Chris

[eiizumidesign]

Hi Chris,

1) Your code looks correct; you should have edit and saved the SVG file via text application (not sure whats the impact if you do it directly on Shopify Edit Code)

2) Check you have file/upload this SVG file onto Assets as mentioned by TyW's original comment thread "5. Choose the icons file on your computer and click Upload asset." (This should be the location to upload your SVG file.


If all else fails, try again (remove all the steps you had done):

A) Follow TyW's original comment thread.

AND WHEN YOU SEE A HUGE ICON...

B) Go to my comment dated and timed 07-06-2020 09:15 AM.

Sorry, I am not exactly a coder/programmer.

[henriettaprice]

Hi there ty,

thank you for this tutorial. im just wondering where you paste this code in? I was a bit confused by the description, as I cant find any similar code that is already used for the social icons already showing. 

thanks a lot 

Henrietta 

[henriettaprice]

hey there, thank you for explaining how to get rid of the bit logo, I tried your instructions about the svg text editor code into the snippet. when I pasted it into the 'd=' bit, it just froze my code page. I tried it on 2 different windows and it didn't like it at all, it won't even let men cross out of the window. any suggestions? `I was thinking maybe because from svg text from the text editor is so big? 

Henrietta 

[eiizumidesign]

Hi henriettaprice,


Basically, what I had done is duplicate an existing icon, replace the icon in .svg format.

Changing the SVG format image icon may be a bit complicated.

You have to go through step-by-step and read carefully (restart all over again if necessary).

A) Follow TyW's original comment thread thoroughly.

AND WHEN YOU SEE A HUGE ICON...

B) Go to my comment dated and timed 07-06-2020 09:15 AM. and read slow, and implement carefully.

_________________


Else, you may want to try quipcorp's answer on 11-20-2020 12:01 AM which uses PNG format.

https://community.shopify.com/c/Shopify-Design/Social-media-Add-social-media-buttons/m-p/959853/high...

[eiizumidesign]

Hi henriettaprice,

Press "Ctrl+A" to make sure you get all the data string in.