Como configurar banner nas categorias ou coleções

O banner na PLP das categorias ou coleções de produtos irá aparecer logo acima da lista dos produtos. Sendo voltado para dar mais ênfase naquela categoria ou coleção, e também quando houver promoções ou benefícios exclusivos.

Atualmente é possível utilizar diversos componentes para vincular os banners dentro de categorias ou coleções, são eles:

• Banner
• Card Genérico
• Card de Categoria
• Lista de Produtos
• Carrossel de Produtos
• Carrossel Genérico 
• Categoria Customizada (Base usada para nosso tutorial)

Obs.: Importante ressaltar que utilizando as categorias pelo Contentful, é deixado de utilizar a opção nativa da VTEX, tendo que ser construída toda a árvore de categorias dentro do componente. Entretanto, os produtos de cada id de categoria da VTEX, são puxados na configuração conforme o id cadastrado. 

Obs.: Para os banners na PLP é possível apenas os tamanhos P e G.

 

Configurando o Banner na PLP

1. Entre Contentful e faça login com o e-mail que já possui acesso à ferramenta;
2. Na aba "Content", clique em "Add Entry" e selecione a opção do componente "Categoria Customizada".
3. Ao abrir o modelo para edição, preencha os campos indicados conforme as instruções abaixo:
   • • Título: com um nome que identifique o componente, ele não será exibido para os usuários
     • Abrir ao clicar: caso tenha subcategorias/categorias filhas, clique em "sim".
     • Categorias filhas: caso haja alguma subcategoria, é possível adicionar.
     • Buscar produtos de...: escolher de qual 'Category' ou 'Collection' irão vir os produtos.
     • Id da busca: adicionar o identificador da opção escolhida acima.
     • PLP Banner: adicionar o banner correspondente a essa categoria.
4. Exemplos:

.                   

Obs.: ressaltamos a importância de apenas publicar as árvore de categorias, quando tiver finalizada a construção de todas elas, caso não seja feito dessa forma, pode ocorrer uma visualização no app com categorias faltando. 

Ao final, lembre-se de publicar a alteração para que ela seja aplicada no aplicativo.

Caso fique com alguma dúvida, você pode enviar um e-mail para [e-mail].

•