Problemas al personalizar plantillas de email del tema Classic

miguel_deco50

¡Hola a todos!

Estoy intentando personalizar las plantillas de correo electrónico transaccional en mi tienda PrestaShop. Específicamente, quiero cambiar el logo del encabezado, ajustar los colores de la marca y hacer algunas modificaciones menores en el HTML de mails/themes/classic/header.html y otros. El problema es que cada vez que se regeneran los emails (por ejemplo, al añadir un nuevo idioma), mis cambios se sobrescriben por completo, y tengo que rehacerlos.

Además, he notado que algunos estilos que intento aplicar (como flexbox o grid) no se muestran correctamente en clientes de correo como Outlook o Gmail, lo cual es frustrante.

Aquí tenéis un fragmento de lo que intenté en header.html para cambiar el color de fondo y el logo:

<td align="center" style="background-color:#222222; padding: 20px 0 30px 0;">
    <a href="{$shop_url}" title="{$shop_name}" target="_blank">
        <img src="https://mi-tienda.com/img/nuevo-logo.png" alt="{$shop_name}" style="width:180px; height:auto;" />
    </a>
</td>

¿Hay alguna forma correcta de hacer esto sin que se pierdan los cambios? ¿Y cómo puedo asegurarme de que los estilos se vean bien en todos los clientes de correo?

javieradmin

Buenas @miguel_deco50,

Entiendo perfectamente tu frustración. Eso de que se sobrescriban los cambios es un clásico en PrestaShop si no se hace de la forma adecuada. ¿En qué versión de PrestaShop estás exactamente? Esto es importante porque hay pequeñas diferencias en cómo se gestionan los temas de email.

Lo que te pasa con mails/themes/classic/header.html es normal. Si editas directamente esos archivos y luego, por ejemplo, vas a Diseño > Tema de email y le das a regenerar plantillas para un idioma, tus cambios se van al traste. PrestaShop coge los archivos originales. Para el logo, ¿has probado a cambiarlo directamente desde el Back Office en Diseño > Tema de email > Tu tema actual > Modificar? Ahí hay una opción para subir el logo del email, que es la forma más segura para que no se pierda.

hectormadrid57

@javieradmin tiene razón, el BO es clave para el logo. Y sobre lo de los estilos, @miguel_deco50, lo de flexbox y grid en los emails es una batalla perdida, créeme. Los clientes de correo son muy arcaicos en su renderizado de CSS.

Tenemos que pensar en los emails como si estuviéramos en la época de HTML 4.01. Eso significa tablas anidadas para el layout, CSS inline para casi todo y propiedades muy básicas. Olvídate de los selectores CSS avanzados o de cualquier cosa que no sea background-color, padding, font-size, color y poco más. Es muy limitado, pero es la única manera de asegurar una consistencia mínima en la mayoría de los clientes de correo.

Milo

Hola @miguel_deco50,

Los compañeros @javieradmin y @hectormadrid57 han dado en el clavo con los principales puntos. Confirmo que estás en PrestaShop 1.7.8.2, donde la gestión de plantillas de email sigue un patrón clásico.

Logo del encabezado: Nunca debes hardcodear la URL de la imagen del logo como has intentado (https://mi-tienda.com/img/nuevo-logo.png). La forma correcta y segura es ir a Diseño > Tema de email en tu Back Office, seleccionar el tema classic, hacer clic en 'Modificar' y ahí tendrás la opción para subir la imagen de tu logo para los emails. PrestaShop gestionará la URL y los atributos de forma dinámica con la variable {$shop_logo}.
Cambios sobrescritos en mails/themes/classic: Este es el problema principal. La carpeta mails/themes/classic contiene las plantillas por defecto. Cuando PrestaShop necesita regenerar estas plantillas (por ejemplo, al instalar un nuevo idioma, o a veces después de una actualización importante), las recrea desde su origen, borrando cualquier modificación manual que hayas hecho. Para evitar esto, la solución recomendada es crear un nuevo tema de email.

Puedes hacer esto directamente desde Diseño > Tema de email. Ahí verás una opción para 'Crear nuevo tema de email' o 'Duplicar tema'. Duplica el tema classic y dale un nombre, por ejemplo, mi_tema_personalizado. Una vez creado, actívalo. Ahora, todas tus modificaciones deberías hacerlas en mails/themes/mi_tema_personalizado/.
Problemas de renderizado CSS: Como bien dice @hectormadrid57, los clientes de correo son muy restrictivos. Debes usar estilos CSS inline y basarte en tablas para la estructura. Evita flexbox, grid, position: absolute, float, @media queries complejas, y los link a hojas de estilo externas.

Aquí te dejo un snippet modificado para tu header.html (que deberías aplicar en mails/themes/mi_tema_personalizado/header.html una vez que hayas duplicado el tema) que usa estilos inline y las variables correctas de Smarty:

<td align="center" style="padding: 25px 0 35px 0; background-color:#F5F5F5;">
    <a href="{$shop_url}" title="{$shop_name}" target="_blank" style="display: inline-block;">
        <img src="{$shop_logo}" alt="{$shop_name}" width="{$logo_width}" height="{$logo_height}" style="max-width: 100%; height: auto; display: block; border: 0;" />
    </a>
</td>

He cambiado el background-color a un gris más claro (#F5F5F5), ajustado un poco el padding, y añadido algunos estilos inline básicos a la imagen (max-width: 100%; height: auto; display: block; border: 0;) para asegurar una mejor visualización en diferentes clientes de email y dispositivos. Además, display: inline-block; en el enlace ayuda a centrarlo si el logo es más pequeño que el contenedor. Recuerda usar siempre la variable {$shop_logo}.

Espero que esto te ayude a mantener tus personalizaciones y a mejorar la visualización de tus emails.

miguel_deco50

¡Muchísimas gracias @Milo! ¡Y también a @javieradmin y @hectormadrid57 por las aclaraciones!

No había pensado en la opción de duplicar el tema de email desde el Back Office. Tiene todo el sentido para que no se pierdan los cambios. Y lo del logo directamente en Diseño > Tema de email es mucho más limpio que hardcodearlo.

He aplicado el snippet que me has dado en mi nuevo tema de email mi_tema_personalizado y los resultados son geniales. Los estilos se ven mucho mejor en Outlook y Gmail, y el color de fondo es justo lo que quería.

Ahora ya sé cómo manejar esto correctamente. ¡Problema resuelto!