Este artigo apresenta os conceitos e componentes da Vitrine de Produtos, uma ferramenta que funciona como um gerador de código HTML para recomendações personalizadas em e-mails. Ela resolve a necessidade de exibir produtos relevantes de forma automatizada e visualmente alinhada à marca.

Nível de Acesso: Usuários com acesso de administrador

Persona: Analista CRM, Marketing.

ÍNDICE

Veja os assuntos abordados nesse artigo:

• Gerador de Vitrine 
  Definição da ferramenta e funcionalidade HTML 
• Vitrine e Pré-visualização 
  Definição da ferramenta e funcionalidade HTML 
• Gerando o código
  Inteligência de dados e tipos de modelos disponíveis 
• Modelo de recomendação
• Layout do Produto
  Personalização visual e componentes do XML 
• Grid
  Estrutura de exibição e recomendações de uso 
• Materiais de Apoio  
• CONCLUSÃO
• FAQ – Perguntas Frequentes sobre a Vitrine de Produtos 

Antes de começar, é importante compreender os termos que encontrará na plataforma:

Gerador de Vitrine 

É a ferramenta que você configura tudo. Funciona como um gerador de código HTML, onde você define regras do Modelo de Recomendação da Vitrine e características visuais para imagem da vitrine, assim no final, poderá gerar um código HTML pronto a ser copiado e colado no HTML do seu e-mail.

Vitrine e Pré-visualização 

O resultado final é o código HTML, mas você consegue ter uma prévia através da Pré visualização.

A Vitrine é um bloco com até 6 recomendações de produtos que o seu cliente verá no e-mail, composto pela combinação de um Modelo de recomendação (quais produtos mostrar), um Layout de Produtos (como mostrar o produto) e o Grid de Produtos (quantos produtos mostrar). 

Gerando o código

Após definir a combinação de configurações para sua vitrine, clique em “Gerar código HTML” e copie o código clicando no botão de atalho. 

A Pré-visualização vai funcionar no Gerador de Vitrines, mas quando você colar o HTML em seu corpo de e-mail não conseguirá visualizar nenhuma imagem. 

Não se preocupe, não significa que deu errado! Na Pré-visualização preenchemos os dados da vitrine com exemplos reais, já quando você cola no email, as variáveis que definem qual vitrine será exibida ainda estão em formato de variável (ex.: *|NOME|*) e não com os valores preenchidos.

Caso ainda deseje testar depois de colar o HTML da Vitrine no e-mail, sugerimos enviar o e-mail para um segmento preenchido por consumidores de teste.

Modelo de recomendação

É a inteligência de dados por trás da Vitrine. Aqui você define qual o critério utilizado para Inteligencia da Dito escolher os produtos que serão recomendados para cada consumidor.

Nesta primeira versão, disponibilizamos dois modelos poderosos para popular a sua vitrine com produtos relevantes:

Carrinho Abandonado: Exibe automaticamente os produtos que o cliente adicionou ao carrinho no seu site, mas não finalizou a compra. É ideal para recuperar vendas "quase ganhas".

Navegação Abandonada: Mostra os produtos que o cliente visitou e visualizou recentemente, mas não chegou a colocar no carrinho. Serve para lembrar o cliente do interesse demonstrado.

Em breve:
Nossa equipe está desenvolvendo mais modelos para sua marca expandir o uso da Vitrine de Produtos, as vitrines de “Produtos que baixaram de preço” e “Produtos recomendados” serão lançadas ainda no 1º semestre de 2026.

Layout do Produto

Não precisa de ser um designer ou programador para deixar a vitrine com a cara da sua marca.

No painel de configuração do Layout do Produto, pode personalizar facilmente:

• Tipografia: Escolha a fonte, tamanho e cor do texto para o nome e preços dos produtos.

• Cores: Altere a cor dos botões, fundos e destaques.

• Habilitar mais componentes: Tag de desconto, preço promocional

