Help adding my email and phone number to header.

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

KetanKumar
Shopify Partner
22472 2277 8367

@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
0 Likes
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
22472 2277 8367

@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

0 Likes
suyash1
Shopify Partner
3245 363 533

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

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
diydesigners
Explorer
50 0 15

Yes, I can do that request access?

0 Likes
suyash1
Shopify Partner
3245 363 533

@diydesigners - I sent you the request

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
diydesigners
Explorer
50 0 15

@suyash1 ValueBar.png

 

0 Likes
suyash1
Shopify Partner
3245 363 533

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

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes