Compatibilidade: Dawn 2.0 e superior e temas GRATUITOS do Shopify 2.0
Você tem tema diferente? Envie-nos uma mensagem usando "Converse conosco"
Estou ciente de que alguns de vocês estão frustrados com meu outro código, então tornei um código mais fácil de seguir. Adicionei um código que calcularia o cabeçalho, que pode ser usado para medir o quanto trazemos o conteúdo. Torne o fundo do seu cabeçalho transparente com o código abaixo.
NOTA: Esteja atento à imagem de fundo e ajuste a cor da fonte de acordo.
O que você está comprando:
- O cabeçalho transparente funciona SOMENTE na página inicial
- Cabeçalho transparente compatível com dispositivos móveis
- O cabeçalho fixo ainda funcionará
- Talvez seja necessário alterar o esquema de cores, dependendo da imagem de fundo
- Edições simples e etapas fáceis de seguir
O que torna nosso código melhor:
- Não usamos bibliotecas externas, com isso dito, nosso código não terá nenhum efeito mínimo no desempenho de velocidade do seu site
- Não deixamos nem adicionamos códigos para anunciar em nosso site
- Nosso código é compatível com dispositivos móveis
Quaisquer problemas relacionados ao código serão corrigidos sem custo adicional, excluindo solicitações de customização de código. Basta entrar em contato conosco em "Converse conosco". Estamos a apenas um botão de distância.
Para iniciar:
1. Vá para Admin store > Loja Online > Temas > Ações > Editar código.
2. Abra header.liquid na pasta Seções.
3. Cole o código abaixo, após a seção <noscript>.
4. Em seguida, encontre o "header-wrapper" e cole o código abaixo próximo a ele. Faça com que haja um espaço entre as palavras.
Veja a imagem abaixo para posicionamento.
A fonte do menu não está legível? Altere o esquema de cores na seção do cabeçalho ao abrir o editor de temas. Nenhum código extra necessário para isso. Aconselhei usar o inverso.
Atualizado em 19/03/2023: Código customizado para funcionar também com a versão atualizada do Dawn 8.0
Atualizado em 02/08/2023: Código customizado para funcionar também com a versão atualizada do Dawn 11.0
É isso. Chega de DevTools (",)
8 comentários
Hi @Nadine,
Please check your theme settings and make sure you have sticky header selected. This still works in sticky header as mentioned.
Hi there,
I used you first youtube tutorial and it didn’t work. Now I’ve tried this one but the header isn’t sticky. Can you please help?
Hi @Juliette Petit,
This is meant to work at the home page where there is a corresponding banner or slideshow that can be shown with a transparent header. Please contact us using “Chat with us” if you have more questions
Hello, the code looks great on the home page, however, it doesn’t work that well on the other pages. How can I also update it for those pages? Thanks!
Hi Anouschka,
The code should not affect the banner btw. Please make sure you have the recommended image size. Shopify recommends 2048×2048