Uma vitrine é a junção de até 6 imagens de produtos. No layout você define a aparência de cada imagem de produto dentro da vitrine. Já temos uma configuração padrão pronta para sua marca utilizar, mas você pode também pode personalizar cada componente.

Os componentes do Layout são construídos a partir de um dado do Id de Produto no XML. São eles: 

Imagem: Image_link no XML
Nome do produto: Title
Botão: Link
Preço: Price
Preço com desconto**: Sales_Price
Tag de desconto**: Cálculo interno comparando Price e Sales_price

** Os componentes Preço com desconto e Tag de desconto são dinâmicos, caso o produto não tenha esses valores preenchidos, o componente será oculto da imagem do produto.

Atenção:

Nesta primeira versão, sua marca pode personalizar apenas 1 layout. Logo, se você alterar o layout a cada uso da vitrine, as demais lançadas anteriormente também serão alteradas. Recomendamos incluir todos os componentes e seguir a proporção de imagem do seu e-commerce.

Grid

É a estrutura da vitrine. Define quantos produtos serão exibidos no total, organizados por linhas e colunas (máximo de 6 produtos).

Observe no exemplo abaixo a diferença entre uma vitrine com 2 e com 3 colunas:

Nossa recomendação:
Para vitrines de “Abandonou Carrinho", recomendamos 1 Coluna com 3 linhas.
Para vitrines de “Abandono de Navegação”, recomendamos 3 colunas e 2 Linhas

Materiais de Apoio  

- O que é a Vitrine de Produtos e Porque contratar? 

- Pré-requisitos para utilização da Vitrine de Produtos  

CONCLUSÃO

Neste artigo, você conheceu os termos técnicos e o funcionamento da Vitrine de Produtos, desde a escolha da inteligência de dados até a estrutura de exibição (Grid) e personalização visual. Com essas definições, o cliente alcança a autonomia para gerar vitrines dinâmicas de abandono de carrinho e navegação para suas campanhas de e-mail.

Ficou com alguma dúvida ou identificou algum problema? Acione nosso time pelo chat disponível no app dito. (Horário de Atendimento de Segunda a Sexta das 9hrs as 18hrs)

Gostou, mas acha que algo pode melhorar? Sua opinião é muito importante para nós! Se você tem alguma sugestão ou sentiu falta de algo neste módulo, queremos ouvir você. Compartilhe suas ideias diretamente com nosso time de Produto através do link abaixo. Acesse aqui o Portal de Ideias

FAQ – Perguntas Frequentes sobre a Vitrine de Produtos 

1. Pergunta: Por que não consigo visualizar as imagens após colar o HTML no meu e-mail? 

Resposta: Isso ocorre porque, ao colar no e-mail, as informações ainda estão em formato de variável (ex.: |NOME|). A pré-visualização completa só ocorre no Gerador de Vitrines ou em envios de teste, onde os dados são preenchidos.

2. Pergunta: Quais são os modelos de recomendação disponíveis atualmente?

Resposta: Estão disponíveis os modelos de Carrinho Abandonado (produtos adicionados e não comprados) e Navegação Abandonada (produtos visitados recentemente).

3. Pergunta: O que compõe o Layout de um Produto na vitrine?

Resposta: O layout é composto pela combinação de componentes extraídos do XML: Imagem (image_link), Nome (title), Botão (link), Preço (price), Preço com desconto (sales_price) e Tag de desconto.

4. Pergunta: Posso criar vários layouts diferentes para minhas vitrines?

Resposta: Nesta primeira versão, sua marca pode personalizar apenas 1 layout. Se alterar o layout a cada uso, as vitrines lançadas anteriormente também serão alteradas.

5. Pergunta: Qual a recomendação de Grid para vitrines de Abandono de Navegação?

Resposta: A recomendação para vitrines de Abandono de Navegação é a utilização de 3 colunas e 2 linhas.