Cómo personalizar la confirmación de pedido de Shopify sin sustituir Liquid

La confirmación de pedido ya contiene información que tu tienda necesita comunicar correctamente. Si quieres añadir una introducción con la identidad de la marca, puedes diseñar ese pequeño bloque en Mailvex e insertarlo en la notificación existente. El trabajo es una adaptación manual de HTML, con comparación del código y prueba del resultado.

Si el cambio consiste únicamente en logotipo y color, la personalización nativa de Shopify puede bastar. Esta guía cubre otro caso: un título y un párrafo con presentación propia. No sustituye toda la notificación, no reconstruye los datos del pedido ni instala una integración entre Mailvex y Shopify.

1. Conserva la versión actual de la tienda

Trabaja con una notificación que ya funcione y con permiso para editar su código. Abre Settings > Notifications > Customer notifications > Order processing > Order confirmation > Edit code. Antes de modificar contenido, guarda el asunto actual y todo el HTML en archivos locales separados.

Utiliza nombres reconocibles, como shopify-pedido-original-v01.html y shopify-pedido-asunto-v01.txt. Registra fecha y responsable. Crea una copia para el cambio y conserva el original. Si la tienda tiene personalizaciones anteriores, no intentes reconstruirlas a partir de un mensaje recibido.

Define también el punto de partida para comparar: qué aspecto y qué datos aparecían antes del cambio. Guarda una referencia de la versión actual. Tener un respaldo no valida el comportamiento de la plantilla, pero permite recuperar exactamente el código de la tienda si la adaptación presenta problemas.

2. Decide qué puede decir el nuevo bloque

La introducción será estática. No recibe nombre, artículos, precio, estado ni plazo del pedido. Deja esa información en el código existente. Un mensaje fijo sobre pago recibido, envío realizado o recogida disponible puede contradecir el escenario que presenta la propia notificación.

Ejemplo ficticio: sustituye Casa Cedro por el nombre real de la marca y revisa el texto junto a la introducción existente. Utiliza solo un título y un párrafo, sin nueva imagen, botón ni enlace de seguimiento.

Esta elección visual es un ejemplo, no un requisito de Shopify. Utiliza contraste legible y un fondo suave si lo necesitas. El botón de estado del pedido sigue siendo el original. Si el nuevo título repite el mensaje existente, reduce el texto antes de exportar.

3. Crea únicamente este bloque en Mailvex

Utiliza una cuenta con correo confirmado y límites disponibles para crear y exportar. En Plantillas, selecciona Crear plantilla, después Normal y Sin manual de marca, completa Nombre con shopify-intro-es-v01 y elige Crear. El proyecto puede incluir bloques iniciales: no debes asumir que se abrirá una pantalla vacía.

• En el proyecto nuevo, utiliza Eliminar bloque para quitar los bloques iniciales. Esto se aplica solo al proyecto independiente de Mailvex, no a la plantilla de Shopify.
• Abre Bloques y añade exactamente un Título + texto. Completa Título y Texto con la introducción elegida.
• Define Arial, Tamaño del título (px) en 22, cuerpo de 16 px y espacio interior de 16 px. Mantén la alineación izquierda.
• En Visibilidad, deja desactivados Ocultar en móvil y Ocultar en escritorio. En Condición de visibilidad (ESP), desactiva Mostrar según condición.
• No añadas imágenes, botones, fuentes propias, reglas móviles ni un diseño especial de modo oscuro en esta primera adaptación.

Guarda este proyecto como fuente editable del bloque. Mantén el código original de la tienda fuera del editor: importar la notificación completa y exportarla nuevamente no es el procedimiento utilizado aquí.

4. Exporta una vez y extrae la tabla completa

Abre Exportar HTML. En Formato de variables (ESP), mantén mailvex y utiliza Descargar HTML. No existe un perfil Shopify en esta ruta; la opción elegida no valida Liquid. Copiar HTML es una alternativa, no otra exportación obligatoria. Comprueba la cuota antes de repetir.

Abre el archivo como código en un editor de texto. Busca el título exclusivo de la introducción. Localiza la tabla de presentación más cercana que contiene ese título y su párrafo. En este ejemplo exacto, con un solo Título + texto sencillo, el bloque no contiene otra tabla en su interior.

• Selecciona desde la apertura de la tabla de ese bloque hasta su cierre correspondiente, incluidos celda, título y párrafo.
• Conserva los estilos inline del fragmento. No copies todo el documento, head, body, preheader ni el contenedor exterior del correo.
• No traslades la hoja de estilos global de Mailvex a Shopify. El ejemplo utiliza una estructura sencilla con estilos básicos en el propio bloque.
• Guarda por separado el HTML completo original y el fragmento extraído. Si no identificas los límites, solicita revisión de alguien con conocimientos de HTML antes de continuar.

