> 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/categorias-principais.md).

# Categorias principais

{% embed url="<https://www.youtube.com/watch?index=13&list=PLjqZTg-KCmj8PNgm5YdN3Zk02OZeblrQU&v=DvY1TpnAJFw>" %}

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FeJoLiiSXRDvzwbdT7Sbd%2Fimage.png?alt=media&amp;token=f0aab989-a73b-425e-b2db-2159bc2b8040" alt=""><figcaption><p>Exemplo das categorias principais.</p></figcaption></figure>

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. Em seguida, clique em **"Página Inicial > Categorias principais"**.

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2F9mHPLZ3KyrxxbJvgBAXo%2Fimage.png?alt=media&amp;token=de392cc4-b747-419b-b175-44c2f17d54dd" alt=""><figcaption></figcaption></figure>

Nesta seção, você pode configurar:&#x20;

**- Cores:** para utilizar cores específicas, marque a opção ''**Usar estas cores''.**&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2Fobj7RU0cjgooYlU0MuJN%2Fimage.png?alt=media&amp;token=9a9bd580-6218-452b-87fd-185a58c3180e" alt=""><figcaption></figcaption></figure>

Você poderá configurar a **Cor de fundo** e a **Cor dos texto.**&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FRTYZ5HyzKn6ne2D63ygh%2Fimage.png?alt=media&amp;token=6fdd25ea-ec21-42d1-9df6-07b1b140447d" alt=""><figcaption></figcaption></figure>

**- Exibir texto fora da imagem:** faz com que o texto da categoria 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%2Ft2FYKQcgxdg4wzRsU8Li%2Fimage.png?alt=media&amp;token=3175700f-8660-447b-8df3-19e3150e68f1" alt=""><figcaption></figcaption></figure>

**- Imagens em formato de círculo:** faz com que as imagens sejam arredondadas.&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FnL5ci7uC20zqHEfF1yp5%2Fimage.png?alt=media&amp;token=fafc0153-1b19-49fb-8978-951d3952b248" alt=""><figcaption></figcaption></figure>

**- Título:** defina o título que deseja 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%2FA5rd8WSrTV2WK0btzMUe%2Fimage.png?alt=media&amp;token=05311be6-cc0a-463a-907d-4a23fdc58af0" alt=""><figcaption></figcaption></figure>

**- Exibição de banners em celulares:** você pode configurar a disposição dos banner entre **1, 2** ou **3 banners por linha.**&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FT4VztbnfoKJRA8ZkjzqE%2Fimage.png?alt=media&amp;token=654ea878-b28e-47c4-8326-7409cfbc2105" alt=""><figcaption></figcaption></figure>

**- Exibição de banners em computadores:** você pode configurar a disposição dos banner entre **1, 2** ou **3, 4, 5, 6, 8** ou **10 banners por linha.**&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FpY2YW5qYjZ4Zk3EXrHrR%2Fimage.png?alt=media&amp;token=58982d05-454b-4633-ac9b-16ad0e738329" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FV8WQNLCEmUJrHbUY09cp%2Fimage.png?alt=media&amp;token=86e5ac77-b821-4bb3-8afd-05c522ca2189" alt=""><figcaption></figcaption></figure>

Clique no **ícone de lápis** na imagem e adicione o link que deseja.&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2Fguqsbn6WXpCNCST24Nwd%2Fimage.png?alt=media&amp;token=d9cea7c0-6f78-4881-aa9a-ce063084f1c8" alt=""><figcaption></figcaption></figure>

Para reordenar as categorias principais você deve clicar, segurar e arrastar a imagem pare posicionar aonde desejar. A numeração no canto esquerdo inferior informara a posição exata.&#x20;

<div align="center"><figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FZDNmqWpoxHZqyExWBPo5%2FV%C3%ADdeo%20sem%20t%C3%ADtulo%20%E2%80%90%20Feito%20com%20o%20Clipchamp.gif?alt=media&amp;token=ccdb6dc6-fc57-4a29-a71a-4f6f60f5f838" alt=""><figcaption></figcaption></figure></div>

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

O texto que aparecerá na imagem está diretamente relacionado ao link adicionado. Se as imagens não possuírem nenhum link, o texto não aparecerá.&#x20;
{% endhint %}

{% 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/1643232327031-1643232327031.png)

**Pronto! 🙌**