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
-
Realize o login no painel administrativo da VTEX e entre no espaço destinado
ao app
Exemplo:
-
Na aba "Headless CMS", clique
em "Criar documento" e
selecione a opção do componente "Product Badge Structure":
-
Abra o componente e selecione Settings, conforme imagem
abaixo:
-
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:
-
Na aba "Headless CMS", clique
em "Criar documento"
e selecione a opção do componente "Product Badge | Coupon":
-
Abra o componente e selecione Settings, conforme imagem
abaixo:
-
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 📩 suporte@kobe.io