> For the complete documentation index, see [llms.txt](https://ajuda.temaflex.com.br/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ajuda.temaflex.com.br/personalizar-layout/pagina-inicial/banners-de-categorias.md).

# Banners de categorias

Destacar as categorias na página inicial é umas das melhoras formas para atrair seus clientes, fazendo com que conheçam os seus produtos, novidades e até mesmo ofertas.

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

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FlGCwiSJBXlKV756wsFeV%2Fimage.png?alt=media&amp;token=bf76b118-80cf-475a-b32d-4e2057fadbd4" 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="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FkXCmkwqwYYN804Bqf18J%2Fimage.png?alt=media&amp;token=196105ec-0107-4189-b2da-5c4929012e63" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FXHSYbzMeKbgb0I461ERG%2Fimage.png?alt=media&amp;token=75108311-d76d-4832-b732-bc8235d56611" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FzKdvAWq8D8yOfMB4JCCB%2Fimage.png?alt=media&amp;token=9c2cc2b7-b0b1-4144-b051-faa0f51e854a" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FckDE7KIdgKS6yQPv2yAO%2Fimage.png?alt=media&amp;token=ad139209-bb5c-40d6-9ab7-b5cf6dd9033e" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FlbapEulDMRP1ZDV6EI8P%2Fimage.png?alt=media&amp;token=bf475e23-f244-438f-813e-a7c49ab8a114" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FBE4ABnjYkXCBMbFeaLWU%2Fimage.png?alt=media&amp;token=5dfe853d-ad31-4f25-b5e2-c50dd71bdc8b" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2F7iYRZBaICas6Y6g35Hga%2Fimage.png?alt=media&amp;token=c756a710-0220-4131-a191-a315992ac707" 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="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2Fez1RIxCyDhsvBuDA7tqr%2Fimage.png?alt=media&amp;token=cd28a35e-42b7-4708-959a-d3c359443499" 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="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FyjfTGfiSDRBn5e1kRzqi%2Fimage.png?alt=media&amp;token=c72c2bdf-9ee0-4253-9305-6433bf2836f6" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FjAej0mfBkNQ8E4sFqYq4%2Fimage.png?alt=media&amp;token=457abcea-8642-4413-b36b-ae14a7ce0d77" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FyhlpMAd75HNkv3Rb1ngW%2Fimage.png?alt=media&amp;token=cdde2d00-483a-441d-9a86-2346694af818" alt=""><figcaption></figcaption></figure>

<details>

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

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

![](https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FFtyR6uydRziUzOzlnZzc%2Fimage.png?alt=media\&token=6651eb9c-53d0-4f00-a1f5-2e653437570a)

</details>

<details>

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

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

![](https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2Fwr9FoJUIfQSNkD6EYkgI%2Fimage.png?alt=media\&token=bd3f7f16-867a-4f80-ba27-2e0282e9149c)

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

![](https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2Fjldwls609GBxDPtCRJCW%2Fimage.png?alt=media\&token=190b265a-c2c5-4cc1-aac3-fa42b511f566)

</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;