Help adding my email and phone number to header

Store Design
1

I would like to add my email address and phone number above the cart and currency icons in the top right. Thanks, Shopify community you are my only hope.

thediydesigners@gmail.com

https://thediydesigners.com/

Desktop Screenshot 2021.07.26 - 18.32.16.98.png
Desktop Screenshot 2021.07.26 - 18.32.16.98.png2560×1440 372 KB

1 Like
2

@diydesigners

thanks for post

can you please share your header code so i will update

3
.sticky { position: fixed; top: 0; width: 100% }
{% if section.settings.header_style == '1' %} {% endif %}

:speech_balloon: {{ shop.email }}

{% for link in linklists[section.settings.mobile_linklist].links %} {{ link.title }} {% endfor %} X CLOSE
{% if section.settings.announcement %} {% endif %}
{% if section.settings.logo != nil %} {{shop.name}} {% else %} {{ shop.name }} {% endif %}

{% if section.settings.header_style == ‘1’ %}

Search
{% elsif section.settings.header_style == '2' %}
    {% for link in linklists[section.settings.main_linklist].links %} {% if linklists[link.handle] == empty %}
  • {{ link.title }}
    • {% else %} {% assign count = 0 %} {% for link in linklists[link.handle].links %}{% capture count %}{{ count }}*{% endcapture %} {% if linklists[link.handle] != empty %} {% for link in linklists[link.handle].links %}{% capture count %}{{ count }}*{% endcapture %}{% endfor %} {% endif %} {% endfor %} {% assign column_threshold = section.settings.dropdown_column_links | minus: 0 %}
  • {{ link.title }}▾
      {% assign count = 0 %}{% assign split = false %} {% for link in linklists[link.handle].links %} {% capture count %}{{ count }}*{% endcapture %}
    • {{ link.title }}
      • {% if linklists[link.handle] != empty %} {% for link in linklists[link.handle].links %} {% capture count %}{{ count }}*{% endcapture %}
    • {{ link.title }}
      • {% endfor %} {% endif %} {% endfor %}
    • {% endif %} {% endfor %}
{% endif %}
{% if section.settings.use_currency_converter %}
{% include 'currencies-switcher' %}
{% endif %}

{% if section.settings.order_link != blank %}

Order Now

{% endif %}

MENU

{% if shop.customer_accounts_enabled %}

{%- if customer -%}{{ customer.name }}{%- else -%}LOG IN{%- endif -%}

{% if customer %}

LOG OUT

 {% endif %} {% endif %} {% if section.settings.cart != blank %} {% else %} {% endif %}
{{ cart.item_count }}

CART
{% if section.settings.header_style == '1' %}
    {% for link in linklists[section.settings.main_linklist].links %} {% if linklists[link.handle] == empty %}
  • {{ link.title }}
    • {% else %} {% assign count = 0 %} {% for link in linklists[link.handle].links %}{% capture count %}{{ count }}*{% endcapture %} {% if linklists[link.handle] != empty %} {% for link in linklists[link.handle].links %}{% capture count %}{{ count }}*{% endcapture %}{% endfor %} {% endif %} {% endfor %} {% assign column_threshold = section.settings.dropdown_column_links | minus: 0 %}
  • {{ link.title }}▾
      {% assign count = 0 %}{% assign split = false %} {% for link in linklists[link.handle].links %} {% capture count %}{{ count }}*{% endcapture %}
    • {{ link.title }}
      • {% if linklists[link.handle] != empty %}{% for link in linklists[link.handle].links %} {% capture count %}{{ count }}*{% endcapture %}
    • {{ link.title }}
      • {% endfor %} {% endif %}

      {% if count.size > column_threshold and split == false %}
      {% assign split = true %}
      {% endif %}
      {% endfor %}

    • {% endif %} {% endfor %}
{% endif %}

