Passar para o conteúdo principal

Configuração do Texto Descritivo na PLP da VTEX

b
Escrito por bruno bulso

Configuração do Texto Descritivo na PLP da VTEX

Essa funcionalidade permite adicionar um conteúdo informativo no topo da PLP, como título, descrição, cor de fundo e espaçamento, utilizando o componente Content Container no CMS da VTEX.

1. Acesse o CMS da VTEX

Realize o login no painel administrativo da VTEX e entre no espaço destinado app

Exemplo:

2. Selecione o Storefront e crie o documento

Selecione o módulo "Storefront" e clique na função "Headless CMS".

Na aba "Headless CMS", clique em "Criar documento" e selecione a opção do componente "Content Container":

3. Inclua a seção Texto Descritivo

Dentro dele, você deve incluir a seção "Texto Descritivo", que é responsável pela exibição do conteúdo na página:

4. Configure os campos da seção

Ao adicionar essa seção “Texto Descritivo", será necessário configurar os seguintes campos:

  • Ativo: habilita a exibição do componente

  • Título: Título do texto que será exibido na categoria ou coleção

  • Texto: Descrição que será exibida

  • Cor de fundo: código hexadecimal da cor de fundo desejada

  • Espaçamento: controla a distância entre o texto e o topo (pode deixar em branco para usar o padrão)

Imagem da seção:

5. Ajuste as configurações do componente

Depois dessa etapa, é importante acessar a aba de "settings" do componente para garantir que ele seja exibido corretamente no contexto desejado:

Nessa aba, você deve preencher:

  • Título: nome interno para identificação no CMS

  • Ativo: manter habilitado

  • ID do local:

    • plpHeader → exibe o texto acima dos filtros

    • plpTop → exibe o texto abaixo dos filtros

  • Contexto de visibilidade:

    • Product Category → para categorias

    • Product Collection → para coleções

  • Critérios de Filtro: ID da categoria ou coleção onde o texto deve aparecer

6. Valide a exibição e publique

Com essas configurações, o conteúdo será exibido conforme o posicionamento e contexto definidos.

Exemplo no App:

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 📩 [email protected]

Respondeu à sua pergunta?