Re:

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

newbie22
Visitor
1 0 0

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.

Replies 7 (7)

BSS-Commerce
Shopify Partner
3477 463 527

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:

view - 2023-01-30T174517.602.png

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.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
MelinaPrarchar
Tourist
10 0 2

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
Shopify Partner
3477 463 527

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:

view (7).png

We hope that this can help you.

 

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
MelinaPrarchar
Tourist
10 0 2

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
Shopify Partner
3477 463 527

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.

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
newyoucosmetic
Tourist
8 0 1

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

Abid3D
Visitor
1 0 0

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.