# Banners de categorias

{% embed url="<https://www.youtube.com/watch?t=70s&v=qZjXusyV7PE>" %}

<figure><img src="/files/ofeursEFwY32WQJV43Fw" alt=""><figcaption><p>Exemplo de banners de categoria.</p></figcaption></figure>

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Página Inicial > Banners de categorias"**.&#x20;

<figure><img src="/files/DQZAzDGUpG7TawDfCPTp" alt=""><figcaption></figcaption></figure>

Habilite a opção **''Usar estas cores para a seção''**, para utilizar cores específicas.

<figure><img src="/files/2iMuWwQjFJ6iyfdZ5HFW" alt=""><figcaption></figcaption></figure>

Você pode configurar a **Cor do fundo** e a **Cor do texto.**&#x20;

<figure><img src="/files/RZLtub5N0BINRO1GZiUe" alt=""><figcaption></figcaption></figure>

**- Exibir texto fora da imagem:** faz com que o texto cadastrado seja aplicado fora da imagem.&#x20;

<figure><img src="/files/CO91pustuSLtNfvCyMdJ" alt=""><figcaption></figcaption></figure>

\- **Usar a mesma altura para todos os banners:** aplica a mesma altura para as imagens cadastradas.&#x20;

<figure><img src="/files/bdU5uI17k4WDNLyoW3mX" alt=""><figcaption></figcaption></figure>

**- Remover espaços entre os banners:** remove o espaçamento entre um banner e outro.&#x20;

<figure><img src="/files/SafGGRaaL004jXCqZyUu" alt=""><figcaption></figcaption></figure>

**- Alinhamento do texto:** permite definir o alinhamento do texto em **Esquerda** ou **Centralizado.**&#x20;

<figure><img src="/files/G0jJJ2M4PkbgDYgRVBPk" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Importante**

\
Para que essa opção funcione, é necessário ter um texto cadastrado dentro da imagem via Tema Flex.&#x20;
{% endhint %}

Clique em **''Selecionar imagem''**, e faça o upload do banner que deseja.&#x20;

<figure><img src="/files/r1D0LmHMAa2LeRQ5m2Ka" alt=""><figcaption></figcaption></figure>

Clique no **ícone de lápis** na imagem e configure o **Link**, **Título, Descrição, Botão** e **Cor.**&#x20;

<figure><img src="/files/3hm7SOVPf5EENnloel2C" alt=""><figcaption></figcaption></figure>

**- Título:** defina o título da seção.&#x20;

<figure><img src="/files/55PVfqFhqMkoRtvVQjWg" alt=""><figcaption></figcaption></figure>

**- Subtítulo:** defina o subtítulo para a seção.&#x20;

<figure><img src="/files/I4MDOt5plZfGQX1Kbjxb" alt=""><figcaption></figcaption></figure>

<details>

<summary>Exibição em celulares</summary>

Você pode configurar a exibição entre **Grade** ou **Carrossel.**&#x20;

![](/files/uVHmq9TkpA3yDyQUTrUX)

</details>

<details>

<summary>Exibição em celulares</summary>

Você pode configurar a exibição entre **Grade** ou **Carrossel.**&#x20;

![](/files/QYkf1fBn0rNnknhx5Nwu)

Defina também a quantidade de banners por linha entre **1**, **2**, **3** ou **4.**

![](/files/4Pd1SM1UpdSXyadz0oCF)

</details>

{% hint style="warning" %}
**Importante**

Para que essa seção seja ativa na página inicial, é necessário que o módulo esteja habilitado como "visível" deixando o olho em azul:

![](https://ajuda.temaflex.com.br/~gitbook/image?url=https%3A%2F%2F2606432350-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FdmDGRqcCSJvlyHS2pQ1k%252Fuploads%252FFofkmrAEXWG3DCqxlS4J%252Fativo.png%3Falt%3Dmedia%26token%3Dabecbeec-5401-4a74-851d-875e2ff680de\&width=300\&dpr=4\&quality=100\&sign=fe0acf17\&sv=2)
{% endhint %}

Por último, clique em **"Publicar Alterações"** para finalizar.

![](https://static.helpjuice.com/helpjuice_production/uploads/upload/image/7634/direct/1643317524355-1643317524355.png)

**Pronto! 🙌**&#x20;


---

# 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://ajuda.temaflex.com.br/personalizar-layout/pagina-inicial/banners-de-categorias.md?ask=<question>
```

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.