How can I add a clickable phone number to my website header?

[sweeperoo]

Hello,

My URL is www.sweeperoo.com

I would like to add a clickable telephone number for my business on the HEADER of the website. Please let me know if this is possible and how it is best to do so.

Thank You All

[Zworthkey]

                  0208 123 3630
                

@sweeperoo

Add this code, in the header file.

[sweeperoo]

Hello!

Thanks for your assistance and for providing the code. Could you please specify where I enter this code in the header file?

Thank You

[dmwwebartisan]

@sweeperoo

Please share a screenshot of where to show the phone number in the header.

Thanks!

[sweeperoo]

[dmwwebartisan]

@sweeperoo

Please share your sections/header.liquid file code .

Thanks!

[sweeperoo]

Hello!

please see code below

{%- if settings.predictive_search_enabled -%} {%- endif -%}

{{ ‘component-list-menu.css’ | asset_url | stylesheet_tag }}
{{ ‘component-search.css’ | asset_url | stylesheet_tag }}
{{ ‘component-menu-drawer.css’ | asset_url | stylesheet_tag }}
{{ ‘component-cart-notification.css’ | asset_url | stylesheet_tag }}
{{ ‘component-cart-items.css’ | asset_url | stylesheet_tag }}

header-drawer { justify-self: start; margin-left: -1.2rem; } @media screen and (min-width: 990px) { header-drawer { display: none; } } .menu-drawer-container { display: flex; } .list-menu { list-style: none; padding: 0; margin: 0; } .list-menu--inline { display: inline-flex; flex-wrap: wrap; } summary.list-menu__item { padding-right: 2.7rem; } .list-menu__item { display: flex; align-items: center; line-height: calc(1 + 0.3 / var(--font-body-scale)); } .list-menu__item--link { text-decoration: none; padding-bottom: 1rem; padding-top: 1rem; line-height: calc(1 + 0.8 / var(--font-body-scale)); } @media screen and (min-width: 750px) { .list-menu__item--link { padding-bottom: 0.5rem; padding-top: 0.5rem; } }

{%- style -%}
.section-header {
margin-bottom: {{ section.settings.margin_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-header {
margin-bottom: {{ section.settings.margin_bottom }}px;
}
}
{%- endstyle -%}

<{% if section.settings.enable_sticky_header %}sticky-header{% else %}div{% endif %} class="header-wrapper color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator %} header-wrapper--border-bottom{% endif %}"> {%- if section.settings.menu != blank -%}

{% render 'icon-hamburger' %} {% render 'icon-close' %}

{%- for link in section.settings.menu.links -%}
• {%- if link.links != blank -%}
  {{ link.title | escape }} {% render 'icon-arrow' %} {% render 'icon-caret' %}

  {% render 'icon-arrow' %} {{ link.title | escape }}

  {%- for childlink in link.links -%}
  • {%- if childlink.links == blank -%} {{ childlink.title | escape }} {%- else -%}
    {{ childlink.title | escape }} {% render 'icon-arrow' %} {% render 'icon-caret' %}

    {% render 'icon-arrow' %} {{ childlink.title | escape }}

    {%- for grandchildlink in childlink.links -%}
    • {{ grandchildlink.title | escape }}
    {%- endfor -%}
    {%- endif -%}
  {%- endfor -%}
  {%- else -%} {{ link.title | escape }} {%- endif -%}
{%- endfor -%}

{%- if shop.customer_accounts_enabled -%} {% render 'icon-account' %} {%- liquid if customer echo 'customer.account_fallback' | t else echo 'customer.log_in' | t endif -%} {%- endif -%}

{%- if settings.social_twitter_link != blank -%}
• {%- render 'icon-twitter' -%} {{ 'general.social.links.twitter' | t }}
{%- endif -%} {%- if settings.social_facebook_link != blank -%}
• {%- render 'icon-facebook' -%} {{ 'general.social.links.facebook' | t }}
{%- endif -%} {%- if settings.social_pinterest_link != blank -%}
• {%- render 'icon-pinterest' -%} {{ 'general.social.links.pinterest' | t }}
{%- endif -%} {%- if settings.social_instagram_link != blank -%}
• {%- render 'icon-instagram' -%} {{ 'general.social.links.instagram' | t }}
{%- endif -%} {%- if settings.social_tiktok_link != blank -%}
• {%- render 'icon-tiktok' -%} {{ 'general.social.links.tiktok' | t }}
{%- endif -%} {%- if settings.social_tumblr_link != blank -%}
• {%- render 'icon-tumblr' -%} {{ 'general.social.links.tumblr' | t }}
{%- endif -%} {%- if settings.social_snapchat_link != blank -%}
• {%- render 'icon-snapchat' -%} {{ 'general.social.links.snapchat' | t }}
{%- endif -%} {%- if settings.social_youtube_link != blank -%}
• {%- render 'icon-youtube' -%} {{ 'general.social.links.youtube' | t }}
{%- endif -%} {%- if settings.social_vimeo_link != blank -%}
• {%- render 'icon-vimeo' -%} {{ 'general.social.links.vimeo' | t }}
{%- endif -%}

{%- endif -%}

{%- if section.settings.logo_position == ‘top-center’ or section.settings.menu == blank -%}

{%- if settings.predictive_search_enabled -%} {%- endif -%}

{{ 'general.search.search' | t }}

{%- if settings.predictive_search_enabled -%}

{%- endif -%}

{%- if settings.predictive_search_enabled -%} {%- endif -%}

{%- endif -%}

{%- if request.page_type == ‘index’ -%}

{%- endif -%} {%- if section.settings.logo != blank -%} {%- assign image_size = section.settings.logo_width | append: 'x' -%} {%- else -%} {{ shop.name }} {%- endif -%} {%- if request.page_type == 'index' -%}

{%- endif -%}

{%- if section.settings.menu != blank -%}

{%- for link in section.settings.menu.links -%}
• {%- if link.links != blank -%}
  {{ link.title | escape }} {% render 'icon-caret' %}

  {%- for childlink in link.links -%}
  • {%- if childlink.links == blank -%} {{ childlink.title | escape }} {%- else -%}
    {{ childlink.title | escape }} {% render 'icon-caret' %}

    {%- for grandchildlink in childlink.links -%}
    • {{ grandchildlink.title | escape }}
    {%- endfor -%}
    {%- endif -%}
  {%- endfor -%}
  {%- else -%} {{ link.title | escape }} {%- endif -%}
{%- endfor -%}

{%- endif -%}

{%- if settings.predictive_search_enabled -%} {%- endif -%}

{{ 'general.search.search' | t }}

{%- if settings.predictive_search_enabled -%}

{%- endif -%}

{%- if settings.predictive_search_enabled -%} {%- endif -%}

{%- if shop.customer_accounts_enabled -%}

{% render ‘icon-account’ %}

{%- liquid
if customer
echo ‘customer.account_fallback’ | t
else
echo ‘customer.log_in’ | t
endif
-%}


{%- endif -%}

{%- liquid if cart == empty render 'icon-cart-empty' else render 'icon-cart' endif -%} {{ 'templates.cart.cart' | t }} {%- if cart != empty -%}

{%- if cart.item_count < 100 -%} {{ cart.item_count }} {%- endif -%} {{ 'sections.header.cart_count' | t: count: cart.item_count }}

{%- endif -%}

{%- render ‘cart-notification’, color_scheme: section.settings.color_scheme -%}

{% javascript %}
class StickyHeader extends HTMLElement {
constructor() {
super();
}

connectedCallback() {
this.header = document.getElementById(‘shopify-section-header’);
this.headerBounds = {};
this.currentScrollTop = 0;
this.preventReveal = false;
this.predictiveSearch = this.querySelector(‘predictive-search’);

this.onScrollHandler = this.onScroll.bind(this);
this.hideHeaderOnScrollUp = () => this.preventReveal = true;

this.addEventListener(‘preventHeaderReveal’, this.hideHeaderOnScrollUp);
window.addEventListener(‘scroll’, this.onScrollHandler, false);

this.createObserver();
}

disconnectedCallback() {
this.removeEventListener(‘preventHeaderReveal’, this.hideHeaderOnScrollUp);
window.removeEventListener(‘scroll’, this.onScrollHandler);
}

createObserver() {
let observer = new IntersectionObserver((entries, observer) => {
this.headerBounds = entries[0].intersectionRect;
observer.disconnect();
});

observer.observe(this.header);
}

onScroll() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

if (this.predictiveSearch && this.predictiveSearch.isOpen) return;

if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
requestAnimationFrame(this.hide.bind(this));
} else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
if (!this.preventReveal) {
requestAnimationFrame(this.reveal.bind(this));
} else {
window.clearTimeout(this.isScrolling);

this.isScrolling = setTimeout(() => {
this.preventReveal = false;
}, 66);

requestAnimationFrame(this.hide.bind(this));
}
} else if (scrollTop <= this.headerBounds.top) {
requestAnimationFrame(this.reset.bind(this));
}

this.currentScrollTop = scrollTop;
}

hide() {
this.header.classList.add(‘shopify-section-header-hidden’, ‘shopify-section-header-sticky’);
this.closeMenuDisclosure();
this.closeSearchModal();
}

reveal() {
this.header.classList.add(‘shopify-section-header-sticky’, ‘animate’);
this.header.classList.remove(‘shopify-section-header-hidden’);
}

reset() {
this.header.classList.remove(‘shopify-section-header-hidden’, ‘shopify-section-header-sticky’, ‘animate’);
}

closeMenuDisclosure() {
this.disclosures = this.disclosures || this.header.querySelectorAll(‘details-disclosure’);
this.disclosures.forEach(disclosure => disclosure.close());
}

closeSearchModal() {
this.searchModal = this.searchModal || this.header.querySelector(‘details-modal’);
this.searchModal.close(false);
}
}

customElements.define(‘sticky-header’, StickyHeader);
{% endjavascript %}

{%- if request.page_type == ‘index’ -%}
{% assign potential_action_target = shop.url | append: routes.search_url | append: “?q={search_term_string}” %}

{%- endif -%}

{% schema %}
{
“name”: “t:sections.header.name”,
“class”: “section-header”,
“settings”: [
{
“type”: “select”,
“id”: “color_scheme”,
“options”: [
{
“value”: “accent-1”,
“label”: “t:sections.header.settings.color_scheme.options__1.label”
},
{
“value”: “accent-2”,
“label”: “t:sections.header.settings.color_scheme.options__2.label”
},
{
“value”: “background-1”,
“label”: “t:sections.header.settings.color_scheme.options__3.label”
},
{
“value”: “background-2”,
“label”: “t:sections.header.settings.color_scheme.options__4.label”
},
{
“value”: “inverse”,
“label”: “t:sections.header.settings.color_scheme.options__5.label”
}
],
“default”: “background-1”,
“label”: “t:sections.header.settings.color_scheme.label”
},
{
“type”: “image_picker”,
“id”: “logo”,
“label”: “t:sections.header.settings.logo.label”
},
{
“type”: “range”,
“id”: “logo_width”,
“min”: 50,
“max”: 250,
“step”: 10,
“default”: 100,
“unit”: “t:sections.header.settings.logo_width.unit”,
“label”: “t:sections.header.settings.logo_width.label”
},
{
“type”: “select”,
“id”: “logo_position”,
“options”: [
{
“value”: “middle-left”,
“label”: “t:sections.header.settings.logo_position.options__1.label”
},
{
“value”: “top-left”,
“label”: “t:sections.header.settings.logo_position.options__2.label”
},
{
“value”: “top-center”,
“label”: “t:sections.header.settings.logo_position.options__3.label”
}
],
“default”: “middle-left”,
“label”: “t:sections.header.settings.logo_position.label”,
“info”: “t:sections.header.settings.logo_position.info”
},
{
“type”: “link_list”,
“id”: “menu”,
“default”: “main-menu”,
“label”: “t:sections.header.settings.menu.label”
},
{
“type”: “checkbox”,
“id”: “show_line_separator”,
“default”: true,
“label”: “t:sections.header.settings.show_line_separator.label”
},
{
“type”: “checkbox”,
“id”: “enable_sticky_header”,
“default”: true,
“label”: “t:sections.header.settings.enable_sticky_header.label”,
“info”: “t:sections.header.settings.enable_sticky_header.info”
},
{
“type”: “header”,
“content”: “t:sections.all.spacing”
},
{
“type”: “range”,
“id”: “margin_bottom”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.header.settings.margin_bottom.label”,
“default”: 0
}
]
}
{% endschema %}

