Plantillas de correo electrónico de PrestaShop: personalizar las confirmaciones de pedido

Cómo funcionan las plantillas de correo electrónico de PrestaShop

PrestaShop envía correos electrónicos transaccionales en cada momento clave del recorrido del cliente: creación de cuenta, confirmación de pedido, notificación de envío, restablecimiento de contraseña y mucho más. Estos correos electrónicos se generan a partir de archivos de plantilla almacenados en su servidor y son completamente personalizables. Comprender cómo funciona el sistema de plantillas es el primer paso para crear correos electrónicos de confirmación de pedido profesionales y coherentes con la marca, que refuercen la identidad de su tienda.

Cada correo electrónico de PrestaShop consta de dos archivos de plantilla: una versión HTML para los clientes de correo que soportan formato enriquecido, y una versión de texto plano (TXT) para los clientes de correo que no lo soportan. Ambos archivos deben existir para que un correo electrónico se envíe correctamente. La versión HTML es la que verá la gran mayoría de sus clientes. La versión TXT sirve como alternativa y también es utilizada por herramientas de accesibilidad y algunos filtros de correo corporativo.

Las plantillas de correo electrónico se encuentran en la estructura de directorios mails/. La ubicación exacta depende de si está utilizando correos electrónicos del núcleo, correos electrónicos sobrescritos por el tema o correos electrónicos específicos de un módulo. Comprender esta jerarquía es esencial, ya que PrestaShop comprueba múltiples ubicaciones para cada plantilla y utiliza la primera que encuentra.

La estructura de directorios de las plantillas de correo electrónico

PrestaShop organiza las plantillas de correo electrónico en una jerarquía de directorios específica. Cuando necesita enviar un correo electrónico, el sistema busca en estas ubicaciones en orden de prioridad:

Sobrescrituras a nivel de tema (Prioridad más alta)

Las plantillas en /themes/su-tema/mails/es/ (donde es es el código ISO del idioma) tienen prioridad sobre todas las demás ubicaciones. Si desea personalizar una plantilla de correo electrónico sin modificar los archivos del núcleo, es aquí donde deben colocarse sus plantillas personalizadas. Este enfoque sobrevive a las actualizaciones de PrestaShop, ya que los archivos del tema no se sobrescriben durante las actualizaciones del núcleo.

Plantillas del núcleo (Predeterminadas)

Las plantillas predeterminadas se encuentran en /mails/es/ en el directorio raíz de su PrestaShop. Estas son las plantillas que se envían con PrestaShop y se utilizan cuando no existe ninguna sobrescritura del tema. Editar estos archivos directamente funciona, pero no se recomienda porque sus cambios se perderán cuando actualice PrestaShop.

Plantillas específicas de módulos

Los módulos que envían sus propios correos electrónicos almacenan las plantillas en /modules/nombre-modulo/mails/es/. Por ejemplo, los correos electrónicos de notificación de pedido enviados por los módulos de pago del núcleo se almacenan en sus respectivos directorios de módulos. Puede sobrescribirlos colocando copias modificadas en el directorio mails/ de su tema con el mismo nombre de archivo.

Subdirectorios de idiomas

Cada directorio mails/ contiene subdirectorios para cada idioma instalado, utilizando el código ISO del idioma: en para inglés, fr para francés, de para alemán, y así sucesivamente. Cuando PrestaShop envía un correo electrónico, utiliza la plantilla del directorio que coincide con la preferencia de idioma del cliente. Si una plantilla no existe en el idioma del cliente, PrestaShop recurre al idioma predeterminado.

Anatomía de una plantilla de confirmación de pedido

El correo electrónico de confirmación de pedido es el correo electrónico transaccional más importante que envía su tienda. Es el archivo denominado order_conf.html (y su compañero order_conf.txt) en su directorio mails. Examinemos su estructura en detalle.

Estructura de la plantilla HTML

Las plantillas de correo electrónico de PrestaShop son documentos HTML independientes. No utilizan archivos CSS externos porque la mayoría de los clientes de correo eliminan las hojas de estilo externas. Todo el estilo debe ser CSS en línea. Una plantilla típica de confirmación de pedido incluye estas secciones:

