> 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/produtos-com-banner.md).

# Produtos com banner

Configure uma seção incrível com produtos em destaque para dar total enfoque. Perfeita para anunciar uma nova coleção, enfatizar aquela promoção ou até mostrar mais detalhes de um determinado produto!

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

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2F5j5fArd8l15Bv65nLmT6%2Fimage.png?alt=media&amp;token=c4832c3f-bba4-43ed-a042-9b84aeff624e" alt=""><figcaption><p>Exemplo de vitrine com banner.</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 > Produtos com banner"**.&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FV9u9Dijd6d5LRfqguAuW%2Fimage.png?alt=media&amp;token=71d60101-10e3-4188-bd66-18a245c97c76" alt=""><figcaption></figcaption></figure>

**- Título:** configure o tí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%2FeXEH2atsWOVzsu4fJNHD%2Fimage.png?alt=media&amp;token=ed0d28f7-9b91-43ea-97f5-60bfd184f172" 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%2FPYfeZefCES8Hrljx6BEm%2Fimage.png?alt=media&amp;token=38c222ce-38c4-4ea7-a6b5-220456209cd5" alt=""><figcaption></figcaption></figure>

Configure a **Cor de fundo da seção, Cor de fundo do bloco** e a **Cor dos textos.**&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2Fovmw2d0RrRGhIM1ScCkC%2Fimage.png?alt=media&amp;token=3eec6db1-3e28-467e-9c86-2640394eb11d" alt=""><figcaption></figcaption></figure>

**- Quantidade de produtos por linha:** configure a exibição dos produtos por linha em **1** ou **2**.&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FfvxyBwpLAJlDykJbuNiT%2Fimage.png?alt=media&amp;token=9750db42-f4ea-4a2d-b139-1fc63911c183" alt=""><figcaption></figcaption></figure>

**- Quantidade de produtos que passam por vez:** configure a transição dos produtos entre **Todos da linha** ou **Apenas um.**&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FTLwKf3qy79u4iuBXBkCC%2Fimage.png?alt=media&amp;token=e4d60855-c1b1-486f-b25e-ec8770e624d4" alt=""><figcaption></figcaption></figure>

Habilite a opção **''Exibir paginação''** para que a paginação seja exibida abaixo do carrossel de produtos.&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FZg0QXuEhglO8kZDUg72b%2Fimage.png?alt=media&amp;token=362d29eb-1deb-4430-9ed7-e94a4bcd37b7" alt=""><figcaption></figcaption></figure>

Escolha se você deseja exibir o **Banner** ou o **Texto** na página inicial.&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2Fp11yDVtxGLlUdOQRiXGa%2Fimage.png?alt=media&amp;token=b8af489c-d664-469c-b5c9-ef64318755cc" alt=""><figcaption></figcaption></figure>

Clique em **''Selecionar imagem''** e faça o upload de um banner para a seção, tanto para o computador quanto para o celular.&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FbZ3Tepf4geXqZ0n2DJ5n%2Fimage.png?alt=media&amp;token=60945b7b-9cc2-4b5b-aa27-6fd7acd1a9c5" alt=""><figcaption></figcaption></figure>

**- Link:** adicione um link para o banner.&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FVYivxFvFZpPh23HDQTql%2Fimage.png?alt=media&amp;token=9041f72f-4d36-4fc7-a25c-ed66b26f7a64" alt=""><figcaption></figcaption></figure>

Configure o **Título, Descrição, Texto do botão** e **Link do botão** do texto da seção que será exibido na página inicial.&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2F7ipRVi1lRKFafTL43XmX%2Fimage.png?alt=media&amp;token=248b2ec5-73fc-485f-8347-5f870a2e95a8" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Para que o texto seja habilitado, é necessário a opção ''**Texto''** estar ativa.&#x20;
{% endhint %}

Exemplo de vitrine com banner:

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2F5j5fArd8l15Bv65nLmT6%2Fimage.png?alt=media&amp;token=c4832c3f-bba4-43ed-a042-9b84aeff624e" alt=""><figcaption></figcaption></figure>

Exemplo de vitrine com texto:

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FeyrXnBH2G9biMiVkfYtp%2Fimage.png?alt=media&amp;token=8a6b98c5-c504-404e-877b-15ad58120a2b" alt=""><figcaption></figcaption></figure>

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

Para que essa seção seja ativa na página inicial o tema precisa estar publicado (não em rascunho) e é necessário que existam produtos cadastrados no painel da Nuvemshop, em: **Produtos > Lista de produtos > Organizar > Produtos com banner**
{% 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! 🙌**