Í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.
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>
Verifique o código para cada ícone aqui.
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:
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.
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:
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.
* Í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.
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>
Verifique o código para cada ícone aqui.
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: 29/02/2024
Obrigado!