[sweeperoo]

|






{%- if settings.predictive_search_enabled -%}


{%- endif -%}



{{ ‘component-list-menu.css’ | asset_url | stylesheet_tag }}
{{ ‘component-search.css’ | asset_url | stylesheet_tag }}
{{ ‘component-menu-drawer.css’ | asset_url | stylesheet_tag }}
{{ ‘component-cart-notification.css’ | asset_url | stylesheet_tag }}
{{ ‘component-cart-items.css’ | asset_url | stylesheet_tag }}




header-drawer {
justify-self: start;
margin-left: -1.2rem;
}



[email removed] screen and (min-width: 990px) {
header-drawer {
display: none;
}
}



.menu-drawer-container {
display: flex;
}



.list-menu {
list-style: none;
padding: 0;
margin: 0;
}



.list-menu–inline {
display: inline-flex;
flex-wrap: wrap;
}



summary.list-menu__item {
padding-right: 2.7rem;
}



.list-menu__item {
display: flex;
align-items: center;
line-height: calc(1 + 0.3 / var(–font-body-scale));
}



.list-menu__item–link {
text-decoration: none;
padding-bottom: 1rem;
padding-top: 1rem;
line-height: calc(1 + 0.8 / var(–font-body-scale));
}



[email removed] screen and (min-width: 750px) {
.list-menu__item–link {
padding-bottom: 0.5rem;
padding-top: 0.5rem;
}
}




{%- style -%}
.section-header {
margin-bottom: {{ section.settings.margin_bottom | times: 0.75 | round: 0 }}px;
}



[email removed] screen and (min-width: 750px) {
.section-header {
margin-bottom: {{ section.settings.margin_bottom }}px;
}
}
{%- endstyle -%}




















<{% if section.settings.enable_sticky_header %}sticky-header{% else %}div{% endif %} class=“header-wrapper color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator %} header-wrapper–border-bottom{% endif %}”>

{%- if section.settings.menu != blank -%}

{% render ‘icon-hamburger’ %}
{% render ‘icon-close’ %}

{%- for link in section.settings.menu.links -%}

• 
  {%- if link.links != blank -%}
  
  
  

  
  {{ link.title | escape }}
  {% render ‘icon-arrow’ %}
  {% render ‘icon-caret’ %}
  

  
  

  
  

  
  
  {% render ‘icon-arrow’ %}
  {{ link.title | escape }}
  
  

  
  {%- for childlink in link.links -%}
  
  • 
    {%- if childlink.links == blank -%}
    <a href=“{{ childlink.url }}” class=“menu-drawer__menu-item link link–text list-menu__item focus-inset{% if childlink.current %} menu-drawer__menu-item–active{% endif %}”{% if childlink.current %} aria-current=“page”{% endif %}>
    {{ childlink.title | escape }}
    
    {%- else -%}
    
    
    

    
    {{ childlink.title | escape }}
    {% render ‘icon-arrow’ %}
    {% render ‘icon-caret’ %}
    

    
    

    
    
    {% render ‘icon-arrow’ %}
    {{ childlink.title | escape }}
    
    

    
    {%- for grandchildlink in childlink.links -%}
    
    • 
      <a href=“{{ grandchildlink.url }}” class=“menu-drawer__menu-item link link–text list-menu__item focus-inset{% if grandchildlink.current %} menu-drawer__menu-item–active{% endif %}”{% if grandchildlink.current %} aria-current=“page”{% endif %}>
      {{ grandchildlink.title | escape }}
      
      
    
    {%- endfor -%}
    

    
    

    
    
    
    {%- endif -%}
    
  
  {%- endfor -%}
  

  
  

  
  

  
  
  
  {%- else -%}
  <a href=“{{ link.url }}” class=“menu-drawer__menu-item list-menu__item link link–text focus-inset{% if link.current %} menu-drawer__menu-item–active{% endif %}”{% if link.current %} aria-current=“page”{% endif %}>
  {{ link.title | escape }}
  
  {%- endif -%}
  

{%- endfor -%}

