Shopify themes, liquid, logos, and UX
Can someone please advise what code to use to add a phone number in the banner or header of my site on desktop? Screenshot attached of the 2 options of where I would like to place it, whichever option is easier to code in I'm fine with.
Solved! Go to the solution
This is an accepted solution.
Do you mean to add here?
If it is try this one.
@media only screen and (min-width: 990px){
summary.header__icon.header__icon--search.header__icon--summary.link.focus-inset.modal__toggle:after {
content: "+10000000000";
position: absolute;
left: 60px;
top: 19px;
}
}
To add to the header you can go to Online Store > Navigation > Add Menu Item
Then input the title: "Call Us" OR "Phone"
For the link input the following replacing the number with your own:
tel:+05890000111
Then click "Add" and finally click "Save".
The link will prompt users to call you when clicked. I hope this will be helpful to you.
Dont hesitate to reach out for more help!
@biznazz101
I don't want it as a menu item, pls read the post
This is an accepted solution.
Do you mean to add here?
If it is try this one.
@media only screen and (min-width: 990px){
summary.header__icon.header__icon--search.header__icon--summary.link.focus-inset.modal__toggle:after {
content: "+10000000000";
position: absolute;
left: 60px;
top: 19px;
}
}
@Made4uo-Ribe This is great, but the phone number is now clickable along with the search button, can it not be clickable?
Im sorry to say, I cant make it clickable button with css alone. It needs a HTML code, and you need a developer for that to input the code in your store.
@Made4uo-Ribe I want it to NOT be clickable, if you go to my site you will see it's clickable currently - https://milkymotorsports.com/
Oh, Yes you can. The code that i give you can insert this code.
pointer-events: none;
Must be like this.
Welcome. 😊
Hi, this is really helpful and works great on the desktop site BUT it does not look good on the mobile site... any tips how to rectify?
This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css
.header__icon.header__icon--search.header__icon--summary.link.focus-inset.modal__toggle:after {
content: "+10000000000";
position: absolute;
left: 60px;
top: 19px;
}
Hope you find my answer helpful!
Best regards,
Richard | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024