Passar para o conteúdo principal

Banners na PLP: Configuração em Categorias e Coleções

b
Escrito por bruno bulso

Como configurar banners em Categorias ou Coleções (PLP)

O banner na PLP (Product Listing Page) é ideal para dar ênfase a uma linha de produtos, destacar promoções sazonais ou comunicar benefícios exclusivos daquela seção.

Atualmente, você pode vincular banners às PLPs através dos seguintes componentes:

  • Mosaico de Banner

  • Carrossel de Banner (Base utilizada para este tutorial)

  • Configurações Categorias (Card de Categoria)

Restrição de Tamanho: Para banners exibidos na PLP, são permitidos apenas os tamanhos P e G. Certifique-se de que a imagem respeita as dimensões desses formatos.

1. Passo a Passo: Configurando o Banner na PLP

Siga as instruções abaixo para configurar o banner através de um componente de Carrossel ou Mosaico:

  1. Acesse o painel administrativo da VTEX e entre no módulo Storefront > Headless CMS.

  2. Acesse o componente "Home" e entre no conteúdo que está atualmente publicado.

  3. Escolha um componente de "Carrossel de Banners" (ou Mosaico) já existente ou crie um novo.

  4. Dentro do card do banner escolhido, localize o campo "PLP Banner" e clique em "Novo PLP Banner".

  1. Preencha os campos conforme as instruções:

  • Título: Nome interno para identificar o componente (não visível para o usuário).

  • Subtítulo (Opcional): Descrição interna para auxílio na gestão.

  • Ativo: Habilite esta chave para que o banner seja exibido após a publicação.

  • Selecionar Tamanho: Escolha obrigatoriamente entre as opções P ou G.

  • Imagem: Faça o upload do arquivo respeitando o dimensionamento do tamanho escolhido.

2. Observações Importantes

Menu Customizado via CMS

Ao optar por criar o menu de categorias através do CMS (em vez de usar a árvore nativa da VTEX), lembre-se de que:

  • Você precisará construir toda a árvore de categorias manualmente dentro do componente.

  • Os produtos continuarão sendo puxados automaticamente com base no ID da Categoria cadastrado na VTEX.

Cuidados na Publicação

Caso você esteja inserindo o banner diretamente no Card de Categoria (dentro de um menu construído pelo CMS), é fundamental publicar a árvore de categorias apenas após concluir toda a sua construção. Se a publicação for feita de forma parcial, o aplicativo poderá apresentar categorias ausentes para os usuários.

Exemplos no aplicativo:

Ex 1:

Ex 2:

3. Salvando e Publicando

Após realizar as alterações, clique em Salvar e, em seguida, em Publicar. O conteúdo só será atualizado no aplicativo após a publicação.

Respondeu à sua pergunta?