How can I add a new icon to the header in the Taste theme?

Gaiar · September 21, 2022, 2:39pm

Dear Community Members,

Please help me add a new icon beside the cart & search icons.

I need to add an icon to direct my customers to a 3rd party URL/platform where they can track their orders.

Website URL:

URL to the icon:

https://www.flaticon.com/free-icon/delivery-truck_869121?term=shipping&page=1&position=48&page=1&position=48&related_id=869121&origin=search

Thank you.

LitCommerce · September 22, 2022, 4:32am

Hi @Gaiar ,

First, please send me the svg code of the icon:

Next, send me the code of header.liquid file, I will help you to add it

Jenny-Arena · September 22, 2022, 6:27am

Hi there,

Let’s try this one

Go to the online store > Edit code > find a file " header. liquid " > class header__icons > add the SVG you want ( I mean the icon).

Best regards,

Jenny.

Gaiar · September 22, 2022, 12:30pm

Thank you @LitCommerce

This is the header.liquid code:

{%- if settings.predictive_search_enabled -%} {%- endif -%} {%- if section.settings.menu_type_desktop == 'mega' -%} {{ 'component-mega-menu.css' | asset_url | stylesheet_tag }} {%- endif -%} {%- if settings.cart_type == "drawer" -%} {{ 'component-cart-drawer.css' | asset_url | stylesheet_tag }} {{ 'component-cart.css' | asset_url | stylesheet_tag }} {{ 'component-totals.css' | asset_url | stylesheet_tag }} {{ 'component-price.css' | asset_url | stylesheet_tag }} {{ 'component-discounts.css' | asset_url | stylesheet_tag }} {{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }} {%- 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; } .header__heading-logo { max-width: {{ section.settings.logo_width }}px; } @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-left: 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 -%}
.header {
padding-top: {{ section.settings.padding_top | times: 0.5 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.5 | round: 0 }}px;
}

.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;
}
}

