Add clickable email and phone icons to header

[MTCScreens]

Im on the dawn theme- and i would like to add my phone and email buttons to the header. Any ideas how?

[mageplaza-cs]

Hi @MTCScreens

I am from Mageplaza - Shopify solution expert.

For the theme theme Dawn you can follow the following steps to add my phone and email buttons to the header.

1. Go to Shopify Admin > Online Store > Themes

2. Click Actions > Edit code

3. Find the header.liquid file

4. Locate the appropriate place inside the or section

5. Add the following code before or after the navigation menu

    
        Call now
    
    [
        Email us
    ](mailto:your@email.com)

6. Save and check the results.

Please let me know if it works as expected!

Best regards

[MTCScreens]

Hi thank you, but its not showing up right, im looking more for a nice looking button icon that fits with the current theme in the header. The code gave me text only and was above the header, not integrated

[mageplaza-cs]

@MTCScreens

The idea is like that. You can customize the button’s position or add an icon to it, as well as style it however you want. Please let me know if you have any questions.

[Kyle_liu]

Hi @MTCScreens

The style in the picture below, is it what you need，

Two liquid files are needed: icon-tel.liquid and icon-mail.liquid.

snippets/icon-tel.liquid

snippets/icon-mail.liquid

In header.liquid file,

              {% render 'icon-tel' %}
          
          [
              {% render 'icon-email' %}
          ](mailto:your@email.com)

Exactly where you need to put it is still determined by your actual needs.