# 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 %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://temaflatnatray.fabrikadeecommerce.com.br/3.-painel-de-edicao-do-tema/3.1-edicao-da-estrutura-e-elementos/3.1.4-banners.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.