El documento comienza con un doctype HTML estándar y una sección head. El cuerpo contiene un diseño basado en tablas (porque los clientes de correo tienen un soporte deficiente para los métodos de diseño CSS modernos como flexbox y grid). Dentro de este diseño, encontrará una sección de encabezado con el logotipo de su tienda, el área de contenido principal con los detalles del pedido, una tabla de productos que lista cada artículo pedido, un resumen de precios con subtotales y totales, información de envío, detalles del método de pago y un pie de página con la información de contacto de la tienda y los avisos legales.

El sistema de variables

PrestaShop utiliza un sistema simple de sustitución de variables en las plantillas de correo electrónico. Las variables se encierran entre llaves: {nombre_variable}. Cuando se genera el correo electrónico, PrestaShop reemplaza cada variable con su valor real. La plantilla de confirmación de pedido utiliza estas variables clave:

{firstname} y {lastname} contienen el nombre del cliente. {order_name} es el número de referencia del pedido (como ABCDEF123). {shop_name} es el nombre de su tienda tal como está configurado en el back office. {shop_url} es la URL de su tienda. {shop_logo} es la ruta a la imagen del logotipo de su tienda. {date} es la fecha del pedido. {payment} es el método de pago utilizado. {total_paid} es el importe total pagado. {delivery_company} y {delivery_address} contienen la información del transportista y la dirección de envío.

Para la lista de productos, PrestaShop utiliza una sintaxis de bloque especial. La sección de artículos de productos está envuelta en un bucle que se repite para cada producto del pedido: {items} contiene el HTML preformateado para toda la tabla de la lista de productos, incluyendo nombres de productos, cantidades, precios y cualquier detalle de personalización.

Referencia de variables disponibles

Para ver todas las variables disponibles para una plantilla de correo electrónico específica, consulte el código PHP que envía el correo electrónico. Para la confirmación de pedido, compruebe la clase PaymentModule (en /classes/PaymentModule.php). El método validateOrder() construye el array de variables de la plantilla. Cada clave del array corresponde a un nombre de variable que puede usar en la plantilla.

Las variables comúnmente disponibles en los correos electrónicos de confirmación de pedido incluyen: {id_order}, {order_name}, {delivery_block_txt}, {invoice_block_txt}, {delivery_block_html}, {invoice_block_html}, {delivery_company}, {delivery_firstname}, {delivery_lastname}, {delivery_address1}, {delivery_address2}, {delivery_city}, {delivery_postal_code}, {delivery_country}, {delivery_phone}, {invoice_company}, {invoice_firstname}, {invoice_lastname}, {invoice_address1}, {invoice_address2}, {invoice_city}, {invoice_postal_code}, {invoice_country}, {invoice_phone}, {message} y {total_products}.

Personalizar la plantilla de confirmación de pedido

Paso 1: Crear una sobrescritura del tema

Nunca edite directamente los archivos de plantilla del núcleo. En su lugar, copie la plantilla al directorio mails de su tema:

Copie /mails/es/order_conf.html a /themes/su-tema/mails/es/order_conf.html. Haga lo mismo para order_conf.txt. Si el directorio mails/es/ no existe en su tema, créelo.

Si su tienda admite varios idiomas, copie las plantillas para cada directorio de idioma. Su confirmación de pedido en francés va en /themes/su-tema/mails/fr/order_conf.html y así sucesivamente.

Paso 2: Modificar el diseño HTML

Abra la plantilla HTML en un editor de texto (no en un editor visual que pueda añadir código no deseado). El HTML de correo electrónico difiere del HTML web en varios aspectos importantes:

Use tablas para el diseño, no divs. Los clientes de correo, especialmente Outlook, tienen un soporte CSS muy limitado. Un diseño de tres columnas debe usar un <table> con tres elementos <td>, no columnas CSS ni flexbox.

Use estilos en línea en cada elemento. En lugar de <p class="heading"> con una hoja de estilos separada, use <p style="font-size:18px; font-weight:bold; color:#333333;">. Cada elemento con estilo necesita su propio atributo de estilo en línea.

Establezca anchos explícitos en tablas y celdas. Los clientes de correo no siempre respetan los anchos porcentuales. Use un ancho fijo para su tabla de contenido principal (600 píxeles es el estándar) con columnas internas porcentuales.