{% schema %}
{
“name”: “Header”,
“class”: “header-section”,
“settings”: [
{
“type”: “header”,
“content”: “Header Container Settings”
},
{
“type”: “range”,
“id”: “section_width”,
“min”: 600,
“max”: 1600,
“step”: 50,
“unit”: “px”,
“label”: “Max Width of Section (Recommended 1200px)”,
“default”: 1200
},
{
“type”: “header”,
“content”: “Announcement Settings”
},
{
“type”: “checkbox”,
“id”: “announcement”,
“label”: “Check this to use an Announcement Bar”,
“default”: false
},
{
“type”: “color”,
“id”: “announce_background”,
“label”: “Announcement Background Color”,
“default”: “#000000”
},
{
“type”: “color”,
“id”: “announce_color”,
“label”: “Announcement Font Color”,
“default”: “#cccccc”
},
{
“type”: “header”,
“content”: “Announcement Content”
},
{
“type”: “image_picker”,
“id”: “pre_image”,
“label”: “Announcement Image (Optional)”,
“info”: “(200px x 40px Recommended Maximum Dimensions)”
},
{
“type”: “html”,
“id”: “announce_text”,
“label”: “Announcement Text”,
“default”: “GIVEAWAY CONTEST - Winners Announced Every Week”
},
{
“type”: “range”,
“id”: “announce_font_size”,
“min”: 12,
“max”: 20,
“step”: 2,
“unit”: “px”,
“label”: “Font Size of Announcement”,
“default”: 18
},
{
“type”: “image_picker”,
“id”: “post_image”,
“label”: “Announcement Image 2 (Optional)”,
“info”: “(200px x 40px Recommended Maximum Dimensions)”
},
{
“type”: “html”,
“id”: “announce_btn”,
“label”: “Announcement Button Text”,
“info”: “Leave this blank to not display a button.”,
“default”: “FREE ENTRY NOW”
},
{
“type”: “url”,
“id”: “announce_link”,
“label”: “Announcement Link”
},
{
“type”: “header”,
“content”: “Header Settings”
},
{
“type”: “color”,
“id”: “header_background”,
“label”: “Header Background Color”,
“default”: “#000000”
},
{
“type”: “radio”,
“id”: “header_style”,
“label”: “Header Style”,
“options”: [
{ “value”: “1”, “label”: “Style 1” },
{ “value”: “2”, “label”: “Style 2” }
],
“default”: “1”
},
{
“type”: “header”,
“content”: “Header Content”
},
{
“type”: “image_picker”,
“id”: “logo”,
“label”: “Logo”
},
{
“type”: “link_list”,
“id”: “main_linklist”,
“label”: “Main menu”,
“default”: “main-menu”
},
{
“type”: “link_list”,
“id”: “mobile_linklist”,
“label”: “Mobile menu”
},
{
“type”: “checkbox”,
“id”: “use_currency_converter”,
“label”: “Check this to use Currency Converter”,
“default”: false
},
{
“type”: “url”,
“id”: “order_link”,
“label”: “Order Now Button Link”
},
{
“type”: “image_picker”,
“id”: “cart”,
“label”: “Cart Icon”,
“info”: “Leave Blank to use our default. Default may not suit your brand.”
},
{
“type”: “text”,
“id”: “cart_position”,
“label”: “Cart Button Counter Position”,
“default”: “top:22%;left:0;right:0;”,
“info”: “Adjust the 2 numbers in this setting ONLY to fine-tune the position of your Cart Counter. The default value works with our default cart icon.”
},
{
“type”: “range”,
“id”: “dropdown_column_links”,
“min”: 4,
“max”: 20,
“step”: 4,
“label”: “Main menu dropdown links in first column”,
“default”: 8
},
{
“type”: “header”,
“content”: “Style Specific Settings”
},
{
“type”: “html”,
“id”: “search_text”,
“label”: “Style 1 - Searchbar Text”,
“default”: “Product 1, Product 2, Product 3…”
},
{
“type”: “color”,
“id”: “menu_background”,
“label”: “Style 2 - Menu Bar Background Color”,
“default”: “#000000”
},
{
“type”: “color”,
“id”: “menu_color”,
“label”: “Style 2 - Menu Bar Font Color”,
“default”: “#cccccc”
}
]
}
{% endschema %}

1 Like
4

@diydesigners

thanks for it i have checked it multi header option i don’t know which one is working

so need check back some other code please share DM Info

1 Like
5

DM me on Whatsap? 7072921987

6

@diydesigners - some code editing will be needed to add email and phone number… can you please add me as collaborator?

7

Yes, I can do that request access?

8

@diydesigners - I sent you the request

9

@suyash1

ValueBar.png
ValueBar.png1915×1007 197 KB

10

@diydesigners - I added placeholder text, please let me know email and phone number or you can add it later, we can make css changes like spacing and font-size.

11

email: thediydesigners@gmail.com
phone 707 292 1987

12

Can you make them one above the other?

13

@diydesigners - I added email and phone number , to fit it I had to reduce its font size and increase header width from header settings, changes can be made.

I recommend make header width 1200 to make everything bit bigger and fit well, I will be back in half hour, do let me know if you need anything.

14

Could you maybe put the email above the phone number?

15

@diydesigners - please check now

1 Like
16

It looks great! One last thing could you set it to align right?

17

@diydesigners - please check now.

1 Like
18

Looks perfect!

19

Where would you add this code? Header.liquid?

20

where did you add this code?