Solved

dawn theme - Add phone number in banner or header

milkymotorsport
Explorer
97 0 15

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.

https://milkymotorsports.com/

Screenshot 2023-10-27 at 9.45.16 AM.png

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
6076 1461 1800

This is an accepted solution.

Hi @milkymotorsport 

Do you mean to add here?

Made4uoRibe_0-1698435030498.png

If it is try this one. 

  • From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  • Find the theme that you want to edit and click on "Actions" and then "Edit code".
  • In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

@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;
}
}

 

  • And Save. 
Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


View solution in original post

Replies 10 (10)

biznazz101
Shopify Partner
494 50 89

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 

Don't hesitate to reach out for more help with your store.
SEE OUR TASK STORE or check us out via our profile! FREE STORE AUDIT
milkymotorsport
Explorer
97 0 15

I don't want it as a menu item, pls read the post 

Made4uo-Ribe
Shopify Partner
6076 1461 1800

This is an accepted solution.

Hi @milkymotorsport 

Do you mean to add here?

Made4uoRibe_0-1698435030498.png

If it is try this one. 

  • From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  • Find the theme that you want to edit and click on "Actions" and then "Edit code".
  • In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

@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;
}
}

 

  • And Save. 
Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


milkymotorsport
Explorer
97 0 15

@Made4uo-Ribe This is great, but the phone number is now clickable along with the search button, can it not be clickable?

Made4uo-Ribe
Shopify Partner
6076 1461 1800

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. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


milkymotorsport
Explorer
97 0 15

@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/

Made4uo-Ribe
Shopify Partner
6076 1461 1800

Oh, Yes you can. The code that i give you can insert this code. 

pointer-events: none;

Must be like this. 

Made4uoRibe_0-1698437813971.png

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


milkymotorsport
Explorer
97 0 15

@Made4uo-Ribe thank you!!!!!

Made4uo-Ribe
Shopify Partner
6076 1461 1800

Welcome. 😊

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


PageFly-Richard
Shopify Partner
4287 973 1627

Hi @milkymotorsport 

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!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.