Vitrine de Produtos: Como entender os componentes e funcionalidades

Criada por Jeisyka Salgueiro, Modificado em Ter, 28 Jul na (o) 11:15 AM por Mariana Benites

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: Administrador
Persona: Analista de CRM, Marketing

Como entender os componentes e funcionalidades

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

Gerador de Vitrine

É a ferramenta onde 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 a imagem da vitrine. Ao final, poderá gerar um código HTML pronto para 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 e-mail, 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 a Inteligência 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.

Produto baixou de preço: Destaca produtos que o cliente viu anteriormente e cujo preço foi reduzido de ontem para hoje. Ideal para deixar ligada com uma régua de comunicação diária.

Produtos recomendados: Modelo versátil de recomendação que explora novos produtos para o consumidor baseado nas compras de consumidores similares a ele.

Layout do Produto

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

No painel de configuração do Layout do Produto, você 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ê também pode personalizar cada componente.

Os componentes do Layout são construídos a partir dos dados 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.

Para vitrines de “Produto baixou de preço” recomendamos 1 coluna e 1 linha.

Para vitrines de “Produtos recomendados” recomendamos 3 colunas e 1 Linha.

Materiais de Apoio

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

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

FAQ – Perguntas Frequentes

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, Navegação Abandonada, Produto Baixou de Preço e Produtos Recomendados.

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.

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 9h às 18h)