Adding a clickable phone button or phone number to my header/homepage

New Member
4 0 0

Hi there, I know nothing about coding but have made a few minor additions to my html by following very clear instructions. so, I'm now wondering if there is any way anyone could tell me (with clear instructions..) how to go about adding a clickable button or clickable phone number to either my header or somewhere on my homepage, which would allow mobile customers to simply click and call me directly?

Thanks so much for any help at all :)

0 Likes
Shopify Staff
Shopify Staff
105 0 17

Hi Andrew,

Chris from Shopify here. There are a few steps to creating a clickable phone number. Luckily, they aren't too painful. Let's get started.

Your first step will be to open up the code editor for your Shopify theme. This can be accomplished by clicking on Online Store > Themes > Click the three dots next to the customize theme button. Then, click on edit HTML/CSS. You mentioned that you wanted the phone number to be on your homepage, so you will want to click on the theme.liquid file on the list of files to the immediate left of the code editor window. Then, locate the block of code between the <head> </head> tags. This will insert the phone number in the header of your website. You will want to play around with the placement. Now, to insert a clickable number, you'll want to insert this code snippet:

<a href="tel:18475555555">1-847-555-5555</a>

You'll replace the number above with your phone number. That's that! If you require any more help with this, and if you are using a Shopify created theme, please feel free to request our help at support@shopify.com

Regards,

Chris D
Shopify Guru

 

3 Likes
New Member
4 0 0

Absolutely brilliant! I did it! Thanks so much, for your assistance, Chris, greatly appreciated :)

Have a fantastic day!

Andrew

0 Likes
New Member
2 0 0

Hi Chris,

I have a similar question. Would like to add a clickable phone button (phone icon) on our header near our social icons. or call now button. So when customer clicks on it, dials immediately. We have the narrative theme. How can I add that feature?

Thank you!

Chris

0 Likes
New Member
2 0 0

I'm using the Venture theme. I added the ph number in the header.liquid but it also appears in the sticky nav bar. Is it possible to hide it fromt he sticky bar on scrolling? Thank you

<div id="SiteNavSearchCart">
          <span class="small--hide">Call: 1-800-xxx-xxx<br/>
            1-949-xxx-xxx<br/>
            Irvine, California<br/><br/></span>

0 Likes
New Member
2 0 0

the solution is add the class sticky-hidden 

<div id="SiteNavSearchCart">
          <span class="sticky-hidden small--hide">Call: <a href="tel:1xxxxxxxxxx">1-xxx-xxx-xxxx</a><br/>
            <a href="tel:1xxxxxxxxxx">1-xxx-xxx-xxxx</a><br/>
            Irvine, California<br/><br/></span>>

 

 

P.S.: small--hide hides it when the header is resized to small

0 Likes
Shopify Partner
7 0 0

Awesome! thank you... how about the Announcement Bar for the Debut theme? www.EEZKeeper.com


@Chris_D wrote:

Hi Andrew,

Chris from Shopify here. There are a few steps to creating a clickable phone number. Luckily, they aren't too painful. Let's get started.

Your first step will be to open up the code editor for your Shopify theme. This can be accomplished by clicking on Online Store > Themes > Click the three dots next to the customize theme button. Then, click on edit HTML/CSS. You mentioned that you wanted the phone number to be on your homepage, so you will want to click on the theme.liquid file on the list of files to the immediate left of the code editor window. Then, locate the block of code between the <head> </head> tags. This will insert the phone number in the header of your website. You will want to play around with the placement. Now, to insert a clickable number, you'll want to insert this code snippet:

<a href="tel:18475555555">1-847-555-5555</a>

You'll replace the number above with your phone number. That's that! If you require any more help with this, and if you are using a Shopify created theme, please feel free to request our help at support@shopify.com

Regards,

Chris D
Shopify Guru

 


 

SEO Expert Custom Web Design Growth Marketing 775-870-0488
0 Likes
New Member
1 0 0

Can I add clickable phone number in header of a paid theme? We have Prestige.

Cheers, Jenn

0 Likes