Tags de Promoção Personalizadas (Product Badges)
Com ela, você pode personalizar nomes e cores de forma independente das configurações da VTEX, além de permitir a exibição de múltiplas tags em um único produto.
Autonomia e Ativação: Você tem total autonomia para criar e configurar as tags customizadas diretamente no CMS (usando os componentes abaixo).
1. Configurando a Estrutura Base da Tag
O primeiro passo é definir a aparência visual da sua tag no componente Product Badge Structure.
Acesse o painel administrativo da VTEX e entre no espaço do aplicativo.
Na aba "Headless CMS", clique em "Criar documento" e selecione o componente Product Badge Structure.
Abra o componente e acesse a aba Settings.
Preencha os campos conforme as instruções abaixo:
ID: Identificação numérica da estrutura no CMS (deve ser um valor numérico).
Nome: Nome da tag que será exibido para o cliente no aplicativo.
Cor: Insira o código Hexadecimal da cor desejada (ex: #000000).
Posição: Define a ordem de exibição (o valor padrão é 0).
Estilo: Escolha entre "Pílula" (formato arredondado) ou "Retangular" (formato padrão).
Mostrar em cima da imagem do produto?: Selecione "Sim" caso o seu aplicativo utilize o tema CLEAN.
Demais perguntas: Marque conforme a necessidade específica da sua estratégia.
Abaixo, segue imagem de exemplo da configuração:
2. Configurando a Exibição da Tag
Após criar a estrutura, você deve definir em quais produtos ou categorias a tag será aplicada através do componente Product Badge | Coupon.
Na aba "Headless CMS", clique em "Criar documento" e selecione o componente Product Badge | Coupon.
Abra o componente e acesse a aba Settings.
Preencha os campos conforme as instruções abaixo:
Estrutura: Selecione o ID da tag (criado no passo anterior) que deseja exibir.
Nome: Nome de identificação interna para o CMS (não aparece no app).
Texto complementar: Campo opcional para ajudar na organização interna.
O selo será exibido em um/uma: Escolha o critério de exibição (Coleção, Categoria, Lista de Especificações, Lista de Produtos ou Promoções Principais).
Insira os ID: Adicione os IDs correspondentes à opção selecionada acima.
Exibição programada: Defina a data e hora de início e fim para a exibição da tag.
Abaixo, segue imagem de exemplo da configuração:
Exemplo no aplicativo:
Observações Importantes
Limite de Visualização: Cada produto pode exibir até três tags customizadas simultaneamente.
Publicação: Após finalizar as configurações, lembre-se de Publicar a alteração para que ela seja refletida no aplicativo.