Esta funcionalidade permite exibir amostras de cores (swatches) diretamente nos cards de produto em vitrines, categorias e resultados de busca. Ao tocar em uma cor, o usuário visualiza a imagem correspondente àquela variação sem precisar sair da listagem, agilizando a jornada de compra e melhorando a experiência de navegação.

Sistemas envolvidos: A configuração descrita neste artigo é baseada na estrutura de especificações de SKU da plataforma VTEX. A correta configuração do campo de cor no catálogo da VTEX é um pré-requisito para o funcionamento do recurso no aplicativo.

Qual é o formato obrigatório para o cadastro das cores na minha plataforma?

Para que as amostras de cores sejam exibidas corretamente, o valor da especificação "Cor" no cadastro do SKU deve ser um código Hexadecimal (ex: #000000 para preto, #FFFFFF para branco). O aplicativo utiliza este código para renderizar o círculo da cor correspondente.

O que acontece se eu não cadastrar as cores com código Hexadecimal?

Caso o valor cadastrado não seja um código Hexadecimal (por exemplo, "Azul Marinho"), o sistema tentará usar a imagem principal do próprio SKU daquela variação como amostra. Se o SKU não tiver uma imagem associada, aquela opção de cor não será exibida no card do produto.

Preciso usar um nome específico para o campo de cor no meu catálogo?

Sim. O aplicativo busca por uma especificação de SKU chamada exatamente "Cor" para identificar as variações que devem ser exibidas. O uso de outros nomes, como "Cores" ou "Color", fará com que a funcionalidade não encontre os dados corretamente.

Ao tocar em uma cor, o usuário é redirecionado para a página do produto?

Não. A grande vantagem desta funcionalidade é que a troca da imagem do produto acontece instantaneamente no próprio card, na vitrine ou na listagem, sem a necessidade de um novo carregamento de página. Isso proporciona uma navegação muito mais fluida.

Para ativar esta funcionalidade, o primeiro passo é garantir que os pré-requisitos de catálogo estão corretamente configurados na sua plataforma de e-commerce, ou seja, a existência da especificação de SKU "Cor" com valores em código Hexadecimal. Após validar o cadastro, por favor, abra um chamado com a equipe de suporte da Kobe Apps solicitando a habilitação do recurso. A ativação será realizada através de uma configuração técnica interna por nosso time.