Como personalizar a confirmação de pedido da Shopify sem substituir o Liquid

A confirmação de pedido já contém informações que sua loja precisa transmitir corretamente. Se você quer acrescentar uma introdução com a identidade da marca, pode criar esse pequeno bloco no Mailvex e inseri-lo na notificação existente. O trabalho é uma adaptação manual de HTML, com comparação de código e teste do resultado.

Se a mudança é apenas logotipo e cor, a personalização nativa da Shopify pode bastar. Este roteiro atende a outro caso: um título e um parágrafo com apresentação própria. Ele não substitui a notificação completa, não reconstrói dados do pedido e não instala uma integração entre Mailvex e Shopify.

1. Guarde a versão atual da loja

Trabalhe com uma notificação que já funciona e com permissão para editar seu código. Abra Settings > Notifications > Customer notifications > Order processing > Order confirmation > Edit code. Antes de tocar no conteúdo, salve o assunto atual e todo o HTML em arquivos locais separados.

Use nomes identificáveis, como shopify-pedido-original-v01.html e shopify-pedido-assunto-v01.txt. Registre a data e a pessoa responsável. Crie uma cópia para a alteração; o original fica preservado. Se a loja tem personalizações antigas, não tente reconstruí-las a partir de uma mensagem recebida.

Defina também o ponto de partida da comparação: qual aparência e quais dados estavam presentes antes da mudança. Guarde uma referência da versão atual. Ter um backup não valida o comportamento do template, mas permite recuperar exatamente o código da loja caso a adaptação apresente problemas.

2. Decida o que o novo bloco pode dizer

A introdução será estática. Ela não recebe nome, itens, preço, status ou prazo do pedido. Deixe essas informações no código existente. Uma mensagem fixa sobre pagamento recebido, envio realizado ou retirada disponível pode contradizer o cenário apresentado pela própria notificação.

Exemplo fictício: substitua Casa Cedro pelo nome real da marca e revise o texto ao lado da introdução que já existe. Use apenas um título e um parágrafo, sem nova imagem, botão ou link de acompanhamento.

Essa escolha visual é um exemplo, não uma exigência da Shopify. Use contraste legível e uma cor suave de fundo, se desejar. O botão de status do pedido continua sendo o original. Se o novo título repetir a mensagem existente, reduza o texto antes de fazer qualquer exportação.

3. Crie somente esse bloco no Mailvex

Use uma conta com e-mail confirmado e limites disponíveis para criar e exportar. Em Modelos, escolha Criar modelo, selecione Simples e Sem manual de marca, preencha Nome com shopify-intro-pt-v01 e escolha Criar. Esse projeto pode vir com blocos iniciais: ele não deve ser tratado como uma tela necessariamente vazia.

• No novo projeto, use Excluir bloco para retirar os blocos iniciais. Isso se aplica apenas ao projeto separado do Mailvex, não ao template da Shopify.
• Abra Blocos e adicione exatamente um Título + texto. Preencha os campos Título e Texto com a introdução escolhida.
• Defina Arial, Tamanho do título (px) em 22, corpo de 16 px e espaçamento interno de 16 px. Mantenha alinhamento à esquerda.
• Em Visibilidade, deixe Ocultar no mobile e Ocultar no desktop desligados. Em Condição de exibição (ESP), desligue Mostrar por condição.
• Não acrescente imagens, botões, fontes próprias, regras móveis ou um tratamento especial de modo escuro nesta primeira adaptação.

Salve esse projeto como fonte editável do bloco. Mantenha o código original da loja fora desse editor: importar a notificação inteira e reexportá-la não é o procedimento usado aqui.

4. Exporte uma vez e extraia a tabela completa

Abra Exportar HTML. Em Formato de variáveis (ESP), mantenha mailvex e use Baixar HTML. Não existe um perfil Shopify nesse caminho; a opção escolhida não valida Liquid. Copiar HTML é uma alternativa, não uma segunda exportação obrigatória. Confira a cota antes de repetir.

Abra o arquivo como código em um editor de texto. Procure o título exclusivo da introdução. Localize a tabela de apresentação mais próxima que envolve esse título e seu parágrafo. Neste exemplo exato, com um único Título + texto simples, o bloco não contém outra tabela dentro dele.

• Selecione desde a abertura da tabela desse bloco até seu fechamento correspondente, incluindo a célula, o título e o parágrafo.
• Preserve os estilos inline do fragmento. Não copie o documento inteiro, head, body, preheader ou o contêiner externo do e-mail.
• Não leve a folha de estilos global do Mailvex para a Shopify. O exemplo usa uma estrutura simples com os estilos básicos no próprio bloco.
• Salve o HTML completo original e o fragmento extraído em arquivos separados. Se não conseguir identificar os limites, peça revisão de um profissional de HTML antes de continuar.

