Como inserir/editar banners na loja?

Os banners são essenciais na aparência da loja, pois informam detalhes da loja, dos produtos, das novidades e promoções.

O tamanho (largura e altura) do banner, depende muito do espaçamento que o layout disponibiliza para tal e isto varia de uma plataforma para a outra. Os banners podem ser inseridos em diversos locais, como nas laterais da loja, no topo, antes do rodapé, entre as informações dos produtos etc…

 

Para a configuração dos Banners em sua loja, antes vamos ter que observar qual a disposição você definiu para o seu layout.

Acesse o menu "Configurações - Aparência - Aparência Visual". Caso você tenha alguma dúvida como realizar essa verificação, verifique o artigo Disposição do Layout.

 

Neste manual vamos te ensinar a configurar os banners em sua loja, te mostrando o posicionamento de cada um.

Para acessarmos o menu de Banners, vamos no topo em “Configurações - Aparência - Banners”, e clique no botão “Configurar”.

banners_1

Na próxima tela vamos clicar em “Criar novo banner”.

Você verá uma lista com todos os tipos de banners disponíveis na loja.

banners_2

Na tela abaixo vamos iniciar com o “Banner Principal”.

Marque a caixa “Banner visível”.

Vamos definir a posição. Observe na imagem abaixo que o Banner Principal, está na posição “Topo”.

banners_3_principal

Após definir a posição do Banner Principal, vamos preencher os demais campos.

Posição: Como mostrou na imagem anterior, vamos deixar o Banner Principal no Topo.

Nome do Banner:  É o nome para identificação do seu banner dentro do seu painel administrativo, não vai aparecer na loja.

Título: Como o próprio nome do atributo pode sugerir, o título é o mesmo <title> em html, e serve para você dar um título para sua imagem, uma explicação em texto sobre aquela imagem, um rótulo ou legenda.

Onde será exibido: Neste campo você vai definir onde será exibido o seu Banner Principal.

Link: Será o local que deverá ser direcionado ao clicar acima do banner. Esse link poderá, ser uma página, produto, categorias. Por exemplo: http://nomedaloja.com.br/nome-do-meu-produto

Link Destino: Você vai definir se quando clicar nesse Banner, se vai abrir na mesma janela ou em uma outra janela do navegador.

Upload: Nesse botão você clica para buscar a imagem que será o seu banner.

Ao clicar nesse botão, será direcionado para buscar em seu computador, onde está a imagem.

Após subir a imagem, clique no botão “Salvar”.

banners_4_principal

Vamos ver na loja como ficará a posição do Banner Principal.

1-banners_principal_loja

Agora vamos realizar o mesmo procedimento com os demais Banners. Nesse artigo você verá o passo a passo e o posicionamento de todos os Banners.

Volte na tela inicial dos Banners, e vamos clicar em “Criar Novo Banner”.

Clique em “Criar novo banner”.

banners_6

Na tela abaixo vamos criar o “Banner Tarja”.

Marque a caixa “Banner visível”.

Vamos definir a posição. Observe na imagem abaixo que o Banner Tarja, está na posição “Tarja”.

Obs: Esse banner só aparecerá em sua loja, se você definiu essa disposição em seu Layout, conforme o artigo de Disposição de Layout, que indicamos no começo desse documento.

banners_7_tarja

Na próxima tela vamos preencher os demais campos:

Posição: Como mostrou na imagem anterior, vamos deixar o Banner Tarja na Tarja.

Nome do Banner:  É o nome para identificação do seu banner dentro do seu painel administrativo, não vai aparecer na loja.

Título: Como o próprio nome do atributo pode sugerir, o título é o mesmo <title> em html, e serve para você dar um título para sua imagem, uma explicação em texto sobre aquela imagem, um rótulo ou legenda.

Onde será exibido: Neste campo você vai definir onde será exibido o seu Banner Tarja. Você pode optar pela página inicial, tais como páginas de categorias, marcas, busca, tag, página de produtos ou em todas as páginas.

Link: Será o local que deverá ser direcionado ao clicar acima do banner. Esse link poderá, ser uma página, produto, categorias. Por exemplo: http://nomedaloja.com.br/nome-do-meu-produto

Link Destino: Você vai definir se quando clicar nesse Banner, se vai abrir na mesma janela ou em uma outra janela do navegador.

Upload: Nesse botão você clica para buscar a imagem que será o seu banner.

Ao clicar nesse botão, será direcionado para buscar em seu computador, onde está a imagem.

Após subir a imagem, clique no botão “Salvar”.

banners_8_tarja

Observe como ficará em sua loja.

bannertarja1

Vamos continuar com os demais Banners na Loja.

Volte na tela inicial dos Banners, e vamos clicar em “Criar Novo Banner”.

banners_2

Criar o Banner Lateral Esquerdo..

Vamos definir a posição. Observe na imagem abaixo que o Banner Sidebar Esquerdo, está na posição “Lateral Esquerdo”.

Obs: Esse banner só aparecerá em sua loja, se você definiu essa disposição em seu Layout, conforme o artigo de Disposição de Layout, que indicamos no começo desse documento.

banners_9_lateralesquerdo

Na próxima tela vamos preencher os demais campos:

Posição: Como mostrou na imagem anterior, vamos deixar o Banner Sidebar Esquerda na Lateral Esquerda.

