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.

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

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

Banner avançado da galeria do Shopify com contr...

Banner avançado da galeria do Shopify com contr...

Seção do carrossel da galeria do Shopify para p...

Seção do carrossel da galeria do Shopify para p...

Como ver o código

Deixe um comentário