Use fuentes web seguras. No todos los clientes de correo soportan fuentes personalizadas. Utilice Arial, Helvetica, Georgia, Times New Roman, Verdana o Trebuchet MS. Puede intentar cargar una fuente personalizada como alternativa, pero siempre especifique una fuente web segura como alternativa final.

Paso 3: Añadir su branding

Reemplace el encabezado predeterminado de PrestaShop con el branding de su tienda. Esto típicamente implica actualizar el logotipo (la variable {shop_logo} utiliza automáticamente el logotipo de su tienda, pero puede querer una versión específica para correos electrónicos), cambiar el color de fondo del encabezado para que coincida con su marca, añadir la paleta de colores de su marca a los encabezados y enlaces, e incluir el eslogan de su tienda o un breve mensaje de marketing.

Mantenga la estructura general simple. Los diseños de correo electrónico excesivamente complejos se rompen en diferentes clientes de correo. Un diseño limpio de una sola columna con los colores y el logotipo de su marca es más efectivo y más fiable que un elaborado diseño de múltiples columnas.

Paso 4: Personalizar la tabla de productos

La tabla de productos predeterminada en la confirmación de pedido de PrestaShop es funcional pero básica. Puede mejorarla añadiendo imágenes de productos (use URLs absolutas a imágenes alojadas en su servidor, no rutas relativas), añadiendo enlaces a las páginas de productos para que los clientes puedan reordenar fácilmente o dejar reseñas, añadiendo campos personalizados como fechas de entrega estimadas o mensajes personalizados, y ajustando el estilo de la tabla para que coincida con su marca.

Al añadir imágenes de productos, manténgalas pequeñas (de 50 a 80 píxeles de ancho) y siempre incluya un atributo alt. Algunos clientes de correo bloquean las imágenes por defecto, y el texto alternativo garantiza que los clientes puedan identificar sus productos de todos modos.

Añadir campos personalizados a los correos electrónicos de pedido

Las variables predeterminadas de PrestaShop cubren la información estándar del pedido, pero puede querer incluir datos adicionales como puntos de fidelidad ganados, fecha de entrega estimada, un mensaje de agradecimiento personalizado o recomendaciones de productos de venta cruzada.

Añadir variables mediante un módulo

La forma más limpia de añadir variables personalizadas es a través de un módulo que se enganche al proceso de envío de correos electrónicos. Cree un módulo que registre el hook actionEmailSendBefore (disponible a partir de PrestaShop 1.7.6) o el hook actionGetExtraMailTemplateVars. En su manejador del hook, añada sus variables personalizadas al array de variables de la plantilla:

Su función de hook recibe el array de variables de la plantilla por referencia. Puede añadir nuevas variables a este array, y estarán disponibles en la plantilla usando la sintaxis estándar {nombre_variable}. Por ejemplo, después de añadir loyalty_points al array en su hook, puede usar {loyalty_points} en su plantilla HTML de confirmación de pedido.

Usar datos existentes de la base de datos

Puede incorporar cualquier dato de su base de datos PrestaShop en las variables de correo electrónico. Ejemplos comunes incluyen el recuento total de pedidos del cliente (para mostrar "¡Gracias por tu 5.° pedido!"), el saldo de puntos de fidelidad del cliente, campos de producto personalizados almacenados en características o atributos de productos, e información del almacén o proveedor para los productos pedidos.

Configuración de correos electrónicos multilingües

Si su tienda atiende a clientes en múltiples idiomas, cada plantilla de correo electrónico necesita una versión para cada idioma. PrestaShop gestiona la selección del idioma automáticamente basándose en la preferencia de idioma del cliente, pero usted debe proporcionar las plantillas.

Crear plantillas específicas para cada idioma

Para cada idioma que soporte su tienda, cree un directorio en la carpeta mails de su tema: /themes/su-tema/mails/en/, /themes/su-tema/mails/fr/, /themes/su-tema/mails/de/, y así sucesivamente. Copie y traduzca cada archivo de plantilla en el directorio apropiado.

No use traducción automática para correos electrónicos transaccionales. Estos correos representan la comunicación de su tienda con los clientes, y las traducciones deficientes dañan la confianza. Haga que cada versión de idioma sea escrita o revisada por un hablante nativo.

Soporte para idiomas de derecha a izquierda

