Re: Help adding my email and phone number to header.

Solved

Help adding my email and phone number to header.

diydesigners
Explorer
50 0 15

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.

Accepted Solution (1)
suyash1
Shopify Partner
10000 1241 1579

This is an accepted solution.

@diydesigners - please check now.

Amazing chess game | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

View solution in original post

Replies 20 (20)

KetanKumar
Shopify Partner
37144 3648 12063

@diydesigners 

thanks for post 

can you please share your header code so i will update 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
diydesigners
Explorer
50 0 15

<style>
.sticky {
position: fixed;
top: 0;
width: 100%
}
</style>
<div id="myNav" class="overlay" style="display:none;">
<div class="overlay-content">
{% if section.settings.header_style == '1' %}
<form class="search" action="/search">
<input type="text" placeholder="{{section.settings.search_text}}" name="q" value="{{ search.terms | escape }}"/>
<input type="submit" style="border:solid 1px #fff;" value="Search" />
</form>
{% endif %}
<p style="color:#aaa;font-size:22px;text-align:center;margin:8px 0 10;">💬 {{ shop.email }}</p>
{% for link in linklists[section.settings.mobile_linklist].links %}
<a href="{{ link.url }}" style="margin:10px 0;">{{ link.title }}</a>
{% endfor %}
<a href="javascript&colon;void(0)" class="closebtn" onclick="closeNav()" style="color:#fff">X CLOSE</a>
</div>
</div>

<div class="head" id="sticky-menu" style="z-index:100;border-bottom:solid 1px #ddd;margin:0 auto;">
{% if section.settings.announcement %}
<div style="background:{{section.settings.announce_background}};color:{{section.settings.announce_color}};">
<div class="cont" style="max-width:{{section.settings.section_width}}px;">
<a href="{{section.settings.announce_link}}" class="flex-rw"
style="width:100%;justify-content:center;align-items:center;flex-wrap:nowrap;padding:3px 0;color:{{section.settings.announce_color}};">
{% if section.settings.pre_image != blank %}
<img src="{{section.settings.pre_image | img_url: '40x40' }}" style="width:100%;max-width:40px;margin-right:20px;">
{% endif %}

{% if section.settings.announce_text != blank %}
<p style="font-size:{{section.settings.announce_font_size}}px;margin:0 10px 0 0;line-height:1.2em;color:inherit;">
{{section.settings.announce_text}}
</p>
{% endif %}

{% if section.settings.post_image != blank %}
<img class="dsk-only" src="{{section.settings.post_image | img_url: '40x40' }}" style="width:100%;max-width:40px;margin-right:20px;">
{% endif %}

{% if section.settings.announce_btn != blank %}
<p class="dsk-only" style="margin-bottom:0;color:inherit;padding:0 8px;border:solid 1px {{section.settings.announce_color}};font-size:20px;border-radius:4px;">
{{section.settings.announce_btn}}
</p>
{% endif %}
</a>
</div>
</div>
{% endif %}
<div style="background:{{section.settings.header_background}};color:{{section.settings.header_color}};">
<div class="cont" style="max-width:{{section.settings.section_width}}px;">
<div class="flex-rw" style="width:100%;justify-content:space-between;align-items:center;flex-wrap:nowrap;padding:2px 0;">
<a class="two col logo" href="{{shop.url}}" title="{{shop.name}}" style="margin:0;line-height:1em;">
{% if section.settings.logo != nil %}
<img src="{{ section.settings.logo | img_url: '320x320' }}" alt="{{shop.name}}" style="width:100%"/>
{% else %}
{{ shop.name }}
{% endif %}
</a>

