HOW TO ADD SOCIAL MEDIA ICONS ON SHOPIFY

hey guys, happiness here, welcome to my channel. and this channel is all about different shopify's tutorial, small businesses tips, as well as entrepreneurship in general. so if this is your very first time in my channel, hey there, welcome. so in today's video, i am going to be showing you guys how you can go ahead and add social medias icon on your shopify stores. so, pretty much there will be um instagram, tiktok, facebook, whatsapp, um what else? pinterest, etc. and this will help you a lot to stay connected with your customers, not only on your shopify stores, but as well as on the social medias. so, before i go ahead and start showing you how you can go ahead and add these social media icons on your shopify store, i am going to tell you the reasons of why, um, you need these links on your shopify store. these links, they are very, very important and this is why. so, number one: social media buttons. they are a great way to show your customer that you have a solid online presence and they can reach you on the platform that they are most comfortable with. and the second reason: having social media buttons on your shopify store can allow your customer to easily share different purchases and comments on your products, and with this, you'll get an automatik free advertisement from your customers. so this is why social media's icons on your shopify store: they are very, very important. so before i go ahead and start showing you how you can add this social media icons on your shopify style, please don't forget to smash the like button, subscribe on my channel- if you haven't done so, for more tutorials like these, and leave me a comment down below to let me know what you think about today's video. and, without further ado, let's jump in today's tutorial. so here we are on our shopify store and this is our homepage. so to go ahead and start adding our social media links, we can go ahead and click here on the online store and this page will take us straight on the dim page and, as you can see, our current theme is down. so if you want to know how to customize this theme, i have another video. i will link up the video up somewhere. so go ahead and check it out so you can go ahead and start customizing your done theme. so to go ahead and start doing this, go ahead and click customize right over here. so i'm going to click customize and this is how our done themes looks like on the inside and we are going to add our social media links, which they will appear right over here, on this side or over here, so let's just go ahead and start customizing it so you can see where they're going to be on your store. let's go ahead and click the settings right over here and, as you can see, there are so many things going on here. but basically, on this video, we're just going and add our social media, so we'll go ahead and click social media. if you want to know how to customize your colors, um, your typograph and stuff like that, make sure to go ahead and watch the customization of down theme, because i explained all of them there. so go ahead and click social media. and once you're here, you have so many options to add: either a twitter account, facebook, pinterest, instagram, tiktok, snapchat, youtube and etc. so let's go ahead and add our instagram page first. so, if you have your instagram page, go ahead and log in on your instagram page. now let me go ahead and start showing you how you can go ahead and add your instagram link, okay, so, first of all, make sure you're going to your instagram account and log in. once you log in on your instagram account. make sure you click your account so you are on the page of your account. by the way, this is my instagram page. there are so many cute styles in here. uh, please go ahead and follow me and shop my styles. i'll leave a coupon code down below on my description, um, anyways, yeah, so make sure you are on your homepage, on your instagram page, and then click right over there and copy the link and then go back on your shopify store, paste the link there. the link has to start with h ttp. okay, as you can see here, that is how it has to start with. and then, when you're done, let's go ahead and add our youtube. and here i am on youtube. uh, make sure, again, you're going to click the name of your channel, if you have a channel, and then, once you are on your homepage, on your youtube channel, go ahead up here again and copy, copy the link and then go back on your shopify store and click your youtube box and then paste the link. okay, we are done with that. now let's go ahead and add one more and then i'll go ahead and show you how it's going to look like on your shopify store. so let's go ahead and add pinterest. so, again, if you have a pinterest account, make sure you're logging in and sign up as well as go to your home page of your pinterest account and then copy the link of that and then, after that, go back on your shopify store and then paste the link. so this is how you add all the links of your social medias. so if you have a facebook, twitter, snapchat, um, you can go ahead and add them, just like how i showed you, uh, how to add youtube, instagram and pinterest. so once you're done, go ahead and click save so we can save our walk. okay, so once you're done adding your social media links, go back here and then we'll go ahead and click this footer menu right here, because this is our footer menu from here to here. so go ahead here and you can see what we have here. so let's go ahead on social media icons. it says to disparate your social media accounts, link them in your shopify setting, which we did, and then, if we want these social media to be seen on our photo menu, we have to go ahead and click this box here. so i'll click that and here we are. social media accounts are right over here. so if you don't select that, then the social media will not be shown here. so let's go ahead and click that and then go ahead and save. so now we have pinterest here, instagram, as well as um youtube. so now let's go back to our shopify home page so we can go ahead and view our store. so, to view your store, you have to go on the online store and next to online store there is an i thing. so go ahead and click that so you can go ahead and view your store. so i'm gonna click that and let's scroll all the way down and see if our social media icons are over there. yes, our social media are right over here, so let's go ahead and click them and see if they're working properly. there we are, as you can see. uh, instagram link is working. let's go back and let's try our youtube. so let's click youtube and, yeah, the link is working as well. okay, so this is a good sign. it shows everything is working. let's test pinterest here as well. okay, and pinterest is working as well, so this is good. so, yeah, guys, this is how you can go ahead and add your social media links on your shopify store. it is really easy, very simple and quick. i really recommend you to go ahead and do it, because this way you can be connected with your customers easily and on the platform where they are comfortable with. so if you like my today's video, please don't forget to smash the like button. subscribe on my channel for more tutorials like these. um, leave me a comment down below and let me know what you think about today's video, and if you have any video recommendation, you can go ahead and let me know on the comment section. and that's it, guys. i'll see you on the next video.

