BACK

how to add a clickable phone number icon on shopify

Easy Way to Add a Clickable Phone Number to Shopify Store hey guys in today's video I just wanted,to

Zack Anderson

Updated on Mar 11,2023

Easy Way to Add a Clickable Phone Number to Shopify Store

The above is a brief introduction to how to add a clickable phone number icon on shopify

Let's move on to the first section of how to add a clickable phone number icon on shopify

Let TThunt's experts help you find the best TikTok product on your Shopify business!

Find TikTok products (It's Free)
No difficulty
No complicated process
Find winning products
3.5K Ratings

WHY YOU SHOULD CHOOSE TTHUNT

TThunt has the world's largest selection of TikTok products to choose from, and each product has a large number of advertising materials, so you can choose advertising materials for TikTok ads or Facebook ads without any hassle.

how to add a clickable phone number icon on shopify catalogs

Easy Way to Add a Clickable Phone Number to Shopify Store

hey guys in today's video I just wanted,to teach you real quickly how you can,add a phone number to your Shopify store,and how you can make that phone number,clickable on mobile so that people,whenever they're looking on their phone,at your Shopify website and they'll be,able to trust you more because they'll,see that you'll have a phone number in,the top left section of your website so,that they can click on that phone number,and talk to you or moaning of EA's or,whoever one of your employees they can,actually talk to someone to see that,you're legitimate Society just kind of,builds more credibility and people are a,lot less likely to think you're a scam,especially with as much competition and,Shopify so to be able to build this I,just created a 14-day free trial and,Shopify I just called it soccer in,America so first I'm going to do is go,into your online store and then you're,going to want to edit the codes to click,actions edit code and then we're going,to add a new section here in the code,and so go down to sections and you're,going to create a new section for the,purpose of the video,just name it top header top underscore,header and create this section so now,it's automatically gonna populate this,section right here but we're going to,add some code so I have this typed out,for you guys I'm going to include this,in the description the video below so,you guys will just be able to copy and,paste this so I copy that,and then go back to the Shopify code,right here and I paste that and then,make sure you guys are always saving so,I saved that now what we're gonna do is,we're going to get a little icon so you,know sometimes you go on the website you,have the phone number but before the,phone number there's sometimes a little,phone icon next to that and so I'm gonna,show you how you can add that little,icon also you guys don't have to do if,you don't want to them but we're just,gonna get phone clipart on Google and,then just click whichever one so I'm,going to save this image to my desktop,then go down to Shopify into your,settings for the store and then you're,going to go to the files right here and,you're going to upload this picture so,I'm going to upload that so now I have,this picture under the files of the,Shopify store so now you're gonna want,to click on this link so you're gonna,want to copy that entire URL now we're,going to go back to the code just click,on online store edit code,we're going to go back to the same,section so top header okay so right here,where it says URL under this image,source you're going to want to paste,that so that pasted from your files the,source of that URL to that icon so now,we have this setup make sure you guys,save again but now we're actually going,to go under themes well it's already,here so you're gonna click on this theme,not liquid here now you're going to,search for the header section so for Mac,I know it's command F for PC I think,it's ctrl F I'm not certain um you,search both the search bar and then run,a tie pin header now seeing yellow pulls,up this first header here we're gonna go,down to the second one so right here and,right above the second one there's this,close div class here to enter now we're,going to type in some new code here so,I'm gonna include this part also in the,description below the video so you guys,can just copy and paste so just copy,this and paste it here so now this is,going to link the top header section so,that this shows up in your actual theme,so when people look at your website,especially on mobile they're gonna be,able to click on the phone number to be,able to call you so we have that,included make sure you save this and we,have everything good here um so now,we're gonna look at the website and see,how it appears so there you guys go,so when you hover over you can see it's,clickable obviously I'm on the laptop,now so I'm not able to the contact there,but so see how you have the little phone,icon here but now you go and call us,here and this is just a phone number I,just use for whatever purpose of the,video but you'll be able to go in and,change that phone number if you go onto,the code so make sure if you guys are,gonna change that phone number to yours,obviously you're going to want to change,it here as well as in this part here,so make sure you change both parts and,make sure they're exactly the same where,you might have a few issues with your,outlet renders and when it shows up on,your website but yeah if you guys have,any questions obviously even leave them,in the comments below if you guys like,the video if it helps you out please,leave a thumbs up I mean subscribe to,the channel but yeah thank you guys so,much for watching and you guys have a,great rest of your weekend

Congratulation! You bave finally finished reading how to add a clickable phone number icon on shopify and believe you bave enougb understending how to add a clickable phone number icon on shopify

Come on and read the rest of the article!

Browse More Content