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 adicionado ao seu carrinho

Custom codes

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

How to see the code

Deixe um comentário

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

Deixe um comentário