@media screen and (min-width: 990px) {
.header {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

{%- if settings.cart_type == “drawer” -%}

{%- endif -%}

<{% 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' %}

{%- if link.links != blank -%}
{{ link.title | escape }} {% render 'icon-arrow' %} {% render 'icon-caret' %}
{% render 'icon-arrow' %} {{ link.title | escape }}
- {%- 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 -%}
{%- else -%} {{ link.title | escape }} {%- 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 -%}

{%- render 'icon-twitter' -%} {{ 'general.social.links.twitter' | t }}
{%- render 'icon-facebook' -%} {{ 'general.social.links.facebook' | t }}
{%- render 'icon-pinterest' -%} {{ 'general.social.links.pinterest' | t }}
{%- render 'icon-instagram' -%} {{ 'general.social.links.instagram' | t }}
{%- render 'icon-tiktok' -%} {{ 'general.social.links.tiktok' | t }}
{%- render 'icon-tumblr' -%} {{ 'general.social.links.tumblr' | t }}
{%- render 'icon-snapchat' -%} {{ 'general.social.links.snapchat' | t }}
{%- render 'icon-youtube' -%} {{ 'general.social.links.youtube' | t }}
{%- render 'icon-vimeo' -%} {{ 'general.social.links.vimeo' | t }}

{%- endif -%}

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

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

{%- 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 logo_alt = section.settings.logo.alt | default: shop.name | escape -%} {%- assign logo_height = section.settings.logo_width | divided_by: section.settings.logo.aspect_ratio -%} {{ section.settings.logo | image_url: width: section.settings.width | image_tag: class: 'header__heading-logo', widths: '50, 100, 150, 200, 250, 300, 400, 500', height: logo_height, width: section.settings.logo_width, alt: logo_alt }} {%- else -%} {{ shop.name }} {%- endif -%} {%- if request.page_type == 'index' -%}

{%- endif -%}

{%- if section.settings.menu != blank -%}
{%- if section.settings.menu_type_desktop == ‘dropdown’ -%}

{%- if link.links != blank -%}
{{ link.title | escape }} {% render 'icon-caret' %}
- {%- if childlink.links == blank -%} {{ childlink.title | escape }} {%- else -%}
  {{ childlink.title | escape }} {% render 'icon-caret' %}
  - {{ grandchildlink.title | escape }}
  {%- endif -%}
{%- else -%} {{ link.title | escape }} {%- endif -%}

{%- else -%}

{%- if link.links != blank -%}
{{ link.title | escape }} {% render 'icon-caret' %}
- {{ childlink.title | escape }} {%- if childlink.links != blank -%}
  - {{ grandchildlink.title | escape }}
  {%- endif -%}
{%- else -%} {{ link.title | escape }} {%- endif -%}

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

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

{%- 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 settings.cart_type == “notification” -%}
{%- render ‘cart-notification’, color_scheme: section.settings.color_scheme -%}
{%- endif -%}

{% 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) {
if (this.preventHide) return;
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(‘header-menu’);
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 = request.origin | 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.all.colors.accent_1.label”
},
{
“value”: “accent-2”,
“label”: “t:sections.all.colors.accent_2.label”
},
{
“value”: “background-1”,
“label”: “t:sections.all.colors.background_1.label”
},
{
“value”: “background-2”,
“label”: “t:sections.all.colors.background_2.label”
},
{
“value”: “inverse”,
“label”: “t:sections.all.colors.inverse.label”
}
],
“default”: “background-1”,
“label”: “t:sections.all.colors.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”: “select”,
“id”: “menu_type_desktop”,
“options”: [
{
“value”: “dropdown”,
“label”: “t:sections.header.settings.menu_type_desktop.options__1.label”
},
{
“value”: “mega”,
“label”: “t:sections.header.settings.menu_type_desktop.options__2.label”
}
],
“default”: “dropdown”,
“label”: “t:sections.header.settings.menu_type_desktop.label”,
“info”: “t:sections.header.settings.menu_type_desktop.info”
},
{
“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
},
{
“type”: “header”,
“content”: “t:sections.all.padding.section_padding_heading”
},
{
“type”: “range”,
“id”: “padding_top”,
“min”: 0,
“max”: 36,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_top”,
“default”: 20
},
{
“type”: “range”,
“id”: “padding_bottom”,
“min”: 0,
“max”: 36,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_bottom”,
“default”: 20
}
]
}
{% endschema %}

This is the SVG code - i guess :)-:

<?xml version="1.0" ?>

Gaiar · September 22, 2022, 12:33pm

Thank you @Jenny-Arena

Unfortunately, it didn’t work.

I guess i don’t have the correct SVg code:

<?xml version="1.0" ?>

Gaiar · September 22, 2022, 12:35pm

Thank you @LitCommerce

This is the SVG code - i guess -

<?xml version="1.0" ?>

This is the header.liquid code:

{%- if settings.predictive_search_enabled -%} {%- endif -%} {%- if section.settings.menu_type_desktop == 'mega' -%} {{ 'component-mega-menu.css' | asset_url | stylesheet_tag }} {%- endif -%} {%- if settings.cart_type == "drawer" -%} {{ 'component-cart-drawer.css' | asset_url | stylesheet_tag }} {{ 'component-cart.css' | asset_url | stylesheet_tag }} {{ 'component-totals.css' | asset_url | stylesheet_tag }} {{ 'component-price.css' | asset_url | stylesheet_tag }} {{ 'component-discounts.css' | asset_url | stylesheet_tag }} {{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }} {%- 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; } .header__heading-logo { max-width: {{ section.settings.logo_width }}px; } @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-left: 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 -%}
.header {
padding-top: {{ section.settings.padding_top | times: 0.5 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.5 | round: 0 }}px;
}

.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;
}
}