Este exemplo mostra a estrutura produzida localmente pelo renderizador de um bloco, com o texto adaptado. Não é uma exportação de conta nem um teste na Shopify. Use sua exportação real e preserve a assinatura obrigatória quando aplicável; os identificadores do bloco podem variar.

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#F5F8FE" style="background:#F5F8FE" class="fr-block frb_stage10-static-intro"><tr><td style="padding:16px 16px 16px 16px"><h1 class="mob_font_sm" style="margin:0 0 12px 0;font-family:'Arial', Arial, sans-serif;font-size:22px;font-weight:700;color:#2563EB;line-height:1.2;text-align:left">Obrigado por escolher a Casa Cedro</h1><p style="margin:0;font-family:'Arial', Arial, sans-serif;font-size:16px;font-weight:normal;line-height:1.6;color:#2D3436;text-align:left">As informações do seu pedido aparecem abaixo. Consulte os detalhes desta mensagem para acompanhar o atendimento.</p></td></tr></table>

Confira a assinatura exigida pelo plano no arquivo realmente exportado. Quando ela existe, pode estar em uma tabela separada, fora da introdução. Preserve essa tabela completa junto com o material inserido; extrair apenas o bloco visual não autoriza descartar a assinatura obrigatória. A prévia sozinha não determina essa condição.

Esse recorte não se aplica automaticamente a qualquer design. Blocos com imagens, colunas ou estilos especiais podem depender de outras partes do documento. Não amplie a seleção para o body inteiro para tentar corrigir um fragmento cuja estrutura você não compreendeu.

5. Encontre um ponto de inserção compatível

Na cópia do template da Shopify, procure exatamente esta linha:

<p>{{ email_body }}</p>

Continue apenas se houver uma ocorrência e ela estiver na célula HTML visível esperada, com o contexto compreendido. Não insira dentro do parágrafo, de um capture, de um loop ou de uma condição Liquid aberta. A existência dessa linha não autoriza escolher qualquer ponto próximo sem conferir a estrutura.

Se a linha não existir, aparecer mais de uma vez ou estiver em uma personalização desconhecida, interrompa a inserção e peça ao responsável pelo template para localizar a célula correta. Não crie a linha, não use o primeiro fechamento de tabela encontrado e não substitua todo o conteúdo para encaixar o exemplo.

Insira a tabela completa da introdução imediatamente antes da linha, mantendo-a e todo o código seguinte. Inclua também a tabela de assinatura obrigatória quando aplicável. Delimite apenas o material acrescentado com estes comentários de identificação:

<!-- MAILVEX-INTRO START -->

<!-- MAILVEX-INTRO END -->

O comentário START fica antes do novo material; END fica depois dele e antes do parágrafo original. Não envolva a lógica existente nesses marcadores. Eles ajudam a localizar a mudança no código-fonte, mas não substituem arquivos versionados nem precisam sobreviver no HTML recebido.

6. Compare o código completo antes de testar

Compare a versão alterada com o backup. Fora da região acrescentada, o conteúdo original deve permanecer igual. Preserve expressões, filtros, assignments, captures, if/else e loops, incluindo seus fechamentos. Não traduza nomes de variáveis nem troque cálculos por valores fixos.

Confira também o HTML ao redor do bloco: uma tabela incompleta pode afetar o restante mesmo quando o texto do Liquid não mudou. Linhas de itens, totais, descontos, impostos, endereços, informações de pagamento e entrega, ação de status e rodapé devem continuar presentes. Nenhum desses elementos será recriado pelo Mailvex.

Não adicione tags de campanhas de marketing para tentar preencher dados do pedido. A introdução não precisa de variáveis. Se um requisito depende do estado da compra, ele pertence à implementação da notificação e exige uma revisão diferente desta alteração visual.

7. Confira a mensagem, não apenas o novo título

Preserve Email subject; edite Email body (HTML). Preview: alterações não salvas. Send test email: administrador conectado. Se correto, feche; Save.

Use uma conta administrativa cuja caixa possa ser conferida pelo operador autorizado. A mensagem de teste precisa mostrar a confirmação inteira, não apenas uma captura do novo bloco. Esta orientação não relata uma execução real realizada por nossa equipe.

A amostra visual não cobre todos os cenários. Registre quais situações a loja realmente usa: vários itens, descontos, pagamento pendente ou concluído, entrega, retirada ou pedidos sem envio. Compare as situações disponíveis com o comportamento anterior e marque as que ainda não foram verificadas.

Quando for necessário validar o evento completo, o operador autorizado pode usar um pedido controlado em um ambiente de testes já preparado. Este guia não pede ativar modo de teste em pagamentos de produção, trocar gateways, comprar etiquetas ou fazer uma compra real para verificar um título.

Problemas comuns e recuperação

Para recuperar a personalização anterior, restaure o assunto e o corpo salvos da própria loja. A opção Default não é o seu backup. Confira novamente a notificação restaurada e guarde a versão que falhou para comparação, sem acumular novas mudanças sobre um resultado desconhecido.

Mantenha a alteração pequena e identificável

Registre projeto Mailvex, fragmento, assinatura aplicável, versão do template Shopify, data e responsável pela validação. Uma edição no Mailvex não atualiza automaticamente o código da loja. Exporte de novo quando necessário, substitua somente a região identificada e repita a comparação e os testes.

Se a Shopify ou outro desenvolvedor atualizar a notificação, não cole a introdução antiga sem revisar a nova estrutura. O mesmo vale para uma mudança de idioma ou de operação da loja. A manutenção fica mais clara quando existe um dono do template e um registro das situações efetivamente verificadas.