How to EDIT my existing phone number on Header section

How to EDIT my existing phone number on Header section

MsMarj
Excursionist
28 0 2

I want to add phone icon on my header phone number. 

Replies 7 (7)

ShopDoc
Shopify Partner
65 2 3

site link?

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

Hi @MsMarj 

Please check in the theme customization settings to see if your theme has an option to add a phone number. If not, you will need to add a customized code to include it. You can add it in the header.liuqid file if you have knowledge about HTML and liquid

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

MsMarj
Excursionist
28 0 2

This is my current code

<div data-section-id="{{ section.id }}" data-section-type="header">
<div id="HeaderWrapper" class="header-wrapper{% if overlay_header %} header-wrapper--overlay is-light{% endif %}">
<header
id="SiteHeader"
class="site-header{% if settings.type_navigation_style == 'heading' %} site-header--heading-style{% endif %}"
data-sticky="{{ section.settings.header_sticky }}"
data-overlay="{{ overlay_header }}">
<div class="mobil-tp-container">
<div class="tp-inner">Call us now! <a href="tel:1300091167">1300 091 167</a></div>

JuneN
Shopify Partner
125 6 37

Hi @MsMarj 
You can directly edit the code to add a phone icon by following these steps: Go to Online Store > Themes, click on the Actions dropdown for your theme, and select Edit Code. Locate the header.liquid file, look for the code that displays your current phone number, which might look like this:
{{ settings.phone_number }} or <p>Call us at: 123456789</p> (Suppose your message is 'Call us at' and the phone number is 123456789)
There, you can add an icon to your phone number by using the following HTML:
<a href="tel:{{ settings.phone_number }}"><i class="fa fa-phone"></i> {{ settings.phone_number }}</a>
or
<a href="tel:123456789"><i class="fas fa-phone"></i> 123456789</a>

If you find my suggestion helpful, please give it a like or mark it as a solution!
And discover more approaches to:
Streamline invoicing process Boost sales with labels & badges Add social proofs & create FOMO
Or get valuable updates and private deals regarding Shopify here.
MsMarj
Excursionist
28 0 2

Hi @JuneN I added the <a href="tel:123456789"><i class="fas fa-phone"></i> 123456789</a> but still no phone Icon

BrainStation23
Shopify Partner
379 57 55

Hi @MsMarj. Can you please help us by giving the answers of the following questions:
1. Can you share your store URL?
2. Which theme you're using?
3. And What you want if a user clicks phone number on Header Section?

Brain Station 23 PLC (Mail: js.team@brainstation-23.com)
- Was your question answered? Mark it as an Accepted Solution
- Did the solution not address your concern? We kindly request that share or mail your store URL with us this will enable us to collaborate more closely.
- Explore our Shopify public apps
MsMarj
Excursionist
28 0 2