Social media - Add social media icons via Assets

TyW
Community Manager
451 63 1206

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.

    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

Replies 27 (27)

TammyTaz
Visitor
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? 

thilonieke
Visitor
2 0 0

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

eiizumidesign
Shopify Partner
17 2 1

Hi, had you managed to resolve this?

Be Like Water. Be Agile.
eiizumidesign
Shopify Partner
17 2 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.

Be Like Water. Be Agile.
abraham323
Visitor
2 0 2
Thank you I’ll try that and let you know how it goes. I appreciate it!
Chrisc1623
Tourist
7 0 3

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
Visitor
2 0 2

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
Visitor
3 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. 

eiizumidesign
Shopify Partner
17 2 1

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.

Be Like Water. Be Agile.

madari21
Excursionist
24 0 3

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

eiizumidesign
Shopify Partner
17 2 1

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

Be Like Water. Be Agile.
Chrisc1623
Tourist
7 0 3

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
Shopify Partner
17 2 1

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.

Be Like Water. Be Agile.
henriettaprice
New Member
6 0 0

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
Shopify Partner
17 2 1

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

Be Like Water. Be Agile.
eiizumidesign
Shopify Partner
17 2 1

Hi henriettaprice,

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

Be Like Water. Be Agile.

quiqcorp
Shopify Partner
1 0 0

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
Visitor
1 0 0

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
New Member
6 0 0

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
Visitor
1 0 0

You can also just go to

online store > customize  theme settings  social media

🙂

hahahacheong
Visitor
1 0 0

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 muchScreen Shot 2021-04-25 at 8.10.30 am.pngScreen Shot 2021-04-25 at 8.06.17 am.png

eiizumidesign
Shopify Partner
17 2 1

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 settingsScreenshot 2022-03-13 at 4.34.43 PM.png
  1. Theme settings > Social media > Social accounts

 

Be Like Water. Be Agile.

thesiloshaunt6
Visitor
1 0 0

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

LeoRobert
Excursionist
34 0 10

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.

Teeraphy-Trendy-Streetwear-Clothing-Footwear-and-Accessories.png

eiizumidesign
Shopify Partner
17 2 1

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
    Screenshot 2022-03-13 at 4.34.43 PM.png

  3. Theme settings > Social media > Social accounts
Be Like Water. Be Agile.

Capt_Dave
Visitor
1 0 0

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
Visitor
2 0 1

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?