- Permite que o cliente escreva um nome ou uma palavra sobre a foto do produto, escolhendo o tipo de letra e a cor, e veja o resultado na hora, antes de comprar.
- Resolve o problema de receber pedidos personalizados por e-mail ou WhatsApp: a escolha do cliente fica registrada no pedido e a produção recebe uma imagem pronta para bordar ou gravar.
- Aparece na página do produto, como um botão logo abaixo do botão de compra, e o resumo da escolha acompanha o item no carrinho e no pedido.
- Disponível para lojas Magento 2.
Passo a Passo por Escrito
1. Acesse as configurações do módulo no painel administrativo
No menu lateral do painel, acesse Lojas → Configuração → Catálogo → Personalização de produto.
A tela abre com quatro grupos de configuração: Configurações gerais, Pré-visualização, Fontes e Cores.
Resultado esperado: A tela de configuração do módulo será exibida com os quatro grupos disponíveis para preenchimento.
2. Habilite o módulo e defina o prazo de produção
Abra o grupo Configurações gerais e preencha:
- Habilitar módulo — selecione Sim para liberar a personalização na loja.
- Dias de produção — informe quantos dias úteis a personalização acrescenta ao prazo de entrega. Aceita apenas números, por exemplo
7. - Mensagem de produção — o texto que o cliente lê dentro da janela de personalização.
Na mensagem, escreva {{days}} no lugar onde o número de dias deve aparecer. Exemplo:
A personalização adiciona {{days}} dias úteis ao prazo de produção.
Você pode usar o sinal de porcentagem livremente no texto da mensagem — escrever "10% de desconto na segunda peça" não causa nenhum problema na página do produto.
Se você deixar Habilitar módulo como Não, a personalização desaparece de todos os produtos da loja, mesmo naqueles em que ela está ligada individualmente.
Resultado esperado: Ao salvar, uma mensagem de "A configuração foi salva" será exibida no topo da tela.
3. Escolha se o preview terá sombra atrás do texto (opcional)
Abra o grupo Pré-visualização e defina o campo Sombra atrás do texto.
Selecione Sim quando você trabalha com cores claras — branco, dourado, prata — sobre produtos também claros: a sombra ajuda o cliente a enxergar o nome no preview. Selecione Não quando quiser um preview mais fiel ao resultado final do bordado.
Resultado esperado: A configuração passa a valer tanto no preview que o cliente vê na loja quanto na imagem que a produção recebe.
4. Envie os arquivos das fontes
Ainda na mesma tela, abra o grupo Fontes e use o campo Enviar um arquivo de fonte.
Escolha o arquivo no seu computador e clique em Enviar. São aceitos arquivos .woff2, .woff, .ttf e .otf, com até 5 MB cada.
Envie um arquivo por vez e repita para cada tipo de letra que você quer oferecer.
Você não precisa de acesso a FTP nem à hospedagem: o envio é feito pelo próprio painel administrativo.
O painel confere o conteúdo do arquivo, não apenas o nome dele. Um arquivo que não seja realmente uma fonte é recusado, mesmo que você troque a extensão do nome.
Resultado esperado: Uma mensagem confirmando que o arquivo "foi enviado" aparece logo abaixo do campo, com o nome do arquivo.
5. Cadastre as fontes disponíveis
Depois de enviar os arquivos, cadastre cada tipo de letra na tabela Fontes disponíveis. Clique em Adicionar fonte e preencha as colunas:
| Coluna | O que preencher | Exemplo |
|---|---|---|
| Código | Identificador único da fonte, apenas letras, números, hífen ou sublinhado | cursiva |
| Nome | Nome exibido ao cliente na loja | Cursiva |
| Fonte web (woff2) | O arquivo que o navegador do cliente carrega para montar o preview | DancingScript.woff2 |
| Fonte de impressão (ttf/otf) | Arquivo usado para gerar a imagem que vai para a produção | DancingScript.ttf |
Informe apenas o nome do arquivo, exatamente como ele foi enviado, sem pastas no caminho.
O nome de cada fonte é exibido na própria tipografia dentro da tabela. Isso permite conferir de olho se a linha aponta para o arquivo certo.
Preencha sempre a coluna Fonte de impressão (ttf/otf). Sem ela, a imagem que a produção recebe pode sair com uma letra genérica em vez da fonte que o cliente escolheu — ou até sem o texto, dependendo do servidor da sua loja. O preview que o cliente vê na loja não é afetado.
Ao salvar, cada linha é conferida: o arquivo precisa existir, a extensão precisa bater com a coluna e não pode haver dois códigos iguais. Se algo estiver errado, o painel indica a linha e o que corrigir.
Resultado esperado: As fontes cadastradas passam a aparecer como opções na janela de personalização da loja e nos filtros de fonte da ficha do produto.
6. Cadastre as cores disponíveis
Abra o grupo Cores e clique em Adicionar cor na tabela Cores disponíveis. Preencha:
| Coluna | O que preencher | Exemplo |
|---|---|---|
| Código | Identificador único da cor, apenas letras, números, hífen ou sublinhado | dourado |
| Nome | Nome exibido ao cliente na loja | Dourado |
| Cor hexadecimal | O valor da cor começando com # |
#C5A45E |
Um círculo com a cor aparece ao lado do campo enquanto você digita, o que facilita conferir se o valor está correto.
A cor precisa ser informada em hexadecimal, com # seguido de 3 ou 6 caracteres. Um valor inválido fica com a borda vermelha e é recusado ao salvar.
Depois de terminar os quatro grupos, clique em Salvar configuração.
Resultado esperado: Uma mensagem de "A configuração foi salva" é exibida e as cores passam a aparecer como opções na janela de personalização.
7. Habilite a personalização no produto
Acesse Catálogo → Produtos, abra o produto desejado e clique na aba Personalização.
Ligue o campo Habilitar personalização. Os demais campos só aparecem depois disso.
Se o módulo estiver desligado nas configurações gerais (passo 2), esta configuração por produto não terá efeito — o botão não aparecerá em nenhum produto.
Resultado esperado: Os campos de personalização aparecem na aba, incluindo o preview visual da área de texto.
8. Preencha as regras de personalização do produto
Ainda na aba Personalização, preencha os campos conforme a peça:
| Campo | O que faz |
|---|---|
| Personalização obrigatória | Impede que o cliente adicione o produto ao carrinho sem personalizar |
| Limite de caracteres da personalização | Máximo de caracteres que o cliente pode digitar. Se você deixar em branco, o limite usado é 12 |
| Preço da personalização | Valor somado ao preço do produto quando o cliente personaliza |
| Fontes disponíveis | Quais tipos de letra este produto oferece. Deixe vazio para oferecer todos |
| Cores disponíveis | Quais cores este produto oferece. Deixe vazio para oferecer todas |
Nos campos Fontes disponíveis e Cores disponíveis, deixar tudo desmarcado equivale a liberar todas as opções cadastradas na configuração da loja.
O Preço da personalização é somado ao preço final do produto e aparece no carrinho como Taxa de personalização. Confira o valor antes de publicar o produto.
Resultado esperado: Os campos ficam preenchidos e passam a valer para este produto assim que você salvar.
9. Escolha a foto usada no preview (opcional)
O preview — tanto o que o cliente vê na loja quanto a imagem enviada para a produção — é montado sobre uma foto do produto. Nem sempre a foto principal do catálogo é a melhor: uma foto em ângulo, com sombra ou com o produto de lado atrapalha o posicionamento.
Para indicar uma foto dedicada, acesse a aba Imagens e vídeos do produto, clique na imagem desejada e marque o papel Imagem de preview da personalização — ele fica na mesma lista de Base, Miniatura e Amostra.
Se você não marcar nenhuma imagem, a ordem de escolha é:
- A imagem marcada como Imagem de preview da personalização
- A imagem Base do produto
- A Miniatura pequena e, depois, a Miniatura
- A primeira imagem da galeria que não esteja removida
A melhor foto para o preview mostra o produto de frente, plano, com iluminação uniforme e com a região do bordado limpa e visível.
A imagem de preview é sempre uma imagem da galeria do produto. Se você não quer essa foto aparecendo na vitrine, envie-a na galeria, marque nela a opção Ocultar da página do produto e atribua o papel de preview — ela sai do carrossel e continua servindo ao preview.
Resultado esperado: O preview da área, na aba Personalização, passa a exibir a foto que você marcou.
10. Informe as dimensões reais do produto (opcional)
Ainda na aba Personalização, preencha Largura do produto (cm) e Altura do produto (cm) com as medidas reais da peça.
Com essas medidas, o texto do preview sai proporcional ao tamanho real do produto. Sem elas, o módulo usa uma proporção genérica, que serve mas pode não corresponder ao tamanho da letra na peça final.
Resultado esperado: O texto desenhado no preview passa a ter um tamanho coerente com o tamanho real da peça.
11. Posicione o texto sobre a foto
Logo acima dos campos numéricos há um preview da área: a foto do produto com um marcador que você arrasta. Ao arrastar, os campos numéricos se preenchem sozinhos.
Existem dois modos de posicionamento, e você usa apenas um deles:
Posição do texto — um ponto onde o centro do texto fica. Preenche os campos Posição X do texto (%) e Posição Y do texto (%). Bom para produtos simples. Arraste o círculo sobre a foto para definir o ponto.
Área de texto — um retângulo dentro do qual o texto se encaixa, encolhendo se for comprido. Preenche os campos Área de texto X1 (%), Área de texto Y1 (%), Área de texto X2 (%) e Área de texto Y2 (%). Bom para produtos com uma área de gravação definida.
Para usar a área de texto:
- Clique em Desenhar uma área de texto.
- Arraste o retângulo para posicioná-lo sobre a região do bordado.
- Puxe o canto inferior direito para redimensionar.
- Se quiser voltar ao ponto único, clique em Remover a área de texto.
Use os controles Texto de exemplo, Fonte e Cor acima do preview para conferir como um nome real vai ficar.
Se a área de texto estiver preenchida, ela tem prioridade sobre a posição X/Y. Para voltar a usar o ponto único, é preciso remover a área.
Se o produto ainda não tem nenhuma imagem cadastrada, o preview exibe um aviso pedindo que você adicione uma imagem, e o posicionamento visual fica indisponível até então.
Clique em Salvar ao terminar.
Resultado esperado: Os valores de posicionamento ficam gravados no produto e são exibidos novamente ao reabrir a aba.
Validação e Testes
Após concluir a configuração, execute os testes abaixo para confirmar o funcionamento correto.
Teste 1 — O botão aparece na página do produto
Ação: abra a loja e acesse a página do produto que você configurou. Procure o botão logo abaixo do botão de compra.
Resultado esperado: O botão "Personalizar este produto" é exibido, acompanhado do valor da personalização quando você preencheu o campo Preço da personalização.
Teste 2 — A janela de personalização funciona
Ação: clique no botão. Digite um nome no campo de texto, troque o tipo de letra, troque a cor e observe a imagem do produto ao lado.
Resultado esperado: O nome aparece desenhado sobre a foto do produto, na posição que você configurou, e muda na hora quando você troca a fonte ou a cor. O contador de caracteres respeita o limite definido no produto.
Teste 3 — A escolha chega ao carrinho com a taxa correta
Ação: clique em Aplicar personalização, adicione o produto ao carrinho e abra o carrinho.
Resultado esperado: O item aparece com as linhas Texto da personalização, Tipo de letra, Cor e Taxa de personalização, e o preço do item já inclui o valor da personalização.
Teste 4 — O pedido chega com a imagem para a produção
Ação: finalize a compra e, no painel, acesse Vendas → Pedidos e abra o pedido. Role a página até a seção Preview da personalização.
Resultado esperado: A seção exibe uma imagem por item personalizado, com o texto desenhado na fonte e na cor escolhidas, junto do produto, do texto, do tipo de letra e da cor. O botão Baixar o preview salva a imagem no seu computador.
Teste 5 — A personalização obrigatória bloqueia a compra em branco
Ação: em um produto com Personalização obrigatória ligada, tente adicionar ao carrinho sem personalizar.
Resultado esperado: A compra é bloqueada, a janela de personalização abre e um aviso pede que o produto seja personalizado antes de ir para o carrinho.
Se não funcionar, verifique:
- Se Habilitar módulo está como Sim em Lojas → Configuração → Catálogo → Personalização de produto
- Se Habilitar personalização está ligado na aba Personalização do produto
- Se você limpou o cache da loja depois de salvar
- Se há ao menos uma fonte e uma cor cadastradas nas configurações gerais
- Se os filtros Fontes disponíveis e Cores disponíveis do produto não estão apontando para opções que foram removidas da configuração
- Se o produto tem ao menos uma imagem cadastrada — sem imagem não há preview
Pronto! Dessa forma realizamos a configuração da Personalização de produto em sua loja virtual Magento 2.
Observações Importantes
-
A imagem da produção é gerada quando o pedido é aberto pela primeira vez. Ao abrir um pedido personalizado no painel, a imagem é montada e guardada. Nas visitas seguintes, ela é apenas exibida.
-
A imagem da produção reproduz o que o cliente viu, não o produto de hoje. O posicionamento usado no pedido é uma fotografia do momento da compra. Se você mudar a área de texto do produto depois, os pedidos já feitos continuam com o posicionamento original.
-
O preço da personalização é global. Diferente dos outros campos da aba, esse valor é o mesmo em todas as visões de loja. Os demais campos da personalização podem ser configurados por visão de loja.
-
Remover uma fonte ou uma cor da configuração não quebra pedidos antigos. Os pedidos já registrados continuam exibindo a escolha do cliente normalmente.
-
A área de texto tem prioridade sobre a posição X/Y. Se os quatro campos da área estiverem preenchidos, os campos de posição são ignorados. Para voltar a usar o ponto único, clique em Remover a área de texto.
-
Se o cliente editar um item personalizado no carrinho, a janela abre em branco. Ele precisa digitar o texto e escolher fonte e cor novamente. Já a opção de comprar novamente um pedido anterior mantém a personalização.
-
Em produtos configuráveis, a personalização precisa estar habilitada no produto principal — aquele que o cliente vê na página —, e não em cada variação.
-
O mesmo produto com dois nomes diferentes vira duas linhas no carrinho. Isso é esperado: cada personalização é um item distinto para a produção.
Referências e Relacionados
- Gerenciamento de cache da loja: depois de qualquer alteração no módulo é necessário limpar o cache para que as mudanças apareçam na loja.
- Imagens e vídeos do produto: o preview da personalização é montado sobre uma imagem da galeria do produto, e é nessa aba que você marca qual foto será usada.
- Padrão de fotos para o preview de personalização: requisitos de resolução, fundo e enquadramento que deixam o preview previsível em toda a categoria.
- Gerenciamento de pedidos: depois da compra, o pedido personalizado segue o fluxo normal de faturamento e envio — esta doc cobre os próximos passos.
Caso tenha ficado alguma dúvida entre em contato com nosso time de suporte através do chat online dentro da sua loja virtual ou através do e-mail web@tryideas.com.br