Shopify themes, liquid, logos, and UX
There are two ways you can get social media buttons:
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.
theme.liquid
file to open it in the online code editor.{{ 'my-twitter-button.png' | asset_url | img_tag | link_to: 'https://twitter.com/iamawesome', 'follow me on twitter' }}
<a href="https://twitter.com"><img src="my-button.jpg" alt="Follow on Twitter"/></a>
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
I used the above and it worked great but the only issue was my button was HUGE - how do I make it smaller?
same for me... there is only a really big icon 🙂
Hi, had you managed to resolve this?
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":
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":
It works for me.
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
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?
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.
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.
I'm trying to add Etsy icon but I followed the steps and it's not working. Can you help please?
After follow TyW’s, go my comment and follow mine. I based mine working on FB to LinkedIn one.
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
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.
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
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...
Hi henriettaprice,
Press "Ctrl+A" to make sure you get all the data string in.
I solved this by:
{%- 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>
<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>
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!
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
You can also just go to
online store > customize theme settings social media
🙂
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
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
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":
i did this, i have the buttons but they do not work. they say page not found.
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.
When you go to the Theme setting and look at the Social Account, are these social media account options there?
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' }}
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?
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
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024