clickable phone number to Vogue Theme announcement bar

Living-Walls
Tourist
6 0 2

Hello World,

I'm wondering if anyone out there has successfully added a clickable phone number to the Vogue Theme announcement bar. There's a text box in the customization, but no provision for clickable code or a cute little phone gif.

0 Likes
Pallavi
Shopify Expert
2239 370 486

First remove number from notification bar then add following code

1. Go to Online Store->Theme->Edit code
2. Asset->theme.js->paste below code at bottom of file

 

$('.notification__message').append('<a href="add link here">830-837-5998</a>')

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
Living-Walls
Tourist
6 0 2
Hi Pallavi,
Thanks for the code. I don’t have a theme.js, but I do have a vogue.js in the assets area, which I assume is the equivalent. However, I tried pasting the code in several different lines at the bottom, but none of them had any affect on the page. Do you have any ideas why? What line should I paste the code on?
Thanks,
David

0 Likes
LitExtension
Shopify Partner
1241 162 219

Hi @Living-Walls

You can use code: <a href="tel:number phone">number phone</a>

Refer https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_link_phoneto

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes
Living-Walls
Tourist
6 0 2
Hi There,
I’ve been using this code successfully, to have a clickable phone number in the hamburger menu, but I don’t know where to insert the code to make it show in the announcement bar.
phone1-xxx-xxx-xxxx

Where do I “control-v” this?
KetanKumar
Shopify Partner
20651 2144 7823

@Living-Walls 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Living-Walls
Tourist
6 0 2

Hi Ketan Kumar,

The site is livingwallstile.com. There is a phone number in the announcement bar, but it's not clickable. I just entered it in the customization field, which doesn't allow code.

0 Likes
LitExtension
Shopify Partner
1241 162 219

 Hi @Living-Walls

Please follow the steps:
- Step 1: Go to Sections > header.liquid and find "announcement-bar". https://i.imgur.com/K8HZFZf.png
- Step 2: You just need to add code for it. href="tel:406-728-5536"
Refer https://i.imgur.com/OKjGVGL.png
Hope it clear to you.

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes
Living-Walls
Tourist
6 0 2
Hi LitExtension,
Thanks for your patience in explaining this to me. But, I don’t know where to place the code in header.liquid. The only incidence of “announcement bar” in header.liquid is in the screenshot below. I really need to learn where the code that I can see when I" inspect” in google developer tools , is located in my liquid code.
KetanKumar
Shopify Partner
20651 2144 7823

@Living-Walls 

can you please share  announcement bar code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes