Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
This is an accepted solution.
@diydesigners - please check now.
thanks for post
can you please share your header code so i will update
<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: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 %}
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
DM me on Whatsap? 7072921987
@diydesigners - some code editing will be needed to add email and phone number.... can you please add me as collaborator?
Yes, I can do that request access?
@diydesigners - I sent you the request
@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.
Can you make them one above the other?
@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.
Could you maybe put the email above the phone number?
@diydesigners - please check now
It looks great! One last thing could you set it to align right?
This is an accepted solution.
@diydesigners - please check now.
Looks perfect!
Where would you add this code? Header.liquid?
where did you add this code?
@ariservice - edited the header.liquid template code
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024