Hi guys welcome to WebSensePro I'm your
host Bilal Naseer with another Shopify ,how-to video and in this video, I'll teach
you guys how you can add a custom social ,icon on your Shopify store so one
of a client requested us to add an ,Etsy social icon which is not available
in Shopify store customization section ,so as you can see I have added this at Sea
social icon they had an Etsy store and they ,are transforming their store into Shopify and
they wanted to add the link to their Etsy store ,as well so they can get sales from both of the
platforms so if I go to the back end of store,and also this tutorial is applicable to the
Dawn theme's latest version 7.0.1 it will ,also work in Days theme craft theme studio
theme and Crave theme so it's applicable to ,all of these teams if you're using any other
theme mentioned on the comments below so I'll ,help you guys with the implementation of this
tutorial so if I go to customize of Don theme,and if I click on theme settings,and then we have this social media ,and now if we see we don't have an option to add
HC icon in our store so what are we going to do ,we'll add a custom icon in order to add our social
media so if you want to learn stick to the video ,don't forget to subscribe the channel comment
of the video below and let's get into the chord,okay guys so I added HC icon and pulling the
value of URLs from Vimeo icon so they don't ,uh Dawn theme in Shopify then have an option
to add an Etsy icon but uh the client didn't ,have the Vimeo so I just replaced the front
end icon for Vimeo so for example if I add ,URL here at c.com and hit save,now if I go back to my front end,so that's an essay icon and when I click
on that it will go to my Etsy store right ,so that's how I did it I just replaced the front
end icon for video in order to add my custom icon ,and in order to do that what I'm gonna do I'll
show you guys with the LinkedIn icon so LinkedIn ,is also one of the important professional social
media which is not available in Shopify Don theme ,so what I'm gonna do I use uh some other option
like I'll use Tumblr in order to replace with ,LinkedIn icon so you will add your
LinkedIn URL in the Tumblr section ,of Shopify theme settings but it will display
it as the LinkedIn icon so for example if I,so my LinkedIn company URL is let me search
it first so that's my LinkedIn company URL ,and I'm gonna copy and paste this
URL on my Tumblr section and hit save,now let's go back and hit refresh,now as you can see it's showing the tumbler
icon and when I click on that it's navigating ,me to my LinkedIn company profile now what
I need to do I need to replace it from the ,front end so it will show the LinkedIn
icon okay now first we will download our ,LinkedIn PNG icon and we can Google it up so
if I go to Google Dash images or let's download ,it from Flat icon.com they can give us better
quality for free so I'm gonna search for LinkedIn,and I'm going to download the PNG icon
which looks similar to other icons so I ,think this one will work okay I'm going to
download this one click on free download,and here we go our PNG icon has been downloaded
now I'm going to convert it from BNG to SVG,in order to convert your PNG
to SVG go to PNG to svg.com ,and scroll down so that's an online
converter for PNG to SVG now select your file,choose file,okay,that's our LinkedIn icon click on that,and your icon has been is now showing
up now click on generate button,which will generate your SVG file,okay our SVG icon is ready to download it
should show a preview here let's wait for a ,bit so I think this tool isn't working properly
so what we're gonna do we will search for some ,other Duo and there's another one which I
use which is convertto.co let's try that one ,okay now choose file again
to convert our PNG into SVG,click convert,and here we go rsvg is nope still converting let's
wait for a bit okay it's ready to go now click on ,download view our SVG file on browser that's how
how our SVG files looks like now what we will ,do will open this file in our notepad editor so
I'm going to open the file in notepad plus plus ,and that's our SVG code and now we
will go to our code editor in Shopify ,now let's go to Dawn actions and then click on
editing code again editing the code is a little ,uh risky so you need to take backup before
editing the code click on duplicate and take ,backup before messing with the quad Okay click on
edit code and now I'm going to search for Tumblr ,so here's the font the liquid file for Tumblr
icon and I'm going to click that and as you ,can see there's an SVG code now I'm going to
replace my SVG code with this code and hit save,now let's go back to your store and hit refresh,okay our Tumblr icon is converted into
LinkedIn but as you can see it's a lot ,bigger than what the tumbler was
and in order to fix that we will ,go back to our liquid code and in here
we will Define width and height as Auto,Auto and we will add a new
class here which will be icon ,so class is equal to icon in
inverted commas and now hit save,now let's go back to our store and hit refresh,scroll down to the bottom
I think it's still loading ,I think we did something wrong with the
code us icon everything's good hit refresh ,okay it's loaded now okay now scroll down to
the bottom and there we go our Tumblr icon ,has been converted into LinkedIn and as you
can see it's working fine working fine when ,we hover over as well let's take a look in
mobile device if it looks good in Mobile,and here's our mobile layout,present okay yep it looks good
in Mobile as well as you can ,see perfectly aligned and uh looks perfectly good ,cool right okay guys so that's it for the tutorial
I hope you guys liked it if you do make sure to ,like the video comment on it and don't forget
to subscribe until next video have a great day
Congratulation! You bave finally finished reading how to change social media icons on shopify and believe you bave enougb understending how to change social media icons on shopify
Come on and read the rest of the article!
3.5K Ratings
WHY YOU SHOULD CHOOSE TTHUNT
