Inserindo conteúdo real

Editando os links e seus níveis

Através do menu de exemplo é possível inserir um conteúdo real, a utilização desse menu como um esqueleto inicial facilita a edição do conteúdo.

Dentro do seu Amazing Menu você pode criar:

    • Primeiro Nível de Links: São os links iniciais que o usuário verá de cara ao entrar em seu site. É recomendado colocar os links de categorias com maior procura em seu site, por exemplo. Podem ser links diretos, que levam para uma página, ou abrir um dropdown com links de segundo nível, banners, e coleções.
    • Segundo Nível de Links: Links relacionados com o primeiro nível de links do seu menu, por exemplo, se o seu primeiro nível é uma categoria, Feminino, ao passar o mouse irá aparecer links de segundo nível relacionados a essa categoria.
    • Banners e Coleções: Você pode inserir junto aos links de segundo nível da sua loja alguns banners e coleções para destacar produtos e o que desejar que possa impulsionar o usuário a continuar a navegação.

1. Primeiro nível de Links com/sem Dropdown

O menu é visto inicialmente pelo usuário somente como diversos links, sejam eles internos ou externos. Pode utilizar categorias, que podem ou não conter links que ou serão redirecionados a página da categoria ou ainda abrir um submenu com diversos categorias, departamentos, banners ou coleções. Ou como falado anteriormente links externos para blogs, sites parceiros, etc.

  • Para inserir links da sua loja, acesse a URL ENDEREÇODASUALOJA.com.br/busca, procure pela categoria na barra lateral, clique e copie o conteúdo após ENDEREÇODASUALOJA.com.br/, ou seja, o conteúdo após a barra "/".
  • Procure qual categoria gostaria de inserir/editar no conteúdo colado na caixa de edição da ferramenta e a selecione com o mouse, logo em seguida clique no ícone de link na barra de ferramentas superior e cole a URL copiado anteriormente.

Veja abaixo como deve ser feito.

Bons usos de Amazing Menu

Veja alguns exemplos de lojas que fizeram bom uso do amazing menu:

2. Primeiro nível de links com imagens/ícones

Alguns menus possuem em sua estrutura principal ícones/imagens para ilustrar a nomenclatura dos links para o usuário.

O processo para inserir essas imagens exige atenção para que a quebra do conteúdo não aconteça no site.

      1. O primeiro passo é subir as imagens/ícones no admin do portal de sua loja em Files Manager > images e ao acessar essa página clique em "Add" no menu superior de ferramentas. Veja a imagem abaixo.
        • Lembrando que seu navegador precisa estar com permissão para abrir Flash ou estar com a extensão QD admin Tools
        • Após subir as imagens você irá precisar da URL dessa imagem para inserir no Amazing Menu, é simples, a URL da imagem é NomeDaSuaLoja.vteximg.com.br/arquivos/nomedaimagem.jpg (A extensão da imagem nesse link é apenas de exemplo, você pode utilizar .jpg ou .png)

2. Em seguida iremos inserir essa imagem no link. Copie a URL da imagem e você irá colar após escrever o seguinte trecho ao lado do link desejado:

@code: <img src="" />@ Nome do Link
        • E em seguida cole a URL da imagem dentro de src="" ficando da seguinte forma:
@code: <img src="https://puramagia.vteximg.com.br/arquivos/img-exemplo.png" />@ Nome do Link

Veja o processo na imagem abaixo:

Uso de banners

É possível inserir banners no nosso menu, seja eles para destacar alguma categoria, departamento ou link externo.

Funciona da mesma maneira que cadastrar banners em placeholders.

  1. Você deve entrar no admin do portal de sua loja e acessar o menu principal, clicando em Sites and Channels > Nome da loja > / > qd-amazing-menu > data e ao lado clicar em Settings.

Caso não saiba como cadastrar um banner em um placeholder clique nesse link.

Repare que no menu de exemplo existe algumas linhas com o seguinte código:

@banner: Banner da categoria feminino outlet@

2. Logo após o @banner: você deve inserir o nome do objeto inserido do tipo banner, por exemplo, se você criou um objeto do tipo banner com o nome "Banner da categoria Kids", você deve inserir em seu menu da seguinte forma:

@banner: Banner de categoria Kids@

3. Então basta inserir os banners nas medidas recomendadas, vistas até mesmo no Menu de Exemplo, e caso criar alguma outra área com banners siga sempre a mesma estrutura dos demais para não ocorrer quebras no layout (basta copiar uma seção existente já criada com banners e copiar e colar onde desejar, editando para um novo conteúdo que desejar, isso evita quebras na estrutura).

Veja abaixo como inserir essa área em seu menu:

O dropdown do Amazing Menu é dividio igualmente pelo número de colunas.

Exemplo: Coluna de links e outra de banner, isso significa que o banner pode ter a largura equivalente a metade do dropdown, exemplo:

Como obeter a medida de um banner para o dopdown do Amazing Menu?

1. A forma mais simples é pedir para o designer ou a pessoa que for criar os banners tirar um print da tela e medir pelo Photoshop. Exemplo:

Dessa forma o designer terá o tamanho real do dropdown e ele mesmo poderá obter as medidas dos banners independente do número de coluna.


2. Ele pode dividir a área do dropdown em partes iguais e obter a medida desejada do banner:

A altura do banner é "livre", sugerimos sempre a altura do banner ter mais ou menos a altura da coluna de links. Nesse caso a altura ficou com 177px, mas não teria problema nenhum em ter 250px, ou até mais:

Uso de coleções

É possível inserir coleções no nosso menu, seja eles para destacar algum produto em sua categoria e departamento ou ainda um link externo.

Funciona da mesma maneira que cadastrar uma coleção em placeholders.

1. Você deve entrar no admin do portal de sua loja e acessar o menu principal, clicando em Sites and Channels > Nome da loja > / > qd-amazing-menu > data e ao lado clicar em Settings.

Caso não saiba como cadastrar uma coleção em um placeholder clique nesse link.

Repare que no menu de exemplo existe algumas linhas com o seguinte código:

@collection: Produto em destaque de novidades 3 @

2. Logo após o @collection: você deve inserir o nome do objeto inserido do tipo coleção, por exemplo, se você criou um objeto do tipo coleção com o nome "Coleção da categoria Kids", você deve inserir em seu menu da seguinte forma:

@collection: Coleção de categoria Kids@

3. Então basta inserir a coleção da forma recomendada e caso criar alguma outra área com coleção siga sempre a mesma estrutura dos demais para não ocorrer quebras no layout (basta copiar uma seção existente já criada com coleções e copiar e colar onde desejar, editando para um novo conteúdo que desejar, isso evita quebras na estrutura).

Veja abaixo como inserir essa área em seu menu:

Uso de Marcas

É possível inserir imagens com as marcas vendidas em sua loja e para isso é necessário que o link tenha o nome Marca, ou a visualização dos logos não ficarão corretas.

Funciona da mesma maneira que inserir um ícone ao lado do primeiro nível de link.

    1. O primeiro passo é subir as imagens/ícones no admin do portal de sua loja em Files Manager > images e ao acessar essa página clique em "Add" no menu superior de ferramentas. Veja a imagem abaixo.

Lembrando que seu navegador precisa estar com permissão para abrir Flash ou estar com a extensão QD admin Tools

Após subir as imagens você irá precisar da URL dessa imagem para inserir no Amazing Menu, é simples, a URL da imagem é NomeDaSuaLoja.vteximg.com.br/arquivos/nomedaimagem.jpg (A extensão da imagem nesse link é apenas de exemplo, você pode utilizar .jpg ou .png)

2. Em seguida iremos inserir essa imagem no menu. Copie a URL da imagem e você irá colar após escrever o seguinte trecho abaixo do link de Marcas:

@code: <img src="" />@
        • E em seguida cole a URL da imagem dentro de src="" ficando da seguinte forma:
@code: <img src="https://puramagia.vteximg.com.br/arquivos/img-exemplo.png" />@ Nome do Link

Veja o processo na imagem abaixo:

Feito isso basta exportar o conteúdo de seu menu e colar no controle customizado, as marcas irão aparecer no seu menu conforme o da imagem abaixo.