How To Add Social Media Icons On Shopify - Or Links!

are you looking to add your social media icons to your shopify store? well, if that's the case, then you've come to the right place, because today i'm going to be showing you exactly what you need to do, and i'm also going to be walking you through a solution as well. i've come to realize that many store owners are not sure how to add social media links to their store, and that's partikularly true for the social media platforms that shopify doesn't currently list in the options, so i'll be walking you through that as well. so if that sounds like what you're looking for, then be sure to keep on watching. either way, let's get into it. so the first thing you need to do is you need to visit your admin interface and from here you want to click on online store. then you need to click the customize button and you'll be presented with the store editor, as i'm sure you've been on before. now the first thing i would do is i would just run this check, so go to the footer section of your store and make sure that the show social media icons option is selected, because that's that's going to be really important for the next step, if it's not, check it and then hit save. next, you want to go to your theme settings, and this interface will open up on the right hand side, and then you want to scroll down to the social media section. now, here you can list all of your different social accounts, and shopify have made it quite easy for us by just giving us an example of what it needs to look like. so in all of these boxes, you basically need to enter the link to your social media profile. so these are all the official shopify links here. so i'm going to set those up just to show you how it works. but, of course, you would need to update this with your own twitter handle or social media profile. so i'm going to do a control c and i'm going to control v in each of these just to and then quickly swap them out, just to get that kind of completed quickly, and i'm just going to show you how that works. and you may have notiked while i was doing that, that the icon started to appear on the store, which is great, and we're going to check those in a moment. um, and that's one thing i would also recommend is that you check the links, because, as this is a text field, if you get this link wrong at all. either the link is not going to work or it's going to take you through to somewhere you don't want to go, and obviously you want to make sure that you check this before launching or before your customers and store visitors start, you know, going off to the wrong place. so make sure this is all kind of set up correctly. hit save and now we can refresh the store and you can see the icons have now appeared. so if i click on each one, it's going to take me through to the, to the, to the social profile that i've set up. so this is the shopify's official twitter page, and the same would happen for facebook- i'm doing a new tab- and pinterest, so facebook and pinterest- excellent. so that's how to set up social media icons. um, obviously, always go into the customizer and go through all of the, the ones you want to add. we've obviously got instagram, tik tok and snapchat, youtube and vimeo, so, um, there's obviously quite a few to add here, which is fantastik, um. but you know, as i mentioned at the start of this video, some people find that they actually want to add other social media accounts that aren't listed here, or they don't want the icons and they want links instead. well, what's the solution to this issue? well, i'm going to show you now. so what you want to do is: so, make sure this is all saved. is you want to head out of the editor and you want to go to navigation? now you have two options here. you can either create a new menu and show that, or you can add to an existing menu. so, for instance, we could edit the footer menu and add, add links there. but i'm actually going to create a new menu to show you how this is going to work. so i'm going to go add menu and i'm going to say: um, find us on social media. this is the name of going to be the name of this, uh, this section, and now we just need to add new menu items. so click add menu items and let's say, we want to add our profiles here, so twitter, for instance, so just call it twitter. that's gonna be the link that's clickable, so you can name that whatever you like. that could be: find us on twitter, or you know just whatever you want there. i'm just going to have twitter for now, because i've got the finders and the title, and then left, click on this section here and this is all kind of internal links. but you want an external link here, so you want to put https. this is going to be the same link that we found on the social media icon page and i'm going to do shopify again. for now, i want to say shopify. i'm going to do the official shopify link for now and you want to click this once it's typed out and you've checked it. click this link and that's going to lock it in and press add. so we've got twitter here. i'll do one more: add menu item. let's go facebook and i'm gonna go https backlash, backslash facebookcom, forward slash shopify. make sure you click this so it's in there and click add, save. excellent. so we've created a new menu called find us on social media. now the last thing you need to do is you need to go back into your- so click online store and go back into your customize and we need to add this. i want to add it to the footer. so here we want to add a new block menu. so add new block. click the menu button here. we're going to call this: find us on social media. see that here. change from the footer menu. so click this, click this: find us on social media select. see that here. excellent, now we can have that on the right hand side. we could have that, you know, in the middle, or we could have it on the left, so i'm going to put it on the left for now. hit save. now if i go back into my store- obviously you can't see it there- we can hit refresh now it's appeared, and if i click this link- or you know, i'm going to do it in a new tab- the same thing works, so we can head over to our social media. obviously, you need to put your own link in, as i suggested earlier, but that would take you to your social media profile via a link. so we've got the two different options there. so i hope this video was useful. if it was, please do hit the like button. that tells me i should continue making videos like this, and if you have any questions about what i've done today or shopify in general, drop them in the comment section down below and do consider subscribing to my channel. i've got a lot of different videos on shopify and building an online business, with different tutorials which may be of benefit. so, with that said, i hope you have an excellent day.