@media screen and (min-width: 990px) {
.header {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

{%- if settings.cart_type == “drawer” -%}

{%- endif -%}

<{% 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' %}

{%- if link.links != blank -%}
{{ link.title | escape }} {% render 'icon-arrow' %} {% render 'icon-caret' %}
{% render 'icon-arrow' %} {{ link.title | escape }}
- {%- 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 -%}
{%- else -%} {{ link.title | escape }} {%- 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 -%}

{%- render 'icon-twitter' -%} {{ 'general.social.links.twitter' | t }}
{%- render 'icon-facebook' -%} {{ 'general.social.links.facebook' | t }}
{%- render 'icon-pinterest' -%} {{ 'general.social.links.pinterest' | t }}
{%- render 'icon-instagram' -%} {{ 'general.social.links.instagram' | t }}
{%- render 'icon-tiktok' -%} {{ 'general.social.links.tiktok' | t }}
{%- render 'icon-tumblr' -%} {{ 'general.social.links.tumblr' | t }}
{%- render 'icon-snapchat' -%} {{ 'general.social.links.snapchat' | t }}
{%- render 'icon-youtube' -%} {{ 'general.social.links.youtube' | t }}
{%- render 'icon-vimeo' -%} {{ 'general.social.links.vimeo' | t }}

{%- endif -%}

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

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

{%- 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 logo_alt = section.settings.logo.alt | default: shop.name | escape -%} {%- assign logo_height = section.settings.logo_width | divided_by: section.settings.logo.aspect_ratio -%} {{ section.settings.logo | image_url: width: section.settings.width | image_tag: class: 'header__heading-logo', widths: '50, 100, 150, 200, 250, 300, 400, 500', height: logo_height, width: section.settings.logo_width, alt: logo_alt }} {%- else -%} {{ shop.name }} {%- endif -%} {%- if request.page_type == 'index' -%}

{%- endif -%}

{%- if section.settings.menu != blank -%}
{%- if section.settings.menu_type_desktop == ‘dropdown’ -%}

{%- if link.links != blank -%}
{{ link.title | escape }} {% render 'icon-caret' %}
- {%- if childlink.links == blank -%} {{ childlink.title | escape }} {%- else -%}
  {{ childlink.title | escape }} {% render 'icon-caret' %}
  - {{ grandchildlink.title | escape }}
  {%- endif -%}
{%- else -%} {{ link.title | escape }} {%- endif -%}

{%- else -%}

{%- if link.links != blank -%}
{{ link.title | escape }} {% render 'icon-caret' %}
- {{ childlink.title | escape }} {%- if childlink.links != blank -%}
  - {{ grandchildlink.title | escape }}
  {%- endif -%}
{%- else -%} {{ link.title | escape }} {%- endif -%}

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

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

{%- 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 settings.cart_type == “notification” -%}
{%- render ‘cart-notification’, color_scheme: section.settings.color_scheme -%}
{%- endif -%}

{% 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) {
if (this.preventHide) return;
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(‘header-menu’);
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 = request.origin | 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.all.colors.accent_1.label”
},
{
“value”: “accent-2”,
“label”: “t:sections.all.colors.accent_2.label”
},
{
“value”: “background-1”,
“label”: “t:sections.all.colors.background_1.label”
},
{
“value”: “background-2”,
“label”: “t:sections.all.colors.background_2.label”
},
{
“value”: “inverse”,
“label”: “t:sections.all.colors.inverse.label”
}
],
“default”: “background-1”,
“label”: “t:sections.all.colors.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”: “select”,
“id”: “menu_type_desktop”,
“options”: [
{
“value”: “dropdown”,
“label”: “t:sections.header.settings.menu_type_desktop.options__1.label”
},
{
“value”: “mega”,
“label”: “t:sections.header.settings.menu_type_desktop.options__2.label”
}
],
“default”: “dropdown”,
“label”: “t:sections.header.settings.menu_type_desktop.label”,
“info”: “t:sections.header.settings.menu_type_desktop.info”
},
{
“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
},
{
“type”: “header”,
“content”: “t:sections.all.padding.section_padding_heading”
},
{
“type”: “range”,
“id”: “padding_top”,
“min”: 0,
“max”: 36,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_top”,
“default”: 20
},
{
“type”: “range”,
“id”: “padding_bottom”,
“min”: 0,
“max”: 36,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_bottom”,
“default”: 20
}
]
}
{% endschema %}

