> For the complete documentation index, see [llms.txt](https://temaflatnatray.fabrikadeecommerce.com.br/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://temaflatnatray.fabrikadeecommerce.com.br/3.-painel-de-edicao-do-tema/3.1-edicao-da-estrutura-e-elementos/3.1.4-banners.md).
# 3.1.4 - Banners
O seu tema **FLAT** conta com **diversos Banners na página principal (home)**, para que você possa deixar a loja com a cara da sua marca já desde o início. Temos os banners principal, banners secundários e até mesmo mini banners para complementar o visual da sua home, na versão desktop e versão mobile.
{% hint style="danger" %}
**Sempre que você for trabalhar com imagens (logo, produto, banner, popup e etc) para a sua loja, não deixe de verificar as orientações abaixo:**
\
\- o nome do arquivo **não** pode conter espaço entre as palavras;\
\- o nome do arquivo **não** pode conter caracteres especiais;\
\- o nome do arquivo **não** pode conter acentos;\
\- **sugerimos** que o nome do arquivo seja curto;\
\- upload para atualizar/substituir uma imagem existente na sua loja, **nunca** use o mesmo nome do arquivo, pois o cache da plataforma vai dificultar a mudança da imagem no servidor da Tray. Se a imagem no site é logo.png agora você deve mudar para logo-nova.png
{% endhint %}
> Veja na imagem a seguir a posição de cada um deles e o nome que estão cadastrados:
#### Telas da versão Desktop
#### Telas da versão Mobile
> Agora que você já conhece todos os **Banners** disponíveis, está na hora de aprender a alterá-los caso deseje.
>
> Para alterá-los, você precisa ir em ***`MARKETING > BANNERS`*** e seguir o passo a passo abaixo:
> 1. Com o **Painel Administrativo do seu E-commerce** aberto, clique na aba **Marketing** e em seguida em **Banners da Loja**.
> 2. Ao ser redirecionado para página de banners, você encontrará o nome de cada um dos banners do template. Basta clicar no ícone de edição que fica na fileira ações do banner que deseja alterar.
> 3. Dentro da página de edição, procure “escolher arquivo”, logo acima da foto cadastrada e escolha a nova imagem.
> 4. Após isso, clique em salvar.
>
> **OBS**: Caso sua alteração seja no banner principal, ou seja, o 01 - Banner Home Full - Desktop, ou em sua variante para mobile, 02 - Banner Home Full - Mobile, você pode acrescentar mais de um, já que esses banners tem o efeito carrossel. Para isso, você deve seguir os mesmos passos acima, porém para adicionar mais de um banner, vá até o último cadastrado e clique em “incluir mais fases”.
{% hint style="info" %}
Relação dos banners seus tamanhos e localização de exibição:
* Banner Categoria - **Rodapé** - 2000x250px - Banner Rodape
* Banner Categoria - **Topo** - 2000x250px - Banner Titulos
* Banner Vitrine - **Mobile** - 740x430px - Extra10
* Banner Vertical 1 - **Desktop/Mobile** - 380x482px - Extra2
* Banner Horizontal 1 - **Desktop/Mobile** - 378x226px - Extra3
* Banner Horizontal 2 - **Desktop/Mobile** - 378x226px - Extra4
* Banner Vertical 2 - **Desktop/Mobile** - 380x482px - Extra5
* Banner Vitrine 1 - **Desktop** - 1200x430px - Extra6
* Banner Mini 1, 2 e 3 - **Desktop e Mobile** - 380x160px - Extra7, Extra8 e Extra9
* Banner Home Full - **Desktop** - 2000x600px - Banner Home
* Banner Home Full - **Mobile** - 740x740px - Extra1
**OBS.:**
* Banner **Desktop** - esse banner só vai aparecer na versão desktop
* Banner **Desktop e Mobile** - esse banner vai aparecer nas versões desktop e mobile
* Banner **Mobile** - esse banner só vai aparecer na versão mobile
* Banner **Categoria** - Esses banners só aparecem nas categorias e na página dos produtos. Em especial para os banners de categoria, existe uma configuração dentro do painel de edição do tema que você precisa ativar para que eles funcionem. Observe o último print dessa tela. Detalhes sobre os **Banners de Categoria**, acessar a seção[ 4.4 Categorias e Subcategorias](/4.-configuracoes-especificas-do-seu-tema/4.4-categorias-e-subcategorias.md)
**IMPORTANTE:**
* Observar que cada banner possui uma localização de exibição para configurar e se isso não for feito o banner não aparece no lugar certo do seu tema.
**Exemplo**: Banner Vitrine - Mobile a localização de exibição é EXTRA10
**Faça download dos banners relacionados acima em formato .psd para usá-los como base para a criação dos seus banners e da relação das medidas,** [**clicando aqui**](https://drive.google.com/file/d/1cJZ_KLB0OiaboBTv7d_TnbRvLbpytZNr/view?usp=sharing)**.**
{% endhint %}
{% hint style="danger" %}
SÓ DEVEM ATIVAR OS BANNERS NO PAINEL SE AS IMAGENS ESTIVEREM ATIVAS NA PLATAFORMA.
{% endhint %}