More:dropshipping xml linkimiz ve bayilik hakkında

How to Edit Social Media Links in Shopify

when setting up a Shopify store, there are a ton of different things to get done on your to-do list. one of those things is editing or swapping out the social media links. they come with your Shopify theme. Now, by default, these links will likely point to the Shopify social media accounts, or perhaps to the author's accounts, whoever created the theme. my name is digital girl, and in the Shopify tutorial for beginners, I'm going to show you how to edit the Shopify URLs or links in your Shopify store. so if we have a look at the social media icons that are placed in the footer of our website, we can see that they're currently not pointing to our social media accounts. so what we're going to do is head on over to our Shopify admin, so make sure you're signed in, and then, in the left hand side, we're going to click on online store underneath sales channels. from there, this is going to take us to the theme section of the admin, where we can click on the green customize button. as you likely already know, this is where you edit and modify your Shopify store and its settings, and, as you can see here, it gives us a bunch of different options when it comes to editing our home page. now, while it does give us the option to edit the different content boxes within our footer, it doesn't actually give us the option to edit the social media links. so to do that, we're going to head on down to the very, very bottom of the page, which is theme settings. so go ahead and click on theme settings in the bottom left and then from there, on the far right, we're going to expand the social media accounts section. so we've got a bunch of different social media accounts here, from Twitter to Facebook, Pinterest and so on, and, as you can see, they're currently pointed to Shopify. so I'm just going to go ahead and replace the URLs here, starting with Twitter, and then I'll go ahead and update Facebook, Instagram. of course, you go ahead and plug yours in and then, if you want to go ahead and delete one of the current icons, you certainly can do that. so, for example, we don't have a tiktok account currently, so what I'll do is highlight the URL and then simply just delete it. and, on the flip side, if you had a social media account that wasn't currently in the footer, you can certainly go and grab the URL from that account and plug it into the correct field. so, for example, I'm going to go ahead and grab our Pinterest URL and just plug it into the Pinterest field on the right. all right, so go ahead and just edit the rest of the fields, whichever ones are appropriate for you and the social media accounts that you currently have, and then, when you're done, go up to the right hand corner and hit the green save button. now, if we head on back to our website and simply refresh the page, you'll notike that the correct icons are now displaying and if you click on them, they actually go to our social media accounts. now and there you have it. you now know how to edit the social media links on your Shopify store. I hope that you found the Shopify tutorial helpful and, if you did, please do give it a like and stay tuned for more Shopify tutorials, along with Ecommerce videos.

