Custom codes

Hi, This link is for appropriate users only. Click buy to see the code. 1. In the code editor, find the Section folder, and open the header.liquid. Replace the whole code with the 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.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 -%} <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' -%} {%- else -%} {{ shop.name }} {%- endif -%} {%- if request.page_type == 'index' -%} {%- endif -%} {%- 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 }} {%- for grandchildlink in childlink.links -%} {{ grandchildlink.title | escape }} {%- endfor -%} {%- endif -%} {%- endfor -%} {%- else -%} {{ link.title | escape }} {%- endif -%} {%- endfor -%} :root { {% for block in section.blocks %} --image-{{forloop.index}} : url({{block.settings.a | img_url: "small" }}); {% endfor %} } .imageMenu { width: 80px; aspect-ratio: 1; margin-right: 10px; background-repeat: no-repeat; background-position: center; background-size: contain; border-radius: 50%; background-color: {{section.settings.menu_icon_bg}}; } .header__menu-item:hover .imageMenu, .menu-drawer__menu-item:hover .imageMenu { background-color: {{section.settings.menu_icon_hover}}; } .header__menu-item:hover { background-color: {{section.settings.menu_icon_bg}}; } #menuDrawer:hover .header__submenu { /*display: flex !important;*/ display:inline-block; } #menuDrawer::before { content: ''; position: absolute; height: 100%; padding-bottom: 100px; width: 100%; } #menuDrawer { position: relative; white-space:nowrap; } .menuDrawerBox { gap: 10px; } .header__submenu { top: 70px; display: none; min-width: max-content !important; width: max-content !important; transition: all .5s ease; animation: dropdown-menu .5s ease forwards; } ul.list-menu.list-menu--inline span{font-size:16px; font-weight:800;} .menuDrawerSub { flex-direction: column; } .menuDrawerTitle { font-weight: 600; } @keyframes dropdown-menu { 0%{ top: 25px; opacity: 0; } 100%{ top: 70px; opacity: 1; } } #menuDrawer > span > svg { width: 15px; } {%- 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 {{ 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.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 %} { "@context": "http://schema.org", "@type": "Organization", "name": {{ shop.name | json }}, {% if section.settings.logo %} {% assign image_size = section.settings.logo.width | append: 'x' %} "logo": {{ section.settings.logo | img_url: image_size | prepend: "https:" | json }}, {% endif %} "sameAs": [ {{ settings.social_twitter_link | json }}, {{ settings.social_facebook_link | json }}, {{ settings.social_pinterest_link | json }}, {{ settings.social_instagram_link | json }}, {{ settings.social_tiktok_link | json }}, {{ settings.social_tumblr_link | json }}, {{ settings.social_snapchat_link | json }}, {{ settings.social_youtube_link | json }}, {{ settings.social_vimeo_link | json }} ], "url": {{ shop.url | append: page.url | json }} } {%- if request.page_type == 'index' -%} {% assign potential_action_target = shop.url | append: routes.search_url | append: "?q={search_term_string}" %} { "@context": "http://schema.org", "@type": "WebSite", "name": {{ shop.name | json }}, "potentialAction": { "@type": "SearchAction", "target": {{ potential_action_target | json }}, "query-input": "required name=search_term_string" }, "url": {{ shop.url | append: page.url | json }} } {%- 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 }, { "type": "header", "content": "Menu icon / image settings" }, { "type": "color", "id": "menu_icon_bg", "label": "Icon background" }, { "type": "color", "id": "menu_icon_hover", "label": "Icon background hover" } ], "blocks": [ { "name": "menu image", "type": "menu_image", "settings": [ { "type": "image_picker", "id": "a", "label": "image"}]}] }{% endschema %}

Item added to your cart

Custom codes

Log in or Sign up to ensure access to purchased code across multiple devices.

How to see the code

Leave a comment

Language

Log in or Sign up to ensure access to purchased code across multiple devices.

Related Articles

Add Image Slider in Shopify Page

Add Image Slider in Shopify Page

Advance Shopify Gallery Banner with Slider in y...

Advance Shopify Gallery Banner with Slider in y...

Shopify Gallery Carousel Section for Page

Shopify Gallery Carousel Section for Page

How to see the code

Leave a comment