Exemplo de visualização dos Ícones do Menu.

1º. Escolhendo e baixando seus ícones:

Passo 1. Para realizar a busca dos ícones do seu menu, basta acessar o seguinte site: http://flaticon.com/

Figura correspondente ao Passo 1.

Passo 2. Ao acessar o site, que é gratuito (a maior parte das opções) e onde é necessário que seja criado um login, você vai digitar no campo de busca os ícones que deseja buscar. Como é um site de língua inglesa, sugerimos que você busque os ícones utilizando nomes em inglês. Uma dica é usar o tradutor (gratuito) do Google (https://translate.google.com.br/?hl=pt-BR), conforme exemplo a seguir:

Figura correspondente ao Passo 2.

Passo 3. Após encontrar o nome do ícone que você deseja baixar, basta digitá-lo no campo de busca o site e os resultados serão gerados em sua parte inferior:

Figura correspondente ao Passo 3.

Passo 4. Clique em um ícone para abrir a tela de download do mesmo. Nela, clique no seletor de cores (indicado na imagem abaixo). Após definida a cor, clique no Botão de Download e, sem seguida, clique no Botão SVG (formato obrigatório dos ícones):

Figuras correspondentes ao Passo 4.

Observações:

  1. Repita este mesmo processo para todos os ícones das categorias visíveis do seu menu.

  2. Caso o nome da categoria seja composta por mais de uma palavra, ao informar o nome, deve ser colocado tudo em minúsculo, junto e sem espaço, conforme o exemplo a seguir:

- Vestido de Noiva -> vestidodenoiva

- Cama de Casal -> camadecasal

  1. Caso haja algum caracter especial, deve-se substituir pela letra respectiva, em seu formato normal, exemplo:

- Decoração -> decoracao

- Blusões -> blusoes

  1. Atenção: por uma questão técnica, o menu da loja só comporta links de CATEGORIAS e não de PÁGINAS. Do contrário, irá gerar um problema o qual não apresentará os produtos dentro dos submenus.

Passo 5. Para configurar em sua loja os ícones já baixados, dentro do seu ambiente da Loja Integrada, acesse no menu superior o Ícone de Engrenagem (topo à direita) e clique em Incluir código HTML:

Figura correspondente ao Passo 1.

Passo 6. Clique no botão Avançado (ou no botão Adicionar Código), crie um nome para Descrição (ex.: Ícones do Menu), preencha os campos Local como Rodapé e Tipo como Javascript:

Figuras correspondentes ao Passo 6.

Passo 7. A seguir, copie o código abaixo, cole-o no campo de Conteúdo, altere o que for necessário (explicaremos abaixo, em Observações) e clique em Salvar Alterações.

Código a ser copiado:

var iconesMenu = [
{
nome : "menu_calcados",
icone : "https://cdn.awsli.com.br/1233/1233735/arquivos/calcados.png"
},
{
nome : "menu_camisas",
icone : "https://cdn.awsli.com.br/1233/1233735/arquivos/clothes.svg"
},
{
nome : "menu_jaquetas",
icone : "https://cdn.awsli.com.br/1233/1233735/arquivos/shirt (1).svg"
}
];

Observações:

  1. No código acima, colocamos como exemplo uma loja com 3 ícones/ categorias, porém você pode colocar a quantidade necessária de ícones, até que o espaço total do menu seja atingido.

  2. Atenção aos caracteres do código. Caso você adicione outra linha (para criar outro ícone), deixe-a sempre fechando com }, Porém, se for a última linha do seu código (último ícone a ser criado), feche-o com };

  3. Para te auxiliar na escolha dos tons de cores dos seus ícones, utilize o seguinte site: http://erikasarti.com/html/tabela-cores/

O código deverá ficar como neste exemplo:

Figura correspondente ao Passo 5.

Encontrou sua resposta?