Oi,
Este link é apenas para usuários apropriados. Clique em comprar para ver o código.
1. No editor de código, encontre a pasta Section e abra header.liquid. Substitua todo o código pelo código abaixo.
| <link rel="stylesheet" href=" {{ 'component-list-menu.css' | asset_url }} " media="print" onload="this.media='all'"> <link rel="stylesheet" href=" {{ 'component-search.css' | asset_url }} " media="print" onload="this.media='all'"> <link rel="stylesheet" href=" {{ 'component-menu-drawer.css' | asset_url }} " media="print" onload="this.media='all'"> <link rel="stylesheet" href=" {{ 'component-cart-notification.css' | asset_url }} " media="print" onload="this.media='all'"> <link rel="stylesheet" href=" {{ 'component-cart-items.css' | asset_url }} " media="print" onload="this.media='all'"> {%- if settings.predictive_search_enabled -%} <link rel="stylesheet" href=" {{ 'component-price.css' | asset_url }} " media="print" onload="this.media='all'"> <link rel="stylesheet" href=" {{ 'component-loading-overlay.css' | asset_url }} " media="print" onload="this.media='all'"> {%- endif -%} <noscript> {{ 'component-list-menu.css' | asset_url | stylesheet_tag }} </noscript> <noscript> {{ 'component-search.css' | asset_url | stylesheet_tag }} </noscript> <noscript> {{ 'component-menu-drawer.css' | asset_url | stylesheet_tag }} </noscript> <noscript> {{ 'component-cart-notification.css' | asset_url | stylesheet_tag }} </noscript> <noscript> {{ 'component-cart-items.css' | asset_url | stylesheet_tag }} </noscript> <estilo> gaveta de cabeçalho { justificar-se: começar; margem esquerda: -1,2rem; } @media screen e (largura mínima: 990px) { gaveta de cabeçalho { Mostrar nenhum; } } .menu-gaveta-contêiner { exibição: flexível; } .list-menu { estilo de lista: nenhum; preenchimento: 0; margem: 0; } .list-menu--inline { exibição: inline-flex; /* flex-wrap: wrap;*/ } resumo.list-menu__item { preenchimento à direita: 2,7rem; } .list-menu__item { exibição: flexível; alinhar itens: centro; altura da linha: calc(1 + 0,3 / var(--font-body-scale)); } .list-menu__item--link { decoração de texto: nenhuma; fundo de preenchimento: 1rem; acolchoamento superior: 1rem; altura da linha: calc(1 + 0,8 / var(--font-body-scale)); } @media screen e (largura mínima: 750px) { .list-menu__item--link { fundo de preenchimento: 0,5rem; preenchimento superior: 0,5rem; } } </estilo> {%- style -%} .seção-cabeçalho { margem inferior: {{ section.settings.margin_bottom | times: 0.75 | round: 0 }} px; } @media screen e (largura mínima: 750px) { .seção-cabeçalho { margem inferior: {{ section.settings.margin_bottom }} px; } } {%- endstyle -%} <script src=" {{ 'details-disclosure.js' | asset_url }} " defer="defer"></script> <script src=" {{ 'details-modal.js' | asset_url }} " defer="defer"></script> <script src=" {{ 'cart-notification.js' | asset_url }} " defer="defer"></script> <svg xmlns="http://www.w3.org/2000/svg" class="oculto"> <symbol id="icon-search" viewbox="0 0 18 19" fill="none"> <path fill-rule = "evenodd" clip-rule = "evenodd" d = "M11.03 11.68A5.784 5,784 0 112,85 3,5a5,784 5,784 0 018,18 8,18zm.26 1,12a6,78 6,78 0 11,72-.7l5 .4 5.4a.5.5 0 11-.71.7l-5.41-5.4z" fill="currentColor"/> </symbol> <symbol id="icon-close" class="icon icon-close" fill="none" viewBox="0 0 18 17"> <caminho d = "M.865 15.978a.5.5 0 00.707.707l7.433-7.431 7.579 7.282a.501.501 0 00.846-.37.5.5 0 00-.153-.351L9.712 8.546l7.417-7.41 6a. 5,5 0 10-.707-.708L8.991 7.853 1.413.573a.5.5 0 10-.693.72l7.563 7.268-7.418 7.417z" fill="currentColor"> </symbol> </svg> < {% if section.settings.enable_sticky_header %} sticky-header {% else %} div {% endif %} class="header-wrapper color- {{ section.settings.color_scheme }} gradiente {% if section.settings.show_line_separator %} header-wrapper--border-bottom {% endif %} "> <header class="header header-- {{ section.settings.logo_position }} largura da página {% if section.settings.menu != blank %} header--has-menu {% endif %} "> {%- if section.settings.menu != blank -%} <header-drawer data-breakpoint="tablet"> <details id="Details-menu-drawer-container" class="menu-drawer-container"> <summary class="header__icon header__icon--menu header__icon--summary link focus-inset" aria-label=" {{ 'sections.header.menu' | t }} "> <span> {% render 'icon-hamburger' %} {% render 'icon-close' %} </span> </resumo> <div id="menu-drawer" class="menu-drawer motion-reduce" tabindex="-1"> <div class="menu-drawer__inner-container"> <div class="menu-drawer__navigation-container"> <nav class="menu-drawer__navigation"> <ul class="menu-drawer__menu lista-menu" role="lista"> {%- for link in section.settings.menu.links -%} <li> {%- if link.links != blank -%} <detalhes id="Detalhes-menu-gaveta-menu-item- {{ forloop.index }} "> <summary class="menu-drawer__menu-item list-menu__item link link--text focus-inset {% if link.child_active %} menu-drawer__menu-item--active {% endif %} "> <span class="imageMenu" style="background-image: var(--image- {{forloop.index}} )"></span> {{ link.title | escape }} {% render 'icon-arrow' %} {% render 'icon-caret' %} </resumo> <div id="link- {{ link.title | escape }} " class="menu-drawer__submenu motion-reduce" tabindex="-1"> <div class="menu-drawer__inner-submenu"> <button class="menu-drawer__close-button link link--text focus-inset" aria-expanded="true"> {% render 'icon-arrow' %} {{ link.title | escape }} </button> <ul class="menu-drawer__menu list-menu" role="list" tabindex="-1"> {%- for childlink in link.links -%} <li> {%- 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 }} </a> {%- else -%} <detalhes id="Detalhes-menu-gaveta-submenu- {{ forloop.index }} "> <summary class="menu-drawer__menu-item link link--text list-menu__item focus-inset"> {{ childlink.title | escape }} {% render 'icon-arrow' %} {% render 'icon-caret' %} </resumo> <div id="childlink- {{ childlink.title | escape }} " class="menu-drawer__submenu motion-reduce"> <button class="menu-drawer__close-button link link--text focus-inset" aria-expanded="true"> {% render 'icon-arrow' %} {{ childlink.title | escape }} </button> <ul class="menu-drawer__menu list-menu" role="list" tabindex="-1"> {%- for grandchildlink in childlink.links -%} <li> <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 }} </a> </li> {%- endfor -%} </ul> </div> </detalhes> {%- endif -%} </li> {%- endfor -%} </ul> </div> </div> </detalhes> {%- 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 %} > <span class="imageMenu" style="background-image: var(--image- {{forloop.index}} )"></span> {{ link.title | escape }} </a> {%- endif -%} </li> {%- endfor -%} </ul> </nav> <div class="menu-drawer__utility-links"> {%- if shop.customer_accounts_enabled -%} <a href=" {%- if customer -%} {{ routes.account_url }} {%- else -%} {{ routes.account_login_url }} {%- endif -%} " class="menu-drawer__account link focus -inserir h5"> {% render 'icon-account' %} {%- liquid if customer echo 'customer.account_fallback' | t else echo 'customer.log_in' | t endif -%} </a> {%- endif -%} <ul class="lista lista-social lista-unstyled" role="lista"> {%- if settings.social_twitter_link != blank -%} <li class="list-social__item"> {{ settings.social_twitter_link }} {%- render 'icon-twitter' -%} <span class="visually-hidden"> {{ 'general.social.links.twitter' | t }} </span> </a> </li> {%- endif -%} {%- if settings.social_facebook_link != blank -%} <li class="list-social__item"> {{ settings.social_facebook_link }} {%- render 'icon-facebook' -%} <span class="visually-hidden"> {{ 'general.social.links.facebook' | t }} </span> </a> </li> {%- endif -%} {%- if settings.social_pinterest_link != blank -%} <li class="list-social__item"> {{ settings.social_pinterest_link }} {%- render 'icon-pinterest' -%} <span class="visually-hidden"> {{ 'general.social.links.pinterest' | t }} </span> </a> </li> {%- endif -%} {%- if settings.social_instagram_link != blank -%} <li class="list-social__item"> {{ settings.social_instagram_link }} {%- render 'icon-instagram' -%} <span class="visually-hidden"> {{ 'general.social.links.instagram' | t }} </span> </a> </li> {%- endif -%} {%- if settings.social_tiktok_link != blank -%} <li class="list-social__item"> {{ settings.social_tiktok_link }} {%- render 'icon-tiktok' -%} <span class="visually-hidden"> {{ 'general.social.links.tiktok' | t }} </span> </a> </li> {%- endif -%} {%- if settings.social_tumblr_link != blank -%} <li class="list-social__item"> {{ settings.social_tumblr_link }} {%- render 'icon-tumblr' -%} <span class="visually-hidden"> {{ 'general.social.links.tumblr' | t }} </span> </a> </li> {%- endif -%} {%- if settings.social_snapchat_link != blank -%} <li class="list-social__item"> {{ settings.social_snapchat_link }} {%- render 'icon-snapchat' -%} <span class="visually-hidden"> {{ 'general.social.links.snapchat' | t }} </span> </a> </li> {%- endif -%} {%- if settings.social_youtube_link != blank -%} <li class="list-social__item"> {{ settings.social_youtube_link }} {%- render 'icon-youtube' -%} <span class="visually-hidden"> {{ 'general.social.links.youtube' | t }} </span> </a> </li> {%- endif -%} {%- if settings.social_vimeo_link != blank -%} <li class="list-social__item"> {{ settings.social_vimeo_link }} {%- render 'icon-vimeo' -%} <span class="visually-hidden"> {{ 'general.social.links.vimeo' | t }} </span> </a> </li> {%- endif -%} </ul> </div> </div> </div> </div> </detalhes> </header-drawer> {%- endif -%} {%- if section.settings.logo_position == 'top-center' or section.settings.menu == blank -%} <detalhes-modal class="header__search"> <detalhes> <summary class="header__icon header__icon--search header__icon--summary link focus-inset modal__toggle" aria-haspopup="dialog" aria-label=" {{ 'general.search.search' | t }} "> <span> <svg class="modal__toggle-open icon icon-search" aria-hidden="true" focusable="false" role="presentation"> <use href="#icon-search"/> </svg> <svg class="modal__toggle-close icon icon-close" aria-hidden="true" focusable="false" role="presentation"> <use href="#icon-close"/> </svg> </span> </resumo> <div class="search-modal modal__content" role="dialog" aria-modal="true" aria-label=" {{ 'general.search.search' | t }} "> <div class="modal-overlay"></div> <div class="search-modal__content {% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_vertical_offset < 0 %} search-modal__content-top {% else %} search-modal__content-bottom {% endif %} " tabindex="- 1"> {%- if settings.predictive_search_enabled -%} <predictive-search class="search-modal__form" data-loading-text=" {{ 'accessibility.loading' | t }} "> {%- endif -%} <form action=" {{ routes.search_url }} " method="get" role="search" class="search search-modal__form"> <div class="campo"> <input class="search__input campo__input" id="Pesquisar-In-Modal-1" tipo = "pesquisar" nome = "q" valor="" placeholder=" {{ 'general.search.search' | t }} " {%- if settings.predictive_search_enabled -%} role="combobox" aria-expanded="falso" aria-owns="lista-de-resultados-de-pesquisa-preditiva" aria-controls = "lista de resultados de pesquisa preditiva" aria-haspopup="caixa de listagem" aria-autocomplete="lista" correção automática = "desligado" preenchimento automático = "desligado" autocapitalizar = "desligado" verificação ortográfica = "falso" {%- endif -%} > <label class="field__label" for="Search-In-Modal-1"> {{ 'general.search.search' | t }} </label> <input type="hidden" name="opções[prefixo]" valor="último"> <button class="search__button field__button" aria-label=" {{ 'general.search.search' | t }} "> <svg class="icon icon-search" aria-hidden="true" focusable="false" role="presentation"> <use href="#icon-search"/> </svg> </button> </div> {%- if settings.predictive_search_enabled -%} <div class="pesquisa preditiva pesquisa preditiva--header" tabindex="-1" pesquisa preditiva de dados> <div class="predictive-search__loading-state"> <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"> <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle> </svg> </div> </div> <span class="predictive-search-status visualmente oculto" role="status" aria-hidden="true"></span> {%- endif -%} </form> {%- if settings.predictive_search_enabled -%} </predictive-search> {%- endif -%} <button type="button" class="modal__close-button link link--text focus-inset" aria-label=" {{ 'accessibility.close' | t }} "> <svg class="icon icon-close" aria-hidden="true" focusable="false" role="presentation"> <use href="#icon-close"/> </svg> </button> </div> </div> </detalhes> </detalhes-modal> {%- endif -%} {%- if request.page_type == 'index' -%} <h1 class="header__heading"> {%- endif -%} {{ routes.root_url }} {%- 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 }} " carregando = "preguiçoso" class="header__heading-logotipo" largura=" {{ section.settings.logo.width }} " altura=" {{ section.settings.logo.height }} " alt=" {{ section.settings.logo.alt | default: shop.name | escape }} " > {%- else -%} <span class="h2"> {{ shop.name }} </span> {%- endif -%} </a> {%- if request.page_type == 'index' -%} </h1> {%- endif -%} <nav class="header__inline-menu"> <ul class="list-menu list-menu--inline" role="list"> {%- for link in section.settings.menu.links -%} <li> {%- if link.links != blank -%} <div id="Details-HeaderMenu- {{ forloop.index }} "> <div id="menuDrawer" class="header__menu-item list-menu__item link focus-inset"> <span class="imageMenu" style="background-image: var(--image- {{forloop.index}} )"></span> <span {% if link.child_active %} class="header__active-menu-item" {% endif %} > {{ link.title | escape }} {% render 'icon-caret' %} </span> <ul id="HeaderMenu-MenuList- {{ forloop.index }} " class="menuDrawerBox header__submenu list-menu list-menu--disclosure caption-large motion-reduce" role="list" tabindex="-1"> {%- for childlink in link.links -%} <li> {%- 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 }} </a> {%- else -%} <div id="Details-HeaderSubMenu- {{ forloop.index }} "> <div class="menuDrawerTitle header__menu-item link link--text list-menu__item focus-inset caption-large"> {{ childlink.title | escape }} </div> <ul id="HeaderMenu-SubMenuList- {{ forloop.index }} " class="menuDrawerSub header__submenu list-menu motion-reduce"> {%- for grandchildlink in childlink.links -%} <li> <a href=" {{ grandchildlink.url }} " class="header__menu-item list-menu__item link link--text focus-inset caption-large" {% if grandchildlink.current %} aria-current="page" {% endif %} > {{ grandchildlink.title | escape }} </a> </li> {%- endfor -%} </ul> </div> {%- endif -%} </li> {%- endfor -%} </ul> </div> </div> {%- 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 class="imageMenu" style="background-image: var(--image- {{forloop.index}} )"></span> <span class=" {%- if link.current -%} header__active-menu-item {%- endif -%} "> {{ link.title | escape }} </span> </a> {%- endif -%} </li> {%- endfor -%} </ul> </nav> <estilo> :raiz { {% for block in section.blocks %} --image- {{forloop.index}} : url( {{block.settings.a | img_url: "small" }} ); {% endfor %} } .imageMenu { largura: 80px; proporção: 1; margem direita: 10px; repetição em segundo plano: sem repetição; posição de fundo: centro; tamanho do plano de fundo: contém; raio da fronteira: 50%; cor de fundo: {{section.settings.menu_icon_bg}} ; } .header__menu-item:hover .imageMenu, .menu-drawer__menu-item:hover .imageMenu { cor de fundo: {{section.settings.menu_icon_hover}} ; } .header__menu-item:hover { cor de fundo: {{section.settings.menu_icon_bg}} ; } #menuDrawer:hover .header__submenu { /*display: flex !importante;*/ display: bloco embutido; } #menuDrawer::antes { contente: ''; posição: absoluta; altura: 100%; preenchimento inferior: 100px; largura: 100%; } #menuDrawer { posição: relativa; espaço em branco:nowrap; } .menuDrawerBox { lacuna: 10px; } .header__submenu{ superior: 70px; Mostrar nenhum; largura mínima: conteúdo máximo! Importante; largura: conteúdo máximo! Importante; transição: todos os 0,5s são fáceis; animação: menu suspenso 0,5s avança suavemente; } ul.list-menu.list-menu--inline span{tamanho da fonte:16px; peso da fonte:800;} .menuDrawerSub { direção flexível: coluna; } .menuDrawerTitle { peso da fonte: 600; } Menu suspenso @keyframes { 0%{ superior: 25px; opacidade: 0; } 100%{ superior: 70px; opacidade: 1; } } #menuDrawer > span > svg { largura: 15px; } </estilo> <div class="header__icons"> <detalhes-modal class="header__search"> <detalhes> <summary class="header__icon header__icon--search header__icon--summary link focus-inset modal__toggle" aria-haspopup="dialog" aria-label=" {{ 'general.search.search' | t }} "> <span> <svg class="modal__toggle-open icon icon-search" aria-hidden="true" focusable="false" role="presentation"> <use href="#icon-search"/> </svg> <svg class="modal__toggle-close icon icon-close" aria-hidden="true" focusable="false" role="presentation"> <use href="#icon-close"/> </svg> </span> </resumo> <div class="search-modal modal__content" role="dialog" aria-modal="true" aria-label=" {{ 'general.search.search' | t }} "> <div class="modal-overlay"></div> <div class="search-modal__content {% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_vertical_offset < 0 %} search-modal__content-top {% else %} search-modal__content-bottom {% endif %} " tabindex="- 1"> {%- if settings.predictive_search_enabled -%} <predictive-search class="search-modal__form" data-loading-text=" {{ 'accessibility.loading' | t }} "> {%- endif -%} <form action=" {{ routes.search_url }} " method="get" role="search" class="search search-modal__form"> <div class="campo"> <input class="search__input campo__input" id="Pesquisa-In-Modal" tipo = "pesquisar" nome = "q" valor="" placeholder=" {{ 'general.search.search' | t }} " {%- if settings.predictive_search_enabled -%} role="combobox" aria-expanded="falso" aria-owns="lista-de-resultados-de-pesquisa-preditiva" aria-controls = "lista de resultados de pesquisa preditiva" aria-haspopup="caixa de listagem" aria-autocomplete="lista" correção automática = "desligado" preenchimento automático = "desligado" autocapitalizar = "desligado" verificação ortográfica = "falso" {%- endif -%} > <label class="field__label" for="Search-In-Modal"> {{ 'general.search.search' | t }} </label> <input type="hidden" name="opções[prefixo]" valor="último"> <button class="search__button field__button" aria-label=" {{ 'general.search.search' | t }} "> <svg class="icon icon-search" aria-hidden="true" focusable="false" role="presentation"> <use href="#icon-search"> </svg> </button> </div> {%- if settings.predictive_search_enabled -%} <div class="pesquisa preditiva pesquisa preditiva--header" tabindex="-1" pesquisa preditiva de dados> <div class="predictive-search__loading-state"> <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"> <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle> </svg> </div> </div> <span class="predictive-search-status visualmente oculto" role="status" aria-hidden="true"></span> {%- endif -%} </form> {%- if settings.predictive_search_enabled -%} </predictive-search> {%- endif -%} <button type="button" class="search-modal__close-button modal__close-button link link--text focus-inset" aria-label=" {{ 'accessibility.close' | t }} "> <svg class="icon icon-close" aria-hidden="true" focusable="false" role="presentation"> <use href="#icon-close"> </svg> </button> </div> </div> </detalhes> </detalhes-modal> {%- if shop.customer_accounts_enabled -%} <a href=" {%- if customer -%} {{ routes.account_url }} {%- else -%} {{ routes.account_login_url }} {%- endif -%} " class="header__icon header__icon--account link focus-inset {% if section.settings.menu != blank %} small-hide {% endif %} "> {% render 'icon-account' %} <span class="visualmente oculto"> {%- liquid if customer echo 'customer.account_fallback' | t else echo 'customer.log_in' | t endif -%} </span> </a> {%- endif -%} {{ routes.cart_url }} {%- liquid if cart == empty render 'icon-cart-empty' else renderizar 'carrinho de ícone' fim se -%} <span class="visually-hidden"> {{ 'templates.cart.cart' | t }} </span> {%- if cart != empty -%} <div class="cart-count-bubble"> {%- if cart.item_count < 100 -%} <span aria-hidden="true"> {{ cart.item_count }} </span> {%- endif -%} <span class="visually-hidden"> {{ 'sections.header.cart_count' | t: count: cart.item_count }} </span> </div> {%- endif -%} </a> </div> </header> </ {% if section.settings.enable_sticky_header %} sticky-header {% else %} div {% endif %} > {%- render 'cart-notification', color_scheme: section.settings.color_scheme -%} {% javascript %} classe StickyHeader estende HTMLElement { construtor() { super(); } conectadoCallback() { this.header = document.getElementById('shopify-section-header'); this.headerBounds = {}; this.currentScrollTop = 0; this.preventReveal = falso; this.predictiveSearch = this.querySelector('pesquisa preditiva'); this.onScrollHandler = this.onScroll.bind(this); this.hideHeaderOnScrollUp = () => this.preventReveal = true; this.addEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp); window.addEventListener('scroll', this.onScrollHandler, false); this.createObserver(); } desconectadoCallback() { this.removeEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp); window.removeEventListener('scroll', this.onScrollHandler); } criarObservador() { deixe observador = new IntersectionObserver((entradas, observador) => { this.headerBounds = entradas[0].intersectionRect; observador.disconnect(); }); observador.observe(this.header); } onScroll() { const scrollTop = window.pageYOffset || document.documentElement.scrollTop; if (this.predictiveSearch && this.predictiveSearch.isOpen) retornar; 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)); } outro { janela.clearTimeout(this.isScrolling); this.isScrolling = setTimeout(() => { this.preventReveal = falso; }, 66); requestAnimationFrame(this.hide.bind(this)); } } else if (scrollTop <= this.headerBounds.top) { requestAnimationFrame(this.reset.bind(this)); } this.currentScrollTop = scrollTop; } esconder() { this.header.classList.add('shopify-section-header-hidden', 'shopify-section-header-sticky'); this.closeMenuDisclosure(); this.closeSearchModal(); } revelar() { this.header.classList.add('shopify-section-header-sticky', 'animar'); this.header.classList.remove('shopify-section-header-hidden'); } reiniciar() { this.header.classList.remove('shopify-section-header-hidden', 'shopify-section-header-sticky', 'animate'); } closeMenuDisclosure() { this.disclosures = this.disclosures || this.header.querySelectorAll('divulgação de detalhes'); this.disclosures.forEach(divulgação => divulgação.close()); } closeSearchModal() { this.searchModal = this.searchModal || this.header.querySelector('detalhes-modal'); this.searchModal.close(falso); } } customElements.define('sticky-header', StickyHeader); {% endjavascript %} <script type="application/ld+json"> { "@contexto": "http://schema.org", "@type": "Organização", "nome": {{ shop.name | json }} , {% if section.settings.logo %} {% assign image_size = section.settings.logo.width | append: 'x' %} "logotipo": {{ section.settings.logo | img_url: image_size | prepend: "https:" | json }} , {% endif %} "igual a": [ {{ 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 }} } </script> {%- if request.page_type == 'index' -%} {% assign potential_action_target = shop.url | append: routes.search_url | append: "?q={search_term_string}" %} <script type="application/ld+json"> { "@contexto": "http://schema.org", "@type": "Site", "nome": {{ shop.name | json }} , "potencialAção": { "@type": "SearchAction", "alvo": {{ potential_action_target | json }} , "query-input": "nome obrigatório=search_term_string" }, "url": {{ shop.url | append: page.url | json }} } </script> {%- endif -%} {% schema %} { "nome": "t:seções.header.nome", "classe": "cabeçalho da seção", "configurações": [ { "tipo": "selecionar", "id": "esquema_cor", "opções": [ { "valor": "acento-1", "label": "t:sections.header.settings.color_scheme.options__1.label" }, { "valor": "acento-2", "label": "t:sections.header.settings.color_scheme.options__2.label" }, { "valor": "plano de fundo-1", "label": "t:sections.header.settings.color_scheme.options__3.label" }, { "valor": "plano de fundo-2", "label": "t:sections.header.settings.color_scheme.options__4.label" }, { "valor": "inverso", "label": "t:sections.header.settings.color_scheme.options__5.label" } ], "padrão": "plano de fundo-1", "label": "t:sections.header.settings.color_scheme.label" }, { "type": "image_picker", "id": "logotipo", "label": "t:sections.header.settings.logo.label" }, { "tipo": "intervalo", "id": "largura_logotipo", "min": 50, "máximo": 250, "passo": 10, "padrão": 100, "unidade": "t:seções.header.settings.logo_width.unit", "label": "t:sections.header.settings.logo_width.label" }, { "tipo": "selecionar", "id": "posição_logotipo", "opções": [ { "valor": "meio-esquerda", "label": "t:sections.header.settings.logo_position.options__1.label" }, { "valor": "canto superior esquerdo", "label": "t:sections.header.settings.logo_position.options__2.label" }, { "valor": "centro superior", "label": "t:sections.header.settings.logo_position.options__3.label" } ], "default": "meio-esquerda", "label": "t:sections.header.settings.logo_position.label", "info": "t:sections.header.settings.logo_position.info" }, { "tipo": "lista_link", "id": "menu", "default": "menu principal", "label": "t:sections.header.settings.menu.label" }, { "tipo": "caixa de seleção", "id": "show_line_separator", "padrão": verdadeiro, "label": "t:sections.header.settings.show_line_separator.label" }, { "tipo": "caixa de seleção", "id": "enable_sticky_header", "padrão": verdadeiro, "label": "t:sections.header.settings.enable_sticky_header.label", "info": "t:sections.header.settings.enable_sticky_header.info" }, { "tipo": "cabeçalho", "content": "t:sections.all.spacing" }, { "tipo": "intervalo", "id": "margem_bottom", "min": 0, "máximo": 100, "Passo 4, "unidade": "px", "label": "t:sections.header.settings.margin_bottom.label", "padrão": 0 }, { "tipo": "cabeçalho", "content": "Ícone de menu/configurações de imagem" }, { "tipo": "cor", "id": "menu_icon_bg", "label": "Fundo do ícone" }, { "tipo": "cor", "id": "menu_icon_hover", "label": "Foco no plano de fundo do ícone" } ], "blocos": [ { "nome": "imagem do menu", "tipo": "menu_imagem", "configurações": [ { "type": "image_picker", "id": "um", "rótulo": "imagem" } ] } ] } {% endschema %} |
0 comentários