Si soporta idiomas como el árabe o el hebreo, sus plantillas de correo electrónico necesitan soporte de diseño RTL (de derecha a izquierda). Añada dir="rtl" al elemento de tabla principal y ajuste la alineación del texto y el relleno en sus estilos en línea. Cree plantillas separadas para los idiomas RTL en lugar de intentar hacer que una sola plantilla funcione para ambas direcciones.

Formato de fechas y monedas

PrestaShop formatea automáticamente los valores de fechas y monedas según la configuración de idioma y moneda del cliente. Los valores {date}, {total_paid} y otros valores formateados ya reflejan la configuración regional correcta. Sin embargo, si añade variables personalizadas con valores de fecha o moneda, asegúrese de formatearlos correctamente para el idioma de destino.

Configuración SMTP para una entrega fiable

La mejor plantilla de correo electrónico del mundo es inútil si sus correos electrónicos no llegan a la bandeja de entrada. La configuración de correo electrónico predeterminada de PrestaShop utiliza la función mail() integrada de PHP, que no es fiable para correos electrónicos transaccionales. La mayoría de estos correos terminan en la carpeta de spam o son rechazados por completo por los proveedores de correo modernos.

Por qué importa el SMTP

El SMTP (Simple Mail Transfer Protocol) con autenticación adecuada es esencial para la entregabilidad del correo electrónico. Cuando envía correos electrónicos a través de la función mail() de PHP, el correo proviene de la dirección IP de su servidor web sin ninguna autenticación. Los proveedores de correo como Gmail, Outlook y Yahoo ven esto como una señal de alarma y frecuentemente clasifican estos correos como spam.

Con SMTP, sus correos electrónicos se envían a través de un servidor de correo autenticado con registros SPF, DKIM y DMARC adecuados. Esto demuestra a los servidores de correo receptores que el correo electrónico es legítimo y está autorizado por su dominio.

Configurar SMTP en PrestaShop

Vaya a Parámetros avanzados > Correo electrónico en su back office de PrestaShop. Cambie el método de "Usar la función mail() de PHP" a "Establecer mis propios parámetros SMTP". Introduzca los detalles de su servidor SMTP: la dirección del servidor, el puerto (típicamente 587 para TLS o 465 para SSL), el tipo de cifrado, el nombre de usuario y la contraseña.

Los proveedores SMTP comunes para PrestaShop incluyen Gmail SMTP (smtp.gmail.com, puerto 587, TLS, requiere una contraseña de aplicación si la 2FA está habilitada), Amazon SES (económico para grandes volúmenes), SendGrid (generoso nivel gratuito), Mailgun (amigable para desarrolladores con buena gestión de registros) y el servidor SMTP de su proveedor de hosting (consulte con su host para conocer la configuración).

Probar la configuración SMTP

Después de configurar el SMTP, use el botón "Enviar un correo electrónico de prueba" en la parte inferior de la página de configuración de correo electrónico. Introduzca su propia dirección de correo electrónico y compruebe que el correo de prueba llega a su bandeja de entrada (no al spam). Si el correo de prueba falla, verifique sus credenciales SMTP, asegúrese de que su servidor puede acceder al servidor SMTP en el puerto configurado (algunos proveedores de hosting bloquean los puertos salientes 25 y 587) y compruebe si su proveedor SMTP requiere configuraciones de seguridad específicas.

Registros SPF, DKIM y DMARC

Para la máxima entregabilidad, configure estos registros DNS para su dominio. SPF (Sender Policy Framework) especifica qué servidores están autorizados para enviar correos electrónicos en nombre de su dominio. DKIM (DomainKeys Identified Mail) añade una firma digital a sus correos electrónicos que demuestra que fueron enviados por su dominio. DMARC (Domain-based Message Authentication, Reporting, and Conformance) indica a los servidores receptores qué hacer con los correos electrónicos que no superan las comprobaciones SPF o DKIM.

Su proveedor SMTP le proporcionará los registros DNS específicos que debe añadir. Por ejemplo, si utiliza SendGrid, proporcionan registros SPF y DKIM durante el proceso de autenticación del dominio. Añádalos como registros TXT en la configuración DNS de su dominio.

Probar las plantillas de correo electrónico

Enviar correos electrónicos de prueba

