Tag de Promoção Customizada (CMS VTEX)

Essa funcionalidade foi criada para permitir maior flexibilidade no controle das tags de promoção, possibilitando a personalização do nome e da cor, independentemente das configurações feitas na VTEX. Também é possível aplicar múltiplas tags a um mesmo produto.

Observação: Para que as customizações apareçam no aplicativo, é necessário solicitar ao suporte a desativação da exibição de tags de promoção provenientes da VTEX. Por isso, certifique-se de que todas as novas tags estejam devidamente configuradas antes de fazer a solicitação.

Configurando Estrutura Base da Tag

1. Realize o login no painel administrativo da VTEX e entre no espaço destinado ao app 
   Exemplo: 
   
   
   
2. Na aba "Headless CMS", clique em "Criar documento" e selecione a opção do componente "Product Badge Structure":
   
   
   
3. Abra o componente e selecione Settings, conforme imagem abaixo:
   
   
   
4. Ao abrir o modelo para edição, preencha os campos indicados conforme as instruções abaixo:
   • ID: ID de identificação da estrutura no CMS (valor precisa ser numérico)
   • Nome: Nome usado para identificar a Tag, é o nome que aparece no app.
   • Cor: Preencher com Hexadecimal da Cor de exibição da Tag no app.
   • Posição: Define em qual posição a tag de promoção será exibida. O valor padrão é 0.
   • Estilo: Opção "Pílula" para formato arredondado de Tag ou "Retangular" para o formato padrão.
   • Mostrar cima da imagem do produto?: Selecionar "Sim" caso utilize o tema CLEAN no app.
   • Demais perguntas: Marcar conforme necessidade".
     
     Abaixo, segue imagem de exemplo da configuração:
     
     

Configurando Exibição da Tag

1. Na aba "Headless CMS", clique em "Criar documento" e selecione a opção do componente "Product Badge | Coupon":
   
   
   
2. Abra o componente e selecione Settings, conforme imagem abaixo:
   
   
   
3. Ao abrir o modelo para edição, preencha os campos indicados conforme as instruções abaixo:
   • Estrutura: Selecionar o ID que foi registrado para a Tag que deseja exibir no app.
   • Nome: Nome para identificação no CMS (não é exibido no app).
   • Texto complementar: Texto extra para facilitar a identificação da tag que está sendo cadastrada, opcional.
   • O selo será exibido em um/uma: Selecionar se deseja exibir a nova Tag em uma Coleção, Categoria, Lista de Especificações, Lista de Produtos ou Promoções Principais.
   • Insira os ID dos produtos, coleções, categorias: Adicionar os IDs de acordo com a opção selecionada anteriormente.
   • Exibição programada (início e fim): Define o período de exibição do componente.
     
     Abaixo, segue imagem de exemplo da configuração:
     
     

OBS: um mesmo produto pode exibir até três tags customizadas.

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 📩 [e-mail]