Making Phone Links Clickable in Empire Theme's Announcement Bar

Shopify Discussion

Topic summary

A Shopify store owner using the Empire theme needed help making phone numbers clickable in the announcement bar on desktop (mobile already worked automatically).

Initial Problem:

  • Native announcement bar didn’t support “tel:” links
  • Previous solutions from similar requests hadn’t worked

Solution Process:

  1. Locate theme files: announcement-bar-text and announcement-bar-text-mobile
  2. Add specific markup code to enable clickable phone links
  3. Initial implementation created links but resulted in “Page Not Found” errors instead of opening FaceTime
  4. Required additional code modification to fix the error

Resolution:
After adjusting the code per the helper’s guidance, the phone link now functions correctly on desktop, opening FaceTime as intended. Multiple screenshots were shared throughout to illustrate the code locations and expected behavior.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

Hello everyone,

I’m trying to display my store’s phone number in the announcement bar at the top of each page. However, the native announcement bar in my theme (Empire) doesn’t support clickable links for phone numbers or email addresses (using “tel:” or “mailto:” links). This is only in regard of the desktop, as for some reasons the mobile version was automatically clickable.

I’ve reviewed some accepted solutions for similar requests, but unfortunately, they didn’t work for me.

If anyone could guide me on how to add this functionality, I’d really appreciate it! I’m comfortable modifying the code.

Thank you in advance for your help!

Capture d’écran, le 2024-11-01 à 06.36.53.png
Capture d’écran, le 2024-11-01 à 06.36.53.png1440×783 199 KB

2

Hi @PD31

I have checked and see a few steps that could help

  1. Go to edit the theme code and search for a file similar to this: screenshot link.

  2. In your theme code, it is named announcement-bar__message as shown here: screenshot link.

However, in their theme, you should search for:

  1. Example in your code:
    Your code example link, add the following code:
094 846 8558

It will look like this after the change:
screenshot link.

For your theme, add the same code but make sure to find the file as instructed in step 2 and insert the code in the appropriate place.

Your theme is slightly different from mine, but you can try these steps to see if they work.

Best,

Daisy

3

Hello Daisy,

Thank you for your help with this! The phone number is now linked, but unfortunately, clicking it on desktop leads, for some reasons, to a “Page Not Found” error. Ideally, if the link worked correctly, it should open a FaceTime window (as shown in the fourth screenshot, which is from another working phone link on my website).

Do you know why this link might be leading to an error instead?

Thanks again for your time on this!

Capture d’écran, le 2024-11-01 à 09.39.16.png
Capture d’écran, le 2024-11-01 à 09.39.16.png486×141 16.8 KB

Capture d’écran, le 2024-11-01 à 09.29.14.png
Capture d’écran, le 2024-11-01 à 09.29.14.png1430×722 181 KB

Capture d’écran, le 2024-11-01 à 09.29.26.png
Capture d’écran, le 2024-11-01 à 09.29.26.png1432×550 41.1 KB

Capture d’écran, le 2024-11-01 à 09.31.39.png
Capture d’écran, le 2024-11-01 à 09.31.39.png1402×677 126 KB

4

Hi @PD31

Could you go to your page and file this code?

DaisyVo_0-1730510250791.png
DaisyVo_0-1730510250791.png900×313 92.1 KB

Then, please change the code you added in step 3 above to this code to see if it works.

Best,

Daisy

1 Like
5

Wow that worked! Thank you for your assistance, Daisy :slightly_smiling_face:

1 Like