More:How I Find the Hottest Virtual Wholesale Zip Codes

How To Add Social Icons to Shopify Header UPDATE

hey guys. so I wanted to make another video of how you can um upload social media icons to your header. I found a much simpler way to do that and so we're going to get into that today. [Music] elements- Dash generatorsmyshopifycom. it says simple generator for basic things, pretty much. so what I'm doing here is copying my Instagram account. I'm going to the same website and pasting it in there so that I'll be able to generate the code for the icon. I'm doing the same thing for my email address at the bottom, and basically what this does is to the right, you see that the code is changing as I'm adding information, that I'm coming to my YouTube channel and I'm going to copy that link and I'm gonna put it in where it says YouTube URL, and the code generates each time I add a new piece of information. okay, so before you grab the code and copy the clipboard, click on customize the look. I think I missed it when I first did it and realized I needed to do something else. so then you'll find your hex code numbers and you'll just type them in. if you're on your mobile device or your tablet, it can be a little tricky to use it. it's better if you're on the computer. but if you know the code numbers, click the you know, copy and paste them or type them in, and you have the option to change if you want to circle around the icon, or rounded corners or Square, or if you just want the icon without any shape behind it at all. I don't think I was able to adjust, it wasn't letting me select it. but once you figure out how you want it to look, then you grab the code. so now what you're going to do is gonna click copy to clipboard right here and then I save it to your computer. then you're gonna go into Shopify, you're gonna go into online store, click themes, click actions, because actions is where the code is for your page. click edit code and then you're gonna click on theme dot liquid and then type Ctrl F or command F so that you can be able to search this document. we're going to look for the body tag. so I'm looking. I'm about to do it now. yeah, we're going to let course. so in order to find it, you can type it exactly how it would be. so you're going to put the carrot symbol, lowercase b and lowercase everything so it can find the exact word um, and then once you do that, you're going to paste in the um the code into the body section above the header. pretty much so that's where you want to be. what I like to do is I spaced after header and then I like to put- you want to put it, you know, below the header. sorry, I like to leave a comment so that I know what I'm updating and what I'm changing. so I do curly bracket, percent sign, the word comment, percent and curly brackets, and then make sure there's spaces between the percentage signs and then you're going to put your comment. whatever you're saying, I'm letting myself know that I'm adding some custom code and then, when I'm done with this portion, I'm going to end the comment with the same curly brackets, percent sign and the words end comment with spaces around the word end comment and close it out with the percent and the curly brackets and then below that I'm going to write um another comment telling me where the Shopify code resumes. so after you save, you're gonna go back to your main um, Shopify and you see that the links are at the top now they're not matching my brand color, so I do go back later and change the colors. um, if I have the video, then I'll show it. but you see, I click the YouTube link and it goes to the YouTube link and so that's all there is to it. thanks for watching. if you like this video, please like it and subscribe to the channel and leave a comment down below for any videos you want me to make in the future.

How To Add Custom Social Icon in Shopify - [2022 Free]

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 stik 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 ccom 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 iconcom, 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 svgcom 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 converttoco. 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.

Add Social Sharing Icons On Shopify Pages For Free