{% if section.settings.header_style == '1' %}
<div class="dsk-only searchbar">
<form action="/search" style="height:40px; margin:0;position:relative;">
<input type="text" name="q" placeholder="{{section.settings.search_text}}"
value="{% if search and search.results.first.price %}{{ search.terms }}{% endif %}"
autocapitalize="off" autocomplete="off" autocorrect="off">
<span class="search-submit button" style="border-radius:0 4px 4px 0;">Search</span>
</form>
</div>
{% elsif section.settings.header_style == '2' %}
<ul class="menu dsk-only flex-rw" style="padding:0px;list-style:none;font-size:18px;margin:0;">
{% for link in linklists[section.settings.main_linklist].links %}
{% if linklists[link.handle] == empty %}
<li style="align-self:center;list-style:none;">
<a href="{{ link.url }}" class="top-link" style="padding:0 20px">{{ link.title }}</a>
</li>
{% 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 %}
<li style="align-self:center;list-style:none;">
<a href="{{ link.url }}" style="padding:0 20px;"
class="sub-menu {% if link.active %}active{% endif %}
{% for link in linklists[link.handle].links %}
{% for l in linklists[link.handle].links %}
{% if l.active %}active{% endif %}{% endfor %}
{% if link.active %}active{% endif %}{% endfor %}">
{{ link.title }}<span class="arrow">▾</span>
</a>
<div class="dropdown">
<ul style="padding-left:0;list-style:none;">
{% assign count = 0 %}{% assign split = false %}
{% for link in linklists[link.handle].links %}
{% capture count %}{{ count }}*{% endcapture %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% if linklists[link.handle] != empty %}
{% for link in linklists[link.handle].links %}
{% capture count %}{{ count }}*{% endcapture %}
<li><a class="sub-link" href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
{% endif %}
{% endfor %}
</ul>
</div>
</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
<!-- Right Menu -->

<div class="flex-rw two col menu-right" style="justify-content:flex-end;flex-wrap:nowrap;margin:0;align-items:initial;">
{% if section.settings.use_currency_converter %}
<div class="currencies dsk-only" style="margin:0 4%;align-self:center;">
{% include 'currencies-switcher' %}
</div>
{% endif %}

{% if section.settings.order_link != blank %}
<a href="{{section.settings.order_link}}" style="align-self:center; margin:0 4%;padding:2px 10px;border-radius:5px;border:solid 1px;">
Order Now
</a>
{% endif %}

<div class="flex-cl mbl-only" onclick="openNav()" style="text-align:center;">
<img src="https://cdn.shopify.com/s/files/1/0065/9315/1029/files/icons8-menu-100.png?9797"
style="max-width:30px;position:relative;margin:auto;">
<p style="margin:0;font-size:12px;text-align:center;line-height:12px;color:#000">MENU</p>
</div>

{% if shop.customer_accounts_enabled %}
<a href="/account" style="text-align:center;margin:0 4%;max-width:50px">
<img src="https://cdn.shopify.com/s/files/1/0255/5953/1568/files/icons8-customer-100.png?587"
style="max-width:30px;margin:auto;">
<p style="margin:0;font-size:12px;text-align:center;line-height:12px;color:#000">
{%- if customer -%}{{ customer.name }}{%- else -%}LOG IN{%- endif -%}
</p>
</a>
{% if customer %}
<a href="/account/logout" style="text-align:center;margin:0 4%;max-width:50px">
<img src="{{'sign_out.png' | asset_url}}"
style="max-width:30px;margin:auto;">
<p style="margin:0;font-size:12px;text-align:center;line-height:12px;color:#000">LOG OUT</p>
</a>
{% endif %}
{% endif %}

<a href="/cart" style="position:relative;text-align:center;margin:0 4%;">
{% if section.settings.cart != blank %}
<img src="{{section.settings.cart | img_url: '40x40'}}"
style="max-width:30px;position:relative;">
{% else %}
<img src="https://cdn.shopify.com/s/files/1/0065/9315/1029/files/icons8-shopping-bag-100_1.png?9500"
style="max-width:30px;position:relative;">
{% endif %}
<div style="font-size:14px;width:16px;height:16px;line-height:16px;text-align:center;background:#000;border-radius:50%;
position:absolute;margin:auto;color:#fff;{{section.settings.cart_position}}">{{ cart.item_count }}</div>
<p style="margin:0;font-size:12px;text-align:center;line-height:12px;color:#000">CART</p>
</a>
</div>
</div>
</div>
</div>
{% if section.settings.header_style == '1' %}
<div class="dsk-only" style="background:{{section.settings.menu_background}};">
<div class="cont" style="max-width:{{section.settings.section_width}}px;padding:10px 0;">
<div class="flex-rw" style="justify-content:center;">
<ul class="menu flex-rw" style="padding:0px;list-style:none;font-size:18px;margin:0;" id="nav">
{% for link in linklists[section.settings.main_linklist].links %}
{% if linklists[link.handle] == empty %}
<li style="align-self:center;list-style:none;">
<a href="{{ link.url }}" class="top-link" style="padding:0 20px;color:{{section.settings.menu_color}};">
{{ link.title }}
</a>
</li>
{% 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 %}