PrestaShop no tiene una forma integrada de previsualizar plantillas de correo electrónico específicas. Para probar su plantilla de confirmación de pedido, necesita realizar un pedido de prueba real. Cree una cuenta de cliente de prueba, añada productos al carrito y complete el proceso de compra con un método de pago de prueba. Si tiene un módulo de pago en modo sandbox configurado, utilícelo. De lo contrario, los métodos de pago por transferencia bancaria o cheque le permiten completar un pedido sin procesamiento de pago real.

Pruebas en diferentes clientes de correo

El renderizado de correos electrónicos varía drásticamente entre los clientes de correo. Lo que se ve perfecto en Gmail puede estar roto en Outlook. Como mínimo, pruebe sus plantillas en Gmail (web), Outlook (escritorio y web), Apple Mail, Yahoo Mail y al menos una aplicación de correo móvil. Servicios como Litmus o Email on Acid automatizan estas pruebas renderizando su correo electrónico en docenas de clientes de correo simultáneamente, pero son servicios de pago.

Problemas de renderizado comunes

Si su correo electrónico se ve roto en Outlook, es casi con toda seguridad un problema de CSS. Outlook utiliza el motor de renderizado de Microsoft Word para los correos HTML, que tiene un soporte CSS extremadamente limitado. No soporta imágenes de fondo en las celdas de tabla (use colores de fondo en su lugar), padding en elementos de bloque (use padding de celdas de tabla), max-width (use anchos fijos), margin para centrar (use align="center" en tablas) ni floats CSS.

Para la responsividad móvil, envuelva su tabla de contenido en un contenedor con max-width:600px y añada una media query en el bloque de estilo del head (que algunos clientes de correo soportan) que establezca los anchos de tabla al 100% en pantallas pequeñas. Esto no es un diseño responsive perfecto, pero evita el desplazamiento horizontal en la mayoría de los dispositivos móviles.

Problemas comunes y resolución

Imágenes que faltan en los correos electrónicos