hey, collins here and i want to show you on this video how you can add a share button on your shopify page. so currently, on the shopify down theme, you have this feature that allows you to share your product, or maybe click on this share button just allows you to like, copy the link. that's pretty much all it does. there's no option for you to be able to share this through an email, share with your friend on whatsapp. but to do this, there are two ways: you're going to use a custom code or use an app. so this is awesome and it's totally free. so that's what we'll be using on this video to show you how you can do that app store. you need to search for this. this, this is shin, so this is share, or this share button. so this is what you're looking for. so just to click on it. it's totally free. when you have this app, add it to your, so follow the process and install it to our store. once it is installed, it's pretty easy to set up. so you want an inline or a stiky, so an airline is one that you can place anywhere on your store. you can place an inline here. you can place an airline here, where a stiky is one that has to just always remain at that position, so whenever users are scrolling is only stiky. so you need to choose that from here. so let's go with the inline and we're just trying to customize how i want it to look. so who don't like this look? obviously you want to make it look more like your theme, so it does not just stand out. so what we'll do in this case is just trying to play around with it here. i want it to be on the left, you want. you don't want all of these words, so put it to none. so just a couple of blocks. we don't want it to be color, wanted to just be white and black, so i wanted medium. and if you want round corners or extra space, you know anything else, just remove the ones you don't want from. you are the ones you want. that's just pretty much it. and you go to nest and you just sign up an account here and share button. you have the active, so this is the only button that we've created on the app. then we'll click this. we'll have this code, right, copy this code, just click here. then we go back to your online, your theme, and whenever you want this share button to appear, you need to just insert the code. so let's say, i want to put on our product page, so you need to access your product page and from the down theme, from here you go to actions. remember, if you go to your live store themes, actions, edit code- i want to search for the products page and start this coding onto it into it. so the best way to always go about this is go through your templates, right? everything is a template. so you look for the product page template. so this is it. when you open up the product page template, you're able to find the section that is being used. so in this case, you are using the main product section, right? so select sections, look for main products. so there's a section we need to edit. so now you just need to find the place you want to insert this, and the best way to go about this is to from here. you need to just do like an inspect right click here. so from now, i want to know the exact splits on this page. i want to insert this code. so use the share button and just to inspect where this share button is. just allow it to know the right place to insert it. so we can just see the class. here you can see share button, quick add hidden. you just want to get this class. so once you have, let's say this, share button, right, so you know, we want to insert it below this, so we'll cut on this. we just need to come back here. we'll hit ctrl f or command f, then share button, so now we can see the code. right. so this stuff here, this is it from here, so from here to here, right. so for us to insert down, to insert it just below this right appear below that. so just put it in here. so we'll just save. right. so go back to the page i'm gonna refresh. you see your share button, you know. so there's, it's on the live page. that's pretty much how you do it. so if you want to change the position of this element, you want to insert it somewhere else. you just need to go through your console to know where you want to add it. so you also want to insert this code to a blog page. so let me want to do this here. so what you want to do is go back to your theme, go back to the theme editor. so from the template, again you need to search for your artikles and set it into an artikle. so search for the artikle or json, so on this you will see the section. so i follow this process because i believe it's easier for you to find what you're looking for. so this is your main artikle. so we need to go to the section side and look for main artikle. so i believe this is what you're looking for. i mean artikle, this is what you're looking for. so, as you can see, for me i already copied this social sharing where you can also see the classes here for the share button. so you just want to find the location right, just for you to know the points. it is on the code. so i can insert you on just right below it. so we can just put this share button class here. so all you just need to do is find your id, school start. so from this div to here, so we can just go back and copy this code snippet and just insert it right below this. let's set it right below here. so so let's start it right below here and that's it. so now we can refresh this page and i believe we should find it here. yes, so here we will insert this code here and go to this page and we'll check. we'll see that it is here. so this is because we've added it outside of the main div, right. so we need to copy this controls, see this and move it inside the shift div. so you want this to be inside this tab, so we'll just remove this now, right, and now i've copied into this steve and we'll save it again. if we go and refresh on the page, you can see that it's not inside another step. if you want to remove this entirely, you can just comment out this code, right. so from here, from this part, this is shape button. you can just add a comment on it. so you can just add the comments, comment, and here that it ends, you can just add another end comment. so this will completely remove it from showing. so refresh this. so only this is showing now. so this is what i want, right, for any other page that you want to do, this is still the same process. you look for the class using the inspector. then you come on here and you search for the class. then you know, get the code, start and they want to insert yours. so thank you and have a nice one.