Gaiar · September 22, 2022, 12:45pm

Thank you @LitCommerce

Attached is the header.liquid code.

This is the SVG code - I guess -

<?xml version="1.0" ?>

LitCommerce · September 22, 2022, 12:56pm

Hi @Gaiar ,

Please change all code header.liquid file:


{%- if settings.predictive_search_enabled -%}
  
  
{%- endif -%}
{%- if section.settings.menu_type_desktop == 'mega' -%}
  
  
{%- endif -%}
{%- if settings.cart_type == "drawer" -%}
  {{ 'component-cart-drawer.css' | asset_url | stylesheet_tag }}
  {{ 'component-cart.css' | asset_url | stylesheet_tag }}
  {{ 'component-totals.css' | asset_url | stylesheet_tag }}
  {{ 'component-price.css' | asset_url | stylesheet_tag }}
  {{ 'component-discounts.css' | asset_url | stylesheet_tag }}
  {{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}
{%- endif -%}

{%- style -%}
  .header {
    padding-top: {{ section.settings.padding_top | times: 0.5 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.5 | round: 0 }}px;
  }

  .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;
    }
  }

  @media screen and (min-width: 990px) {
    .header {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

{%- if settings.cart_type == "drawer" -%}
  
{%- endif -%}

<{% 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 settings.cart_type == "notification" -%}
  {%- render 'cart-notification', color_scheme: section.settings.color_scheme -%}
{%- endif -%}

{% 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) {
        if (this.preventHide) return;
        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('header-menu');
      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 = request.origin | 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.all.colors.accent_1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.all.colors.accent_2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.all.colors.background_1.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.all.colors.background_2.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.all.colors.inverse.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.all.colors.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": "select",
      "id": "menu_type_desktop",
      "options": [
        {
          "value": "dropdown",
          "label": "t:sections.header.settings.menu_type_desktop.options__1.label"
        },
        {
          "value": "mega",
          "label": "t:sections.header.settings.menu_type_desktop.options__2.label"
        }
      ],
      "default": "dropdown",
      "label": "t:sections.header.settings.menu_type_desktop.label",
      "info": "t:sections.header.settings.menu_type_desktop.info"
    },
    {
      "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
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 36,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 20
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 36,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 20
    }
  ]
}
{% endschema %}

Hope it helps!

Gaiar · September 22, 2022, 1:05pm

Thank you so much @Jenny-Arena

It works perfectly.

Would you please share with me, in which line did you place the SVG code?

Is the SVG code I shared correct?

LitCommerce · September 22, 2022, 1:26pm

Hi @Gaiar ,

I have set the svg code here, you can change the icon yourself if you want

Gaiar · September 27, 2022, 11:36am

Thanks a lot @LitCommerce

Would you please tell me how to add the URL to the icon?

and how to give it that pop effect on mouse hover? (same as the other 2 icons)

Than you.

LitCommerce · September 27, 2022, 1:37pm

Hi @Gaiar ,

Please change code here:

Code:

You can change the link at href=“#”

Gaiar · September 28, 2022, 9:33am

Thank you so much.

@LitCommerce

Topic		Replies	Views
How can I change the look of my search icon in the header? Store Design design , customizations , css , shopify-themes	10	55	March 27, 2023
Dawn Theme: How do I add social media icons to the header infront of the cart icon? Technical Q&A	10	27	October 17, 2022
Missing Search icon and Shopping cart Store Design header , cart-page	8	27	July 30, 2024
How can I change my cart icon to a small size with a transparent background? Store Design	10	11	January 26, 2022
Removing search icon and replacing with instagram icon Store Design design	8	44	August 29, 2023

How can I add a new icon to the header in the Taste theme?

Related topics