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? 

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

[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

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

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

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

[madari21]

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

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

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.

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

[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 

[CleverGifter]

You can also just go to

online store > customize  theme settings  social media

🙂

[hahahacheong]

Hi, good morning

I would like to add a social media button to the current theme, I wonder would you mind showing me where I should add the code to, please?

I have already uploaded the icons file - IMG_8642.JPG to Asset

{{ ‘IMG_8642.JPG | asset_url | img_tag | link_to: 'https://artland.com/galleries/ri-galerie', 'follow me on artland' }}

I appreciate that you will show me where I should locate the code above. Thank you so much

[eiizumidesign]

Hello Hahahacheong,

I think you need more customization and create and add a social account to the theme settings as well.

Stage 1 – Creating a new Social Media account into the Theme Settings:
Go to page – https://en.shopify.hk/partners/blog/social-media-marketing-icon

1. Go to header – "Creating the theme setting" and complete the steps.
2. Go to header – "Adding markup to footer.liquid" and complete the steps.
   1. Line 4: " {%- render 'icon-twitch' -%} " — icon-twitch is the icon (image) asset you should call up. <<EiizumiDesign – This part need may further experimenting because your are using a JPEG image instead of ICON, but once you go through everything other thing else, this should be the only obstacle. But if you wish to do ICON, you can go here – https://www.shopify.com.sg/partners/blog/building-icon-systems-with-svg. For your info, ICON goes under ASSETS in EDIT CODE.>>
      
      

Stage 2 – URL Insertion and Checking The Existence of your Created Social Media account stage:
Where to find your Social Account link and insert your desired URL "'https://artland.com/galleries/ri-galerie":
 

1. Main Dashboard > Sales Channels > Online Store > Themes > [Customize] button for Live Theme (on the right panel)
   
   
2. Left-side menu scroll down > Theme settings

1. Theme settings > Social media > Social accounts

[thesiloshaunt6]

i did this, i have the buttons but they do not work. they say page not found.

[LeoRobert]

It work but I don't know which line I should paste the code so that the button appears on wanted position. I want the social media buttons to be at position like image attached below. Please help.

[eiizumidesign]

When you go to the Theme setting and look at the Social Account, are these social media account options there?

1. Main Dashboard > Sales Channels > Online Store > Themes > [Customize] button for Live Theme (on the right panel)
   
   
2. Left-side menu scroll down > Theme settings
   
   
   
3. Theme settings > Social media > Social accounts

[Capt_Dave]

Did not work for me. I tried both options,r eg code and html code.   I entered after and under theme for Header. Like this. 

{%- section 'header' -%} {{ 'Instagram.png' | asset_url | img_tag | link_to: 'https://instagram.com/gulfstreamlures?igshid=NTc4MTIwNjQ2YQ==', 'Follow us on Instagram' }}

[_nonamakela]

Hi! The social media channels were already in my current theme but for some reason, they don't work by clicking on them on the website. Any ideas why?

[orestis-z]

Hey!

If you're looking for a simple, code-free way to add customizable social media icons to your store, check out IzyIcons: Social Icons Plus! It’s super user-friendly, and you can place 20+ icons (like Instagram, Facebook, LinkedIn, and more) anywhere on your store—footer, header, product pages—you name it. You can also fully customize the size, color, and style to match your branding, without touching any code.

There's a free 14-day trial, so feel free to give it a spin and see how it works for you!

Cheers,
Orestis from OZ Techworks
Developer of IzyIcons: Social Icons Plus