All things Shopify and commerce
I want to add phone icon on my header phone number.
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 & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
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>
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>
Hi @JuneN I added the <a href="tel:123456789"><i class="fas fa-phone"></i> 123456789</a> but still no phone Icon
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?
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025