Compatibilidade: todos os temas GRATUITOS do Shopify 2.0
Shopify é uma plataforma de comércio eletrônico popular que permite aos comerciantes online criar e gerenciar facilmente suas lojas online. Uma das maneiras de melhorar a aparência e a experiência do usuário de uma loja Shopify é adicionar ícones aos links do menu. Esses ícones podem ajudar a tornar a navegação mais intuitiva e visualmente atraente.
Além disso, a função passar o mouse para abrir é adicionada como uma ótima maneira de aprimorar a experiência do usuário e facilitar o acesso ao menu.
É importante observar que para obter melhores resultados, a imagem que você escolher adicionar deve estar no formato PNG e ter fundo transparente. Para ver o melhor resultado possível, consulte a imagem fornecida abaixo.
Consigo escrever um código que pode adicionar uma imagem de sua escolha antes do título do menu sem interromper a lista do menu. Não há necessidade de usar javascript, apenas HTML e CSS.
Eu adicionei a função hover to open também.
Você pode verificar a loja de demonstração usando a senha “made4uo”.
O que você está comprando:
- Adicione um ícone antes do título do menu no seu cabeçalho
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. Acesse Loja online > Temas > Ações > Editar código.
2. Abra a pasta Seções e encontre header.liquid. Dentro do líquido do cabeçalho, procure este trecho de código "header__inline-menu". Use Ctrl + F para localizar dentro do editor de código. Substitua o código pelo código abaixo. Consulte a imagem abaixo sobre qual código excluir.
3. Precisamos adicionar uma imagem dinâmica, portanto precisamos de blocos para a imagem. Vá até o esquema e encontre o último "]." Substitua o colchete pelo código abaixo. Consulte a imagem abaixo sobre qual suporte excluir e substituir.
Tudo que você precisa fazer é adicionar suas imagens e alterar as configurações no cabeçalho. Clique no cabeçalho e você verá o ÍCONE DO MENU / CONFIGURAÇÕES DE IMAGEM na parte inferior.
Adicione a imagem/ícone utilizando o bloco de acordo com a posição no menu. Arraste para reposicionar.
É isso (",)
Copied!