Este es el problema más común de las plantillas de correo electrónico. Las imágenes en los correos electrónicos deben usar URLs absolutas (que comiencen con https://), no rutas relativas. Si su plantilla hace referencia a /img/logo.png, cámbielo a https://www.sudominio.com/img/logo.png. La variable {shop_logo} genera automáticamente una URL absoluta, pero todas las imágenes que añada manualmente deben usar URLs completas.

Verifique también que sus imágenes sean accesibles desde fuera de su red. Si su tienda está detrás de un firewall o autenticación HTTP, los clientes de correo no pueden cargar las imágenes. Pruebe abriendo la URL de la imagen en una ventana de navegador privada/incógnita.

Diseño roto después de la edición

El HTML de correo electrónico es frágil. Una sola etiqueta sin cerrar o una celda de tabla faltante puede romper todo el diseño. Siempre valide su HTML después de editarlo. Cuente sus etiquetas de apertura y cierre de table, tr y td. Cada <table> necesita un </table>, cada <tr> necesita un </tr> y cada <td> necesita un </td>. Compruebe que cada fila en una tabla tenga el mismo número de celdas (o use colspan para compensar la diferencia).

Variables que no se reemplazan

Si ve el texto literal {nombre_variable} en sus correos electrónicos enviados en lugar de los valores reales, compruebe el nombre de la variable en busca de errores tipográficos. Los nombres de las variables distinguen entre mayúsculas y minúsculas. Verifique también que la variable exista para el tipo específico de correo electrónico que está personalizando. No todas las variables están disponibles en todas las plantillas de correo electrónico. Las variables específicas del pedido como {order_name} solo están disponibles en los correos electrónicos relacionados con pedidos.

Los correos electrónicos no se envían en absoluto

Si los correos electrónicos no se envían, compruebe el back office de PrestaShop en Parámetros avanzados > Correo electrónico. Allí puede ver un registro de los correos electrónicos enviados. Si el registro muestra fallos, compruebe su configuración SMTP. Si no aparecen correos electrónicos en el registro, es posible que el correo electrónico no se esté activando en absoluto. Verifique que las transiciones de estado de pedido estén configuradas para enviar correos electrónicos al cliente (Pedidos > Estados > editar estado > marcar "Enviar un correo electrónico al cliente").

Compruebe también el registro de errores PHP de su servidor en busca de errores relacionados con el correo electrónico. Los problemas comunes incluyen la función mail() de PHP deshabilitada por el proveedor de hosting, fallos de autenticación SMTP debido a contraseñas cambiadas y problemas de conectividad de red entre su servidor y el servidor SMTP.

Los correos electrónicos van al spam

Incluso con una configuración SMTP correcta, los correos electrónicos pueden seguir llegando al spam. Las razones más comunes son registros SPF/DKIM/DMARC faltantes o incorrectos, contenido de correo electrónico que activa los filtros de spam (uso excesivo de mayúsculas, palabras que activan el spam como "gratis" o "actúe ahora", demasiadas imágenes con poco texto), envío desde una dirección IP con mala reputación (común con el hosting compartido) y la dirección de correo electrónico "de" cuyo dominio no coincide con el dominio del servidor SMTP.

Corrija primero los registros DNS y luego revise el contenido de sus correos electrónicos. Use una herramienta como mail-tester.com para analizar sus correos electrónicos en busca de activadores de spam. Envíe un correo de prueba a la dirección que proporcionan y recibirá un informe detallado que muestra qué podría causar la clasificación como spam.

Sobrescrituras de correo electrónico específicas del tema

Algunos temas de PrestaShop incluyen sus propias plantillas de correo electrónico que coinciden con el diseño del tema. Si su tema tiene plantillas en /themes/su-tema/mails/, estas sobrescriben automáticamente las plantillas del núcleo.

Comprobar las plantillas de correo electrónico del tema

Busque en el directorio de su tema activo una carpeta mails. Si existe, el tema proporciona plantillas de correo electrónico personalizadas. Estas plantillas suelen coincidir con la paleta de colores y el diseño del encabezado/pie de página del tema, dando a sus correos electrónicos coherencia visual con su escaparate.

Personalizar las plantillas de correo electrónico del tema

Si su tema proporciona plantillas de correo electrónico, edite esas en lugar de copiar del directorio mails/ del núcleo. Las plantillas del tema pueden usar una estructura HTML diferente o incluir CSS adicional específico del sistema de diseño del tema. Partir de la versión del tema garantiza la coherencia visual.

Mantener las plantillas sincronizadas con las actualizaciones del tema

Cuando actualice su tema, compruebe si la actualización incluye cambios en las plantillas de correo electrónico. Si es así, sus personalizaciones podrían sobrescribirse. Antes de actualizar, haga una copia de seguridad de sus plantillas personalizadas. Después de actualizar, compare las nuevas plantillas con sus copias de seguridad y vuelva a aplicar sus personalizaciones a las versiones actualizadas. Esto es tedioso pero necesario para mantener tanto sus personalizaciones como las posibles mejoras o correcciones que el desarrollador del tema haya realizado.

Mejores prácticas para correos electrónicos de confirmación de pedido

Un correo electrónico de confirmación de pedido bien elaborado hace más que confirmar la transacción. Genera confianza, reduce las consultas de soporte y crea oportunidades de fidelización.

Incluya un número de referencia de pedido claro y destacado en la parte superior. Los clientes necesitan este número cuando contactan con soporte o hacen seguimiento de su pedido. Liste cada producto con su nombre, cantidad, precio y todas las opciones o personalizaciones. Incluya el desglose completo de subtotal, costos de envío, impuestos, descuentos y total. Muestre la dirección de entrega para que los clientes puedan verificarla y contactarle inmediatamente si es incorrecta. Indique el método de pago utilizado y cualquier detalle de transacción relevante. Proporcione un enlace a la página de seguimiento del pedido o al historial de pedidos del cliente en su cuenta. Añada su información de contacto de servicio al cliente para que los clientes sepan cómo comunicarse con usted si algo no está bien.

Mantenga el diseño limpio y adaptado a dispositivos móviles. Más de la mitad de todos los correos electrónicos se leen en dispositivos móviles. Use un diseño de una sola columna, texto grande y legible (mínimo 14px para el texto del cuerpo) y botones con objetivos táctiles adecuados (mínimo 44px de altura). Su correo electrónico de confirmación de pedido es un reflejo de la profesionalidad de su tienda. Invierta el tiempo necesario para hacerlo bien.