Adding phone number, email and social media to header DAWN theme

[newbie22]

Hello all,

My store url is www.yvesro.ro 

I am trying to add phone number, email address and social media to the header. It doesn't have the interface options, so I am guessing it needs to be coded and I know nothing about coding. Please help.

[BSS-Commerce]

Hi @newbie22 

Please follow these steps:

- Go to theme => Edit code => header.liquid. Find this code:

<div class="header__icons">

- Then add your code before this:

<div> Phone number:
    <a href="tel:123-456-7890" style="text-decoration: none; color: black">123-456-7890</a>
    </div>
    <div> Email:
    <a href= "mailto:tienbk255@gmail.com" style="text-decoration: none; color: black">myemail@gmail.com</a>
    </div>
    <div class="header__icons">

- Here is the result:

You can also add social media, images, or videos, but we do not recommend it because the header size is small. It's just our example to illustrate the code. You could change your HTML code to make it more beautiful.

I hope it will help you solve the issue.

[MelinaPrarchar]

Hello there.

I had the same issue, I applied your code and it did work...Thank you so much!

 Now I would like to move phone number and email on the right side of the page. Is that possible?

[BSS-Commerce]

Hi @MelinaPrarchar 

To move it to the right side, please follow these steps:

- You copy and remove the code you have added before.

- Find the code:

</header>

 - Then, you add the code before this:

<div>
</div>
<div>
</div>
<div>
...Your previous code                    
</div>
</header>

- For example:

</div>
<div>
</div>
<div>
</div>
<div style="text-align: right">
<div> Phone number:
<a href="tel:123-456-7890" style="text-decoration: none; color: black">123-456-7890</a>
</div>
<div> Email:
<a href= "mailto:test@gmail.com" style="text-decoration: none; color: black">myemail@gmail.com</a>
</div>
</div>
</header>

- Save and check your work. Here is the result:

We hope that this can help you.

[MelinaPrarchar]

Thank you for your immediate reply!

It looks a little bit off...I would like it to be above the search and cart icon.

I would like to have the initial annoucment bar which indicates my free shipping and then a sacond announcement bar with my companys contact info on the left side.

Is there any way it could be added to the left side of the announcement bar?

Thank you in advance!

[BSS-Commerce]

Hi @MelinaPrarchar 

You can go to the "announcement-bar.liquid" file, then add this code before the "{% schema %}" tag:

<div style="text-align: left;zoom: 80%;display: inline-flex;">
<div style="
    padding-right: 2em;
    padding-left: 2em;
"> Phone number:
<a href="tel:123-456-7890" style="text-decoration: none; color: black">123-456-7890</a>
</div>
<div> Email:
<a href="mailto:test@gmail.com" style="text-decoration: none; color: black">myemail@gmail.com</a>
</div>
</div>

We hope that it will work for you.

[newyoucosmetic]

I would like to add the company's 1800 phone number and email address below the header icons (search, account and shopping cart). 

[Abid3D]

I wanted to know if I could get the code to make the Phone Number and Email appear on the top right side. Could you please share the code for that? Thanks a lot.