Este ejemplo muestra la estructura producida localmente por el renderizador de un bloque, con el texto adaptado. No es una exportación de cuenta ni una prueba en Shopify. Utiliza tu exportación real y conserva la firma obligatoria cuando corresponda; los identificadores del bloque pueden 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">Gracias por elegir 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">Los datos de tu pedido aparecen a continuación. Revisa la información de esta notificación para seguir su estado.</p></td></tr></table>

Comprueba la firma exigida por el plan en el archivo realmente exportado. Cuando existe, puede estar en una tabla independiente, fuera de la introducción. Conserva esa tabla completa junto con el material insertado; extraer únicamente el bloque visual no autoriza a descartar la firma obligatoria. La vista previa por sí sola no determina esa condición.

Este recorte no se aplica automáticamente a cualquier diseño. Los bloques con imágenes, columnas o estilos especiales pueden depender de otras partes del documento. No amplíes la selección a todo body para intentar corregir un fragmento cuya estructura no comprendiste.

5. Encuentra un punto de inserción compatible

En la copia de la plantilla de Shopify, busca exactamente esta línea:

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

Continúa únicamente si aparece una vez y está en la celda HTML visible esperada, con el contexto comprendido. No insertes dentro del párrafo, de un capture, un bucle o una condición Liquid abierta. Encontrar esa línea no autoriza a elegir cualquier punto cercano sin revisar la estructura.

Si la línea no existe, aparece varias veces o forma parte de una personalización desconocida, detén la inserción y pide al responsable que localice la celda correcta. No crees la línea, no utilices el primer cierre de tabla ni sustituyas todo el contenido para encajar el ejemplo.

Inserta la tabla completa de la introducción inmediatamente antes de la línea, conservándola junto con todo el código siguiente. Incluye también la tabla de firma obligatoria cuando corresponda. Delimita únicamente el material añadido con estos comentarios de identificación:

<!-- MAILVEX-INTRO START -->

<!-- MAILVEX-INTRO END -->

El comentario START va antes del material nuevo; END va después y antes del párrafo original. No incluyas la lógica existente dentro de esos marcadores. Ayudan a localizar el cambio en el código fuente, pero no sustituyen los archivos versionados ni necesitan conservarse en el HTML recibido.

6. Compara todo el código antes de probar

Compara la versión modificada con el respaldo. Fuera de la región añadida, el contenido original debe permanecer igual. Conserva expresiones, filtros, asignaciones, captures, if/else y bucles con sus cierres. No traduzcas nombres de variables ni sustituyas cálculos por valores fijos.

Revisa también el HTML alrededor del bloque: una tabla incompleta puede afectar el resto aunque el texto de Liquid no haya cambiado. Artículos, totales, descuentos, impuestos, direcciones, información de pago y entrega, acción de estado y pie deben seguir presentes. Mailvex no recreará esos elementos.

No añadas etiquetas de campañas de marketing para intentar completar datos del pedido. La introducción no necesita variables. Si un requisito depende del estado de la compra, pertenece a la implementación de la notificación y exige una revisión diferente de este cambio visual.

7. Revisa el mensaje, además del nuevo título

Conserva Email subject; edita Email body (HTML). Preview: cambios sin guardar. Send test email: administrador conectado. Si está correcto, cierra; Save.

Utiliza una cuenta administrativa cuyo buzón pueda revisar el operador autorizado. El mensaje de prueba debe mostrar la confirmación completa, no únicamente una captura del bloque nuevo. Esta orientación no describe una ejecución real realizada por nuestro equipo.

La muestra visual no cubre todos los escenarios. Registra cuáles utiliza realmente la tienda: varios artículos, descuentos, pago pendiente o completado, entrega, recogida o pedidos sin envío. Compara las situaciones disponibles con el comportamiento anterior y marca las que todavía no se verificaron.

Cuando necesites validar el evento completo, el operador autorizado puede utilizar un pedido controlado en un entorno de pruebas ya preparado. Esta guía no pide activar pruebas en pagos de producción, cambiar pasarelas, comprar etiquetas de envío ni realizar una compra real para revisar un título.

Problemas frecuentes y recuperación

Para recuperar la personalización anterior, restaura el asunto y el cuerpo guardados de la propia tienda. Default no es tu respaldo. Comprueba de nuevo la notificación restaurada y conserva la versión que falló para comparar, sin acumular cambios sobre un resultado desconocido.

Mantén el cambio pequeño e identificable

Registra proyecto Mailvex, fragmento, firma aplicable, versión de la plantilla Shopify, fecha y responsable de validación. Editar Mailvex no actualiza automáticamente el código de la tienda. Exporta nuevamente cuando sea necesario, sustituye solo la región identificada y repite comparación y pruebas.

Si Shopify u otro desarrollador actualiza la notificación, no pegues la introducción anterior sin revisar la estructura nueva. Lo mismo ocurre al cambiar de idioma u operación. El mantenimiento resulta más claro cuando existe un responsable de la plantilla y un registro de las situaciones realmente verificadas.