Códigos personalizados

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.

{%- 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 }} 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; } } {%- 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 -%} {%- 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 -%} {{ settings.social_twitter_link }} {%- render 'icon-twitter' -%} {{ 'general.social.links.twitter' | t }} {%- endif -%} {%- if settings.social_facebook_link != blank -%} {{ settings.social_facebook_link }} {%- render 'icon-facebook' -%} {{ 'general.social.links.facebook' | t }} {%- endif -%} {%- if settings.social_pinterest_link != blank -%} {{ settings.social_pinterest_link }} {%- render 'icon-pinterest' -%} {{ 'general.social.links.pinterest' | t }} {%- endif -%} {%- if settings.social_instagram_link != blank -%} {{ settings.social_instagram_link }} {%- render 'icon-instagram' -%} {{ 'general.social.links.instagram' | t }} {%- endif -%} {%- if settings.social_tiktok_link != blank -%} {{ settings.social_tiktok_link }} {%- render 'icon-tiktok' -%} {{ 'general.social.links.tiktok' | t }} {%- endif -%} {%- if settings.social_tumblr_link != blank -%} {{ settings.social_tumblr_link }} {%- render 'icon-tumblr' -%} {{ 'general.social.links.tumblr' | t }} {%- endif -%} {%- if settings.social_snapchat_link != blank -%} {{ settings.social_snapchat_link }} {%- render 'icon-snapchat' -%} {{ 'general.social.links.snapchat' | t }} {%- endif -%} {%- if settings.social_youtube_link != blank -%} {{ settings.social_youtube_link }} {%- render 'icon-youtube' -%} {{ 'general.social.links.youtube' | t }} {%- endif -%} {%- if settings.social_vimeo_link != blank -%} {{ settings.social_vimeo_link }} {%- 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 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 -%} > {{ 'general.search.search' | t }} {%- if settings.predictive_search_enabled -%} {%- endif -%} {%- if settings.predictive_search_enabled -%} {%- endif -%} {%- endif -%} {%- if request.page_type == 'index' -%} {%- 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 -%} {{ 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 -%} :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; } {%- if settings.predictive_search_enabled -%} {%- endif -%} <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 -%} > {{ '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 -%} {{ routes.cart_url }} {%- liquid if cart == empty render 'icon-cart-empty' else renderizar 'carrinho de ícone' fim se -%} {{ '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 %} 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.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 %} { "@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 }} } {%- if request.page_type == 'index' -%} {% assign potential_action_target = shop.url | append: routes.search_url | append: "?q={search_term_string}" %} { "@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 }} } {%- 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 %}

Item adicionado ao seu carrinho

Códigos personalizados

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

Helpful Free links

Como ver o código

Deixe um comentário

País/região

Idioma

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

Related Articles

Adicionar controle deslizante de imagem na pági...