Add business phone number to the header of website

New Member
5 0 0

We're trying to add the phone number to the header of our website, to the left of the search bar and cart icon. I've tried a couple of options and added custom code, but it always seems to put the phone number in a strange place within the header, and not aligned to anything. 

We'd like the phone number to sit directly to the left of the search bar and in line with the search and cart icons. Is anyone able to advise how best to do this? 

 

Website for reference: https://therecreationroom.co.uk/ 

 

Thanks, 

Eleanor

0 Likes
Excursionist
161 25 31

Hello Eleanor,

phoneinheader.PNG

Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
If helpful then please Like and Accept Solution.
If you happy and want to donate small, click here: Paypal
0 Likes
Highlighted
Trailblazer
305 69 62

Hi, @EleanorK,

 

This is Evita from On The Map.

 

Add this code as the screenshot shows: https://prnt.sc/p8e3tm

<p style="margin-bottom: 0; color: #fff; margin-right: 20px">+44 (0) 333 050 2490</p>

Then add the css to Assets/theme.scss.liquid at the bottom, so search bar doesn't break

@media only screen and (min-width: 750px) {
.medium-up--one-quarter {
width: 50% !important;
}

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
New Member
5 0 0

Hi, thanks for this. I've managed to get the phone number appearing and aligned with the search and cart icons:

 

Screenshot 2019-09-20 at 12.13.12.png

 

However, when I click on the search icon the search box expands and misaligns the phone number and cart icon again. Is there anyway of resolving this?:

 

Screenshot 2019-09-20 at 12.15.35.png

 

Thanks for your help so far!

Eleanor

0 Likes
Trailblazer
305 69 62

Add this CSS code:

 

@media only screen and (min-width: 750px) {
.grid__item.small--one-quarter.medium-up--one-third.text-right {
width: 50%;
}
}

 

 

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
New Member
5 0 0

Hi, 

 

Thanks for that, adding the CSS code has fixed the issue on mobile. I've now realised that the phone number doesn't work on mobile/tablet devices as the screen is too small. Is there anything I can add to the code so the phone number only appears on desktop?

 

Thanks, 

Eleanor

0 Likes
Trailblazer
305 69 62

I think the best place to add phone number in mobile device and tablet would be under the logo, what do you think?

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
New Member
5 0 0

I think ideally, we would not have the phone number appear at all when viewed on mobile so it doesn't look messy. Is there code I can input to make the phone number appear on desktop only?

 

Thanks,

Eleanor

0 Likes
Trailblazer
305 69 62

Yes, add this class to the paragraph: 

<p class="phone-number" style="margin-bottom: 0; color: #fff; margin-right: 20px">+44 (0) 333 050 2490</p>

And add this CSS code:

@media only screen and (max-width: 749px) {
    .phone-number {
       display: none;
    }
}
On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
New Member
5 0 0

Hi Evita, 

 

Thanks for that. I think we're really close with this, the only issue now is that the alignment of the logo in the header is still off on mobile. See mobile screenshots below. 

 

The normal alignment:

 

IMG_1738.jpg

 

Alignment with the new code and phone number excluded from mobile devices:

 

IMG_1739.jpg

 

Is there any way of resolving this? 

 

Thanks so much for all your help so far!

 

Eleanor

0 Likes