{%- if shop.customer_accounts_enabled -%}

{% render ‘icon-account’ %}
{%- liquid
if customer
echo ‘customer.account_fallback’ | t
else
echo ‘customer.log_in’ | t
endif
-%}

{%- endif -%}

{%- if settings.social_twitter_link != blank -%}

• 
  
  {%- render ‘icon-twitter’ -%}
  {{ ‘general.social.links.twitter’ | t }}
  
  

{%- endif -%}
{%- if settings.social_facebook_link != blank -%}

• 
  
  {%- render ‘icon-facebook’ -%}
  {{ ‘general.social.links.facebook’ | t }}
  
  

{%- endif -%}
{%- if settings.social_pinterest_link != blank -%}

• 
  
  {%- render ‘icon-pinterest’ -%}
  {{ ‘general.social.links.pinterest’ | t }}
  
  

{%- endif -%}
{%- if settings.social_instagram_link != blank -%}

• 
  
  {%- render ‘icon-instagram’ -%}
  {{ ‘general.social.links.instagram’ | t }}
  
  

{%- endif -%}
{%- if settings.social_tiktok_link != blank -%}

• 
  
  {%- render ‘icon-tiktok’ -%}
  {{ ‘general.social.links.tiktok’ | t }}
  
  

{%- endif -%}
{%- if settings.social_tumblr_link != blank -%}

• 
  
  {%- render ‘icon-tumblr’ -%}
  {{ ‘general.social.links.tumblr’ | t }}
  
  

{%- endif -%}
{%- if settings.social_snapchat_link != blank -%}

• 
  
  {%- render ‘icon-snapchat’ -%}
  {{ ‘general.social.links.snapchat’ | t }}
  
  

{%- endif -%}
{%- if settings.social_youtube_link != blank -%}

• 
  
  {%- render ‘icon-youtube’ -%}
  {{ ‘general.social.links.youtube’ | t }}
  
  

{%- endif -%}
{%- if settings.social_vimeo_link != blank -%}

• 
  
  {%- render ‘icon-vimeo’ -%}
  {{ ‘general.social.links.vimeo’ | t }}
  
  

{%- endif -%}

{%- endif -%}



{%- if section.settings.logo_position == ‘top-center’ or section.settings.menu == blank -%}

{%- if settings.predictive_search_enabled -%}

{%- endif -%}

<input class=“search__input field__input”
id=“Search-In-Modal-1”
type=“search”
name=“q”
value=“”
placeholder=“{{ ‘general.search.search’ | t }}”
{%- if settings.predictive_search_enabled -%}
role=“combobox”
aria-expanded=“false”
aria-owns=“predictive-search-results-list”
aria-controls=“predictive-search-results-list”
aria-haspopup=“listbox”
aria-autocomplete=“list”
autocorrect=“off”
autocomplete=“off”
autocapitalize=“off”
spellcheck=“false”
{%- endif -%}
>
{{ ‘general.search.search’ | t }}

{%- if settings.predictive_search_enabled -%}

{%- endif -%}

{%- if settings.predictive_search_enabled -%}

{%- endif -%}

{%- endif -%}



{%- if request.page_type == ‘index’ -%}

{%- endif -%}