<li style="align-self:center;list-style:none;">
<a href="{{ link.url }}" style="padding-right:20px;color:{{section.settings.menu_color}};"
class="sub-menu {% if link.active %}active{% endif %}
{% for link in linklists[link.handle].links %}
{% for l in linklists[link.handle].links %}
{% if l.active %}active{% endif %}{% endfor %}
{% if link.active %}active{% endif %}{% endfor %}">
{{ link.title }}<span class="arrow">▾</span>
</a>
<div class="dropdown {% if count.size > column_threshold %}dropdown-wide{% endif %}">
<ul style="padding:0 0 3px;list-style:none;">
{% assign count = 0 %}{% assign split = false %}
{% for link in linklists[link.handle].links %}
{% capture count %}{{ count }}*{% endcapture %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% if linklists[link.handle] != empty %}{% for link in linklists[link.handle].links %}
{% capture count %}{{ count }}*{% endcapture %}
<li><a class="sub-link" href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
{% endif %}

{% if count.size > column_threshold and split == false %}
{% assign split = true %}
{% endif %}
{% endfor %}
</ul>
</div>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
</div>
{% endif %}
</div>
<!--
<div class="mbl-only">
<form action="/search" class="searchbox-mobile">
<input type="text" style="width:100%;" name="q" placeholder="Search..." value="{% if search and search.results.first.price %}{{ search.terms }}{% endif %}" autocapitalize="off" autocomplete="off" autocorrect="off" />
</form>
</div>
-->

<!--
Searchbar End -->

<script>
function openNav() {
var menu = document.getElementById("myNav");
if (menu.style.display === "none") {
menu.style.width = "100%";
document.getElementById("myNav").style.display = "block";
} else {
menu.style.width = "0%";
document.getElementById("myNav").style.display = "none";
}
}

function closeNav() {
document.getElementById("myNav").style.width = "0%";
document.getElementById("myNav").style.display = "none";
}

window.onscroll = function() {myFunction()};
var header = document.getElementById("sticky-menu");
var sticky = header.offsetTop;
/*
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
*/

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;

if (window.pageYOffset > sticky) {
if (prevScrollpos > currentScrollPos) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
prevScrollpos = currentScrollPos;
} else {
header.classList.remove("sticky");
}

}
</script>


{% 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": "<b>GIVEAWAY CONTEST</b> - 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": "<b>FREE ENTRY NOW</b>"
},
{
"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 %}

KetanKumar
Shopify Partner
37144 3648 12063

@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 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
diydesigners
Explorer
50 0 15

DM me on Whatsap? 7072921987

suyash1
Shopify Partner
10000 1241 1579

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

Amazing chess game | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
diydesigners
Explorer
50 0 15

Yes, I can do that request access?

suyash1
Shopify Partner
10000 1241 1579

@diydesigners - I sent you the request

Amazing chess game | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
diydesigners
Explorer
50 0 15

@suyash1 ValueBar.png

 

suyash1
Shopify Partner
10000 1241 1579

@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.

Amazing chess game | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
diydesigners
Explorer
50 0 15

email: thediydesigners@gmail.com
phone 707 292 1987

 

diydesigners
Explorer
50 0 15

Can you make them one above the other?

suyash1
Shopify Partner
10000 1241 1579

@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.

Amazing chess game | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
diydesigners
Explorer
50 0 15

Could you maybe put the email above the phone number?

suyash1
Shopify Partner
10000 1241 1579

@diydesigners - please check now

Amazing chess game | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
diydesigners
Explorer
50 0 15

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


suyash1
Shopify Partner
10000 1241 1579

This is an accepted solution.

@diydesigners - please check now.

Amazing chess game | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
diydesigners
Explorer
50 0 15

Looks perfect!

Mark3347
Excursionist
43 3 10

Where would you add this code? Header.liquid?

ariservice
Tourist
16 0 2

where did you add this code?

suyash1
Shopify Partner
10000 1241 1579

@ariservice - edited the header.liquid template code

Amazing chess game | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.