Nome do Banner:  É o nome para identificação do seu banner dentro do seu painel administrativo, não vai aparecer na loja.

Título: Como o próprio nome do atributo pode sugerir, o título é o mesmo <title> em html, e serve para você dar um título para sua imagem, uma explicação em texto sobre aquela imagem, um rótulo ou legenda.

Onde será exibido: Neste campo você vai definir onde será exibido o seu Banner Lateral Esquerdo. Você pode optar pela página inicial, tais como páginas de categorias, marcas, busca, tag, página de produtos ou em todas as páginas.

Link: Será o local que deverá ser direcionado ao clicar acima do banner. Esse link poderá, ser uma página, produto, categorias. Por exemplo: http://nomedaloja.com.br/nome-do-meu-produto

Link Destino: Você vai definir se quando clicar nesse Banner, se vai abrir na mesma janela ou em uma outra janela do navegador.

Upload: Nesse botão você clica para buscar a imagem que será o seu banner.

Ao clicar nesse botão, será direcionado para buscar em seu computador, onde está a imagem.

Após subir a imagem, clique no botão “Salvar”.

banners_10_lateralesquerdo

Vamos ver como ficará na loja, de acordo com a sua disposição de layout.

bannerlateral

Vamos continuar com os demais Banners na Loja.

Volte na tela inicial dos Banners, e vamos clicar em “Criar Novo Banner”.

banners_2

Criar o Banner Lateral Direito..

Vamos definir a posição. Observe na imagem abaixo que o Banner Sidebar Direito, está na posição “Lateral Direito”.

Obs: Esse banner só aparecerá em sua loja, se você definiu essa disposição em seu Layout, conforme o artigo de Disposição de Layout, que indicamos no começo desse documento.

banners_11lateraldireito

Na próxima tela vamos preencher os demais campos:

Posição: Como mostrou na imagem anterior, vamos deixar o Banner Sidebar Direito na Lateral Direita.

Nome do Banner:  É o nome para identificação do seu banner dentro do seu painel administrativo, não vai aparecer na loja.

Título: Como o próprio nome do atributo pode sugerir, o título é o mesmo <title> em html, e serve para você dar um título para sua imagem, uma explicação em texto sobre aquela imagem, um rótulo ou legenda.

Onde será exibido: Neste campo você vai definir onde será exibido o seu Banner Lateral Direita. Você pode optar pela página inicial, tais como páginas de categorias, marcas, busca, tag, página de produtos ou em todas as páginas.

Link: Será o local que deverá ser direcionado ao clicar acima do banner. Esse link poderá, ser uma página, produto, categorias. Por exemplo: http://nomedaloja.com.br/nome-do-meu-produto

Link Destino: Você vai definir se quando clicar nesse Banner, se vai abrir na mesma janela ou em uma outra janela do navegador.

Upload: Nesse botão você clica para buscar a imagem que será o seu banner.

Ao clicar nesse botão, será direcionado para buscar em seu computador, onde está a imagem.

Após subir a imagem, clique no botão “Salvar”.

banners_12lateraldireito

Agora vamos ver como fica na loja:

4-banners__lateral_direito_loja

Vamos continuar com os demais Banners na Loja.

Volte na tela inicial dos Banners, e vamos clicar em “Criar Novo Banner”.

banners_2

Criar o Banner Bottom..

Vamos definir a posição. Observe na imagem abaixo que o Banner Bottom, está na posição “Bottom”.

Obs: Esse banner só aparecerá em sua loja, se você definiu essa disposição em seu Layout, conforme o artigo de Disposição de Layout, que indicamos no começo desse documento.

banners_13_bottom

Na próxima tela vamos preencher os demais campos:

Posição: Como mostrou na imagem anterior, vamos deixar o Banner Bottom.

Nome do Banner:  É o nome para identificação do seu banner dentro do seu painel administrativo, não vai aparecer na loja.

Título: Como o próprio nome do atributo pode sugerir, o título é o mesmo <title> em html, e serve para você dar um título para sua imagem, uma explicação em texto sobre aquela imagem, um rótulo ou legenda.

Onde será exibido: Neste campo você vai definir onde será exibido o seu Banner Bottom. Você pode optar pela página inicial, tais como páginas de categorias, marcas, busca, tag, página de produtos ou em todas as páginas.

Link: Será o local que deverá ser direcionado ao clicar acima do banner. Esse link poderá, ser uma página, produto, categorias. Por exemplo: http://nomedaloja.com.br/nome-do-meu-produto

Link Destino: Você vai definir se quando clicar nesse Banner, se vai abrir na mesma janela ou em uma outra janela do navegador.

Upload: Nesse botão você clica para buscar a imagem que será o seu banner.

Ao clicar nesse botão, será direcionado para buscar em seu computador, onde está a imagem.

Após subir a imagem, clique no botão “Salvar”.

banners_14_bottom

Vamos ver como fica na loja, um banner nessa posição. O banner ficará bem abaixo da página.

5-banners_loja_bottom

A Simplo7 é uma plataforma de loja virtual voltada para micro e pequenos empreendedores. Nós oferecemos plataformas de e-commerce hospedadas na nuvem e sem taxa de setup. Nossas principais características são pageviews ilimitados, controle de estoque, domínio próprio, visual personalizável, edição de CSS, páginas otimizadas para o Google com URL amigáveis, suporte a dispositivos móveis e opções personalizadas de módulos adicionais.