Artigos sobre: Temas

Ícones - Void

Um dos diferenciais do tema Void são as inúmeras possibilidades de personalização de sua loja. O tema possuí uma listagem bem extensa de ícones que podem ser usados em diversos locais como, por exemplo, na Topbar do cabeçalho, títulos de seções e, até mesmo, na barra de navegação.

Adicionando os ícones



Precisará de apenas um simples código para colar nas mais diversas seções e espaços do tema:

<i class="ID-DO-ÍCONE"></i>

Substitua o espaço de ID do ícone pelo respectivo ícone que deseja, encontrado na página mencionada acima e, após isso, cole no editor de temas.

Usamos como exemplo a seção de Produtos:



Após salvar, resultado final será este:




Ícones na barra de navegação



Para que os ícones apareçam no menu, a lógica é basicamente a mesma. Porém, ao invés de usar o editor de temas, você irá alterar o nome do menu em Loja Online > Navegação.



Após salvar, o ícone aparecerá junto com o nome do menu em sua loja.


A adição de ícones na navegação só surtirá efeito no tema Void.

Ícones SVG



O tema Void permite fazer a troca e adição de ícones SVG. Com eles, é possível que os ícones se ajustem a qualquer tela e tenham suas cores alteradas da forma que desejar, sem que tenha qualquer perda de qualidade. Poderá alterar o ícone do carrinho ou adicionar novos ícones no botão de categorias do cabeçalho, como na imagem a seguir:



Adquirindo código SVG de ícones


Recomendamos utilizar algum serviço que te permita pesquisar e baixar por ícones já nesse formato como, por exemplo, na Flaticon . Pesquise pelo tipo de ícone que deseja e clique em "SVG" para baixar.

Neste artigo, usarei este ícone de relógio como exemplo.



Após baixar o arquivo, abra-o em seu navegador, clique com o botão direito do mouse e depois em "Exibir código fonte da página".

Copie todo o código que aparecer na nova janela. Esse é o código do ícone SVG escolhido.



Alterando e adicionando o ícone no editor de temas


* Ícone de carrinho

Para alterar o ícone do carrinho, no editor de temas, vá em Configurações > Ícones SVG. Por padrão, já disponibilizamos um outro modelo de ícone, bastará apenas marcar ou desmarcar a caixinha para habilitar. Substitua o código atual para o código de outro ícone que deseja.



* Botão de categorias

Disponível nos cabeçalhos tipo 2, 3 e 4, poderá adicionar um ícone para cada linha do menu do botão.

Para isso, vá na seção Botão de Categorias do Cabeçalho e adicione o código em cada espaço de linha que for necessário. Neste exemplo, adicionarei apenas no primeiro.



Após isso, salve a página. O ícone passará a aparecer na linha onde foi adicionado.

Atualizado em: 23/02/2024

Este artigo foi útil?

Compartilhe seu feedback

Cancelar

Obrigado!