{%- if section.settings.logo != blank -%}
{%- assign image_size = section.settings.logo_width | append: ‘x’ -%}
<img srcset=“{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x”
src=“{{ section.settings.logo | img_url: image_size }}”
loading=“lazy”
class=“header__heading-logo”
width=“{{ section.settings.logo.width }}”
height=“{{ section.settings.logo.height }}”
alt=“{{ section.settings.logo.alt | default: shop.name | escape }}”
>
{%- else -%}
{{ shop.name }}
{%- endif -%}

{%- if request.page_type == ‘index’ -%}

{%- endif -%}



{%- if section.settings.menu != blank -%}

{%- for link in section.settings.menu.links -%}

• 
  {%- if link.links != blank -%}
  
  
  
  

  
  <span {%- if link.child_active %} class=“header__active-menu-item”{% endif %}>{{ link.title | escape }}
  {% render ‘icon-caret’ %}
  

  
  

  
  {%- for childlink in link.links -%}
  
  • 
    {%- if childlink.links == blank -%}
    <a href=“{{ childlink.url }}” class=“header__menu-item list-menu__item link link–text focus-inset caption-large{% if childlink.current %} list-menu__item–active{% endif %}”{% if childlink.current %} aria-current=“page”{% endif %}>
    {{ childlink.title | escape }}
    
    {%- else -%}
    
    
    

    
    {{ childlink.title | escape }}
    {% render ‘icon-caret’ %}
    

    
    

    
    {%- for grandchildlink in childlink.links -%}
    
    • 
      <a href=“{{ grandchildlink.url }}” class=“header__menu-item list-menu__item link link–text focus-inset caption-large{% if grandchildlink.current %} list-menu__item–active{% endif %}”{% if grandchildlink.current %} aria-current=“page”{% endif %}>
      {{ grandchildlink.title | escape }}
      
      
    
    {%- endfor -%}
    

    
    
    
    {%- endif -%}
    
  
  {%- endfor -%}
  

  
  
  
  
  {%- else -%}
  <a href=“{{ link.url }}” class=“header__menu-item header__menu-item list-menu__item link link–text focus-inset”{% if link.current %} aria-current=“page”{% endif %}>
  <span {%- if link.current %} class=“header__active-menu-item”{% endif %}>{{ link.title | escape }}
  
  {%- endif -%}
  

{%- endfor -%}

{%- endif -%}

{%- if settings.predictive_search_enabled -%}

{%- endif -%}

<input class=“search__input field__input”
id=“Search-In-Modal”
type=“search”
name=“q”
value=“”
placeholder=“{{ ‘general.search.search’ | t }}”
{%- if settings.predictive_search_enabled -%}
role=“combobox”
aria-expanded=“false”
aria-owns=“predictive-search-results-list”
aria-controls=“predictive-search-results-list”
aria-haspopup=“listbox”
aria-autocomplete=“list”
autocorrect=“off”
autocomplete=“off”
autocapitalize=“off”
spellcheck=“false”
{%- endif -%}
>
{{ ‘general.search.search’ | t }}

{%- if settings.predictive_search_enabled -%}

{%- endif -%}

{%- if settings.predictive_search_enabled -%}

{%- endif -%}

{%- if shop.customer_accounts_enabled -%}

{% render ‘icon-account’ %}

{%- liquid
if customer
echo ‘customer.account_fallback’ | t
else
echo ‘customer.log_in’ | t
endif
-%}


{%- endif -%}




{%- liquid
if cart == empty
render ‘icon-cart-empty’
else
render ‘icon-cart’
endif
-%}
{{ ‘templates.cart.cart’ | t }}
{%- if cart != empty -%}

{%- if cart.item_count < 100 -%}
{{ cart.item_count }}
{%- endif -%}
{{ ‘sections.header.cart_count’ | t: count: cart.item_count }}

{%- endif -%}

</{% if section.settings.enable_sticky_header %}sticky-header{% else %}div{% endif %}>



{%- render ‘cart-notification’, color_scheme: section.settings.color_scheme -%}



{% javascript %}
class StickyHeader extends HTMLElement {
constructor() {
super();
}



connectedCallback() {
this.header = document.getElementById(‘shopify-section-header’);
this.headerBounds = {};
this.currentScrollTop = 0;
this.preventReveal = false;
this.predictiveSearch = this.querySelector(‘predictive-search’);



this.onScrollHandler = this.onScroll.bind(this);
this.hideHeaderOnScrollUp = () => this.preventReveal = true;



this.addEventListener(‘preventHeaderReveal’, this.hideHeaderOnScrollUp);
window.addEventListener(‘scroll’, this.onScrollHandler, false);



this.createObserver();
}



disconnectedCallback() {
this.removeEventListener(‘preventHeaderReveal’, this.hideHeaderOnScrollUp);
window.removeEventListener(‘scroll’, this.onScrollHandler);
}



createObserver() {
let observer = new IntersectionObserver((entries, observer) => {
this.headerBounds = entries[0].intersectionRect;
observer.disconnect();
});



observer.observe(this.header);
}



onScroll() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;



if (this.predictiveSearch && this.predictiveSearch.isOpen) return;



if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
requestAnimationFrame(this.hide.bind(this));
} else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
if (!this.preventReveal) {
requestAnimationFrame(this.reveal.bind(this));
} else {
window.clearTimeout(this.isScrolling);



this.isScrolling = setTimeout(() => {
this.preventReveal = false;
}, 66);



requestAnimationFrame(this.hide.bind(this));
}
} else if (scrollTop <= this.headerBounds.top) {
requestAnimationFrame(this.reset.bind(this));
}




this.currentScrollTop = scrollTop;
}



hide() {
this.header.classList.add(‘shopify-section-header-hidden’, ‘shopify-section-header-sticky’);
this.closeMenuDisclosure();
this.closeSearchModal();
}



reveal() {
this.header.classList.add(‘shopify-section-header-sticky’, ‘animate’);
this.header.classList.remove(‘shopify-section-header-hidden’);
}



reset() {
this.header.classList.remove(‘shopify-section-header-hidden’, ‘shopify-section-header-sticky’, ‘animate’);
}



closeMenuDisclosure() {
this.disclosures = this.disclosures || this.header.querySelectorAll(‘details-disclosure’);
this.disclosures.forEach(disclosure => disclosure.close());
}



closeSearchModal() {
this.searchModal = this.searchModal || this.header.querySelector(‘details-modal’);
this.searchModal.close(false);
}
}



customElements.define(‘sticky-header’, StickyHeader);
{% endjavascript %}







{%- if request.page_type == ‘index’ -%}
{% assign potential_action_target = shop.url | append: routes.search_url | append: “?q={search_term_string}” %}

{%- endif -%}



{% schema %}
{
“name”: “t:sections.header.name”,
“class”: “section-header”,
“settings”: [
{
“type”: “select”,
“id”: “color_scheme”,
“options”: [
{
“value”: “accent-1”,
“label”: “t:sections.header.settings.color_scheme.options__1.label”
},
{
“value”: “accent-2”,
“label”: “t:sections.header.settings.color_scheme.options__2.label”
},
{
“value”: “background-1”,
“label”: “t:sections.header.settings.color_scheme.options__3.label”
},
{
“value”: “background-2”,
“label”: “t:sections.header.settings.color_scheme.options__4.label”
},
{
“value”: “inverse”,
“label”: “t:sections.header.settings.color_scheme.options__5.label”
}
],
“default”: “background-1”,
“label”: “t:sections.header.settings.color_scheme.label”
},
{
“type”: “image_picker”,
“id”: “logo”,
“label”: “t:sections.header.settings.logo.label”
},
{
“type”: “range”,
“id”: “logo_width”,
“min”: 50,
“max”: 250,
“step”: 10,
“default”: 100,
“unit”: “t:sections.header.settings.logo_width.unit”,
“label”: “t:sections.header.settings.logo_width.label”
},
{
“type”: “select”,
“id”: “logo_position”,
“options”: [
{
“value”: “middle-left”,
“label”: “t:sections.header.settings.logo_position.options__1.label”
},
{
“value”: “top-left”,
“label”: “t:sections.header.settings.logo_position.options__2.label”
},
{
“value”: “top-center”,
“label”: “t:sections.header.settings.logo_position.options__3.label”
}
],
“default”: “middle-left”,
“label”: “t:sections.header.settings.logo_position.label”,
“info”: “t:sections.header.settings.logo_position.info”
},
{
“type”: “link_list”,
“id”: “menu”,
“default”: “main-menu”,
“label”: “t:sections.header.settings.menu.label”
},
{
“type”: “checkbox”,
“id”: “show_line_separator”,
“default”: true,
“label”: “t:sections.header.settings.show_line_separator.label”
},
{
“type”: “checkbox”,
“id”: “enable_sticky_header”,
“default”: true,
“label”: “t:sections.header.settings.enable_sticky_header.label”,
“info”: “t:sections.header.settings.enable_sticky_header.info”
},
{
“type”: “header”,
“content”: “t:sections.all.spacing”
},
{
“type”: “range”,
“id”: “margin_bottom”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.header.settings.margin_bottom.label”,
“default”: 0
}
]
}
{% endschema %}

|
| - |

[sweeperoo]

Hey I shared the code above let me know if adding the telephone number is an issue or can be done please!

Thank you