Mapa de Posições da Estrutura de Telas da Loja Virtual

Dentro da loja da Brasil na Web temos uma flexibilidade de colocar vários conteúdos em algumas áreas pré-definidas do template. Na imagem abaixo estão definidas todas as posições disponíveis atualmente na loja. A única área que não pode ser utilizada para acrescentar conteúdo é o Topo.

Utilizando como exemplo o recurso de Áreas Personalizadas, vamos mostrar de forma prática como utilizar as posições. Para isso, siga os passos abaixo:

  1. Acesse o módulo em Menu > Customização > Áreas Personalizadas.
  2. Crie uma nova área personalizada clicando em Adicionar
  3. Informe um título, conteúdo e escolha em que layout/página ele deve aparecer
  4. No campo Posição (destacado na imagem em vermelho) vamos definir a posição que o conteúdo vai ocupar dentro do layout/página escolhido.

No exemplo acima, o conteúdo será exibido em todas as páginas na posição Menu Principal. Abaixo temos uma tabela com todos as posições disponíveis, siga o mapa no início da página para para poder se orientar visualmente.

PosiçãoObservação
Menu PrincipalColoca itens acima ou abaixo do menu principal.
Banner PrincipalColoca itens acima ou abaixo do banner – Posição “full”, ocupa a tela toda.
Primeiro destaquePosição abaixo da posição Promoção, serve como uma amostra dos melhores produtos ou destaques de produtos da sua loja
PromoçãoPosição abaixo do banner
Topo do conteúdoPosição acima do conteúdo da página
Coluna esquerdaPosição a esquerda do conteúdo
Coluna direitaPosição a direita do conteúdo
Rodapé do conteúdoPosição abaixo do conteúdo
Segundo destaquePosição abaixo do conteúdo da página – BLOG na home
Footer CheckoutRodapé da página de checkout – Dependência do layout OneCheckout
Lateral – CheckoutLateral da direita abaixo das formas de pagamento na tela de checkout final – Dependência do layout OneCheckout
Rodapé superiorPosição na parte de cima do rodapé – Mais de um módulo adicionado, ele vai gerar uma nova coluna nesta posição
Rodapé centralPosição na parte do meio do rodapé – Mais de um módulo adicionado, ele vai gerar uma nova coluna nesta posição
Rodapé inferiorPosição na parte de baixo do rodapé – Mais de um módulo adicionado, ele vai gerar uma nova coluna nesta posição

 

Estas posições podem ser aplicadas em vários módulos da loja que permitem definir em que posição eles devem ser exibidos. Por exemplo, se quiser colocar os produtos mais vendidos na posição Promoção, basta ir no menu de Customização > Produtos > Carrossel de Produtos e na configuração do módulo escolher qual layout/página e a posição Promoção.

Você pode utilizar os módulos de:

  • Captura de e-mail
  • Depoimentos
  • Listagem de categoria de BLOG
  • Listagem de últimos comentários do BLOG
  • Listagem de últimas postagens do BLOG
  • Banners
  • Áreas Personalizadas
  • Menu principal
  • Menus secundários
  • Caixa de feed do Facebook
  • Produtos em Carrossel
  • Produtos em Abas

Mapa da Minha Loja

Uma dica bem legal é você antes de começar a colocar produtos, banners e promoções na página inicial da sua loja, é criar um Mapa da Home, este mapa vai ajudar a você, de uma forma simples, visualizar os módulos que queira colocar na página inicial da sua loja. Para fazer é bem simples, risque em um papel quadrados e imagine que cada módulo vai ocupar uma linha e cada linha é uma posição e vai “empilhar” um em cima do outro no desenho, para ajudar vamos primeiro pensar como a tela inicial da loja vai ficar, vamos penas descrever o que ter na home, veja:

Na tel inicial da loja, após o banner, vai ter uma lista de produtos em promoção, um banner falando dos descontos de frete que vou dar, outra linha com produtos mais vendidos, outro banner com uma categoria que mais vendo e abaixo dele os produtos desta categoria.

Agora que definimos como vai ser a tela inicial, vamos desenhar, fiz um diagrama no computador, mas pode só escrever num papel ou no bloco de notas, isso vai ajudar a visualizar melhor como vai ficar a home.

Agora fica fácil colocar cada módulo ali, voltando lá em cima no Mapa Principal, vou colocar todos eles na mesma posição. Vou dar a dica bacana, tente colocar os módulos na mesma posição, criando uma base para sua home, tudo na mesma posição, fica mais fácil de ordenar (já falo disso mais em baixo), e pra melhorar a dica coloque tudo na posição “Topo Conteúdo”, assim se precisar um dia de colocar um banner ou produto promocional você vai usar as posições mais acima como “Promoção” ou “Primeiro Destaque”.

Agora que sei a posição padrão, dos módulos que vão na tela incial da minha loja, vou colocar em cada um dos módulo a mesma posição e mudar apenas a ordem, mas antes voltamos no nosso mapa e vamos escrever o módulo que vamos usar e sua ordem, veja na imagem abaixo para simplificar:

Agora é botar mão na massa, digo nos módulos:

  1. Criar um grupo de produtos em destaque da categoria (Veja como neste artigo)
  2. Criar 2 banners promocionais, vou usar o módulo de Área personalizada (Veja como neste artigo) e colocar eles na posição “Topo conteúdo” e eles na ordem 2 e 4
  3. Criar 3 produtos em carrossel (Veja como neste artigo), onde todos tem a posição “Topo Conteúdo”, mas o Promoções na ordem 1, o Mais Vendidos com ordem 3 e o Destaque da Categoria com ordem 5

Pronto seguindo estes passos agora tudo fica alinhado e em sua posição, se eu precisar mexer novamente no banner vou na área personalizada, se eu precisar mudar a categoria vou no módulo de produtos em destaque, e assim por diante.

Principais rotas da loja virtual

A rota é um conceito existente na loja e que tem uma correspondência direta com alguma página. Abaixo listamos as principais rotas existentes.

RotaObservação
account/accountPágina inicial do painel do cliente
account/loginPágina de login do cliente
account/registerPágina em que o cliente pode realizar um novo cadastro
account/voucherPágina para compra do vale presente
checkout/cartPágina do carrinho
checkout/checkoutPágina em que o cliente faz a conferência e conclusão do pedido (mobile)
checkout/successPágina de sucesso da conclusão do pedido
common/homePágina inicial da loja
information/contactPágina de contato
information/contact/successPágina de sucesso de contato enviado
onecheckout/checkoutPágina em que o cliente faz a conferência e conclusão do pedido (desktop)
product/categoryPágina de uma categoria qualquer
product/productPágina de um produto qualquer
product/category/alllista todos os produtos da loja
product/searchPágina de busca
product/specialPágina com a lista de produtos em promoção
product/testimoniallista de depoimentos de clientes

Essas rotas são úteis para utilizar o conceito de “layouts” da plataforma e podem ser usadas também na configuração dos códigos de conversão (veja artigo Como configurar Google Tag Manager, Adwords e Remarketing).

EXEMPLO PRÁTICO

Ao criar um novo LAYOUT você pode fixar módulos só para aquele layout, por exemplo:

Você quer exibir um banner acima de um determinado produto, na tela do produto.

Basta criar um novo layout usando a rota de product/product e dar um novo nome, por exemplo o nome do produto.

Então, basta editar o produto e na ABA DESIGN aplique o layout que você criou.

Agora, habilite o banner na posição desejada e informe o layout em que ele deve aparecer, no caso, o layout que você acabou de criar.

Pronto, somente este produto terá este banner agora!

Isso pode ser feito com qualquer layout de página como também categorias para se ter um banner só em uma determinada categoria, bem como para vários módulos como menus, banners, áreas personalizadas entre outros recursos posicionáveis.

Este artigo foi útil para você?!