Shopify rocas, pero no tiene una interfaz sexy para la configuración de correos electrónicos HTML (como MailChimp o AWeber). Para obtener notificaciones de correo electrónico de buen aspecto configurados en su tienda, dicen que necesita saber cómo codificar en HTML.... ¿O no?
En este artículo se tratan los fundamentos de la configuración de correos electrónicos HTML en Shopify.
Psst... Antes de empezar: ¿quieres ahorrar horas investigando, codificando y ajustando tus plantillas de Shopify email? 
Primero: ¿por qué molestarse en usar plantillas de correo electrónico HTML en Shopify?
Porque, en lugar de correos electrónicos de texto simples, sus clientes verán su marca, colores de fondo, logotipo y cualquier otra cosa que elija:
Correo electrónico de texto sin formato: el valor predeterminado de Shopify
HTML plantillas de correo electrónico: más sexy
¿Cómo habilito las plantillas de correo electrónico HTML?
1. crea tu plantilla colorida en MailChimp, AWeber u otro editor.
A menos que desee codificar su plantilla de correo electrónico HTML desde cero, sugeriría usar otro servicio para ayudarle. Aquí hay varios de los buenos:
- Mailchimp
- Aweber
- GraphicRiver también tiene algunas plantillas de correo electrónico HTML de bajo costo disponibles para la venta.
2. convierta su HTML en estilos en línea
Una vez que tenga su plantilla de correo electrónico HTML, no puede simplemente pegarla directamente en Shopify. ¿por qué? Porque los servicios web como gmail y hotmail utilizan inline HTML, no CSS, para renderizar sus emails. Las herramientas que usó (arriba) han incorporado inteligentemente CSS en su plantilla, para gobernar todos los estilos en sus correos electrónicos.
En pocas palabras: si utiliza reglas CSS normales para establecer los estilos en su correo electrónico, gmail y hotmail eliminarán sus estilos y mostrarán un correo electrónico de texto sin formato de nuevo.
To get around this, you need to use inline styles.
3. Habilite HTML en su tienda Shopify
Ve a tu panel de administración de Shopify > emails y notificaciones. Elija el correo electrónico que desea personalizar y, a continuación, pulse "habilitar plantilla HTML":
4. Agregue su contenido
A partir de ahí, necesitas jugar con el contenido que quieres mostrar. Si tienes un encabezado, usa "Ctrl + F" en la página de Shopify para encontrar tu encabezado y editarlo si es necesario. Lo mismo va para el contenido de su correo electrónico ("gracias por su pedido", etc.) y el pie de página (número de teléfono/correo electrónico).
5. Agregue el código de Shopify en su plantilla HTML
Esto es muy importante. No es bueno tener una plantilla de correo electrónico de buen aspecto si su código de Shopify no se pone allí para decirle al cliente lo que ordenó. Para ello, es necesario copiar el contenido de correo electrónico basado en texto desde el cuadro de arriba, y pegarlo en el lugar correcto en su plantilla de correo electrónico HTML, thusly:
6. Preview, test y Edit hasta que haya finalizado
Desde aquí, puedes previsualizar el correo electrónico, enviarte una versión de prueba y seguir ajustando hasta que estés contento con él.
A continuación, puede repetir para todos los correos electrónicos que desea personalizar (por ejemplo, Shopify proporciona correos electrónicos para notificación de pedido, confirmación de envío, nuevo pedido, etc.).
No olvide: Si desea un conjunto de plantillas hechas para usted que puede configurar en menos de 10 minutos, puede descargar nuestra plantilla haciendo clic en el botón de abajo.
Notas finales
- Para ser honesto, esto no es fácil. Lleva algún tiempo, pero vale la pena cuando tienes mensajes de correo electrónico de gran aspecto que salen a tus clientes.
- Tenga cuidado-no hay ' deshacer ': Guarde las versiones de su plantilla HTML con regularidad a medida que las actualice. Entonces, de nuevo. El sistema de plantillas de correo electrónico HTML de Shopify es solo un cuadro de texto: no hay ninguna función de autoguardado como MS Word o un botón de deshacer.
Buena suerte y feliz correo electrónico!
***
Gracias nuevamente por seguir nuestra Shopify Insider blog @ BlackbeltCommerce, tenemos muchas otras publicaciones valiosas que son informativas. Aquí están nuestras principales recomendaciones; Shortcodes For Shopify, HTML templates, 4 Social media tricks for your shopify store, All you need to know to start a new e-commerce storeY 4 días En. También podemos ayudarle con muchos otros servicios. Además, puede aprender todo sobre que son los expertos en Shopify en Blackbelt Commerce.
¿Preguntas? Háganos saber en los comentarios a continuación.
¿Cuáles son las principales tiendas de Shopify?
Toma lo que aprendimos y utilíla para tu ventaja.
Obtenga nuestra investigación exclusiva: Insights de más de 500 tiendas Shopify.
Esto es genial – ¡ muchas gracias! Pero estoy perdiendo el estilo de mis enlaces. ¿Cómo lo arreglaría? Lo siento, soy un diseñador no un programador 🙂
¡ Hola Christina! Me alegro de que estés progresando. Para establecer el estilo de los vínculos, debe incluirlos en las etiquetas HTML correspondientes. Por ejemplo:
To make a link bold, use : Your Link Text Goes Here
To make a link italic, use : Your Link Text Goes Here
Otros que podría utilizar: (to make your text black), (to make your text huge), and so on.
¡ Espero que ayude!
Tristan.
Hola Tristan
Gracias por el gran post. Soy realmente nuevo también todo esto y estoy tratando de utilizar una plantilla de correo electrónico Aweber como mi correo electrónico de confirmación de pedido de Shopify. He creado el correo electrónico utilizando la plantilla de correo electrónico, pero ahora no parece ser capaz de verlo como HTML. ¿Puedes decirme dónde estoy yendo mal?
Muchas gracias 🙂
¡ Hola Laura! Me alegro de que le gustó el post. Podría ser un poco complicado integrarlo con una plantilla AWeber, ya que creo que utilizan sus propios estilos de formato y hojas de estilo. ¿Qué es exactamente lo que no funciona correctamente? Por ejemplo, ¿no ve nada, o simplemente se ve fuera de línea?
Para verlo como HTML, haga clic en "vista previa HTML" o también podría intentar enviar un correo electrónico de prueba.
Salud, Tristan.
Hola Tristan,
Gracias por el artículo. No quería tener que usar el formato de correo electrónico sencillo de Shopify.
Estoy teniendo dificultades con el contenido de correo electrónico basado en texto para el envío, etc.
Se está colocando por encima de una frase, y me gustaría que debajo de esa frase. Y, se muestra como un párrafo, y me gustaría que cada elemento tenga su propia línea. Precio, artículo, etc.
¿Sería capaz de enviarle el código HTML en un documento de Word y podría sugerir el área donde debería pegar la información?
Gracias
Jonathan
Hola Jonathan,
Glad you liked the article. Happy to take a quick look – please ping it to me at [email protected] and I’ll see what I can do.
Salud, Tristan.
¿Cómo agregamos una nueva plantilla de correo electrónico y no solo sobrescribiremos una existente?
Hola Chris,
Shopify te da 7 plantillas de correo electrónico con las que trabajar. No puedes tener varias variaciones de cada una, solo puedes tener una, porque se envían en momentos específicos.
For example: When someone orders on your store, they’ll get an email from the notification template called “Order Notification”. Here are the 7 templates that come with Shopify – https://docs.shopify.com/manual/settings/notifications
Por lo tanto, solo puede sobrescribir una plantilla de correo electrónico existente. * * Puede * tener una versión de texto y una versión HTML, pero no puede tener varias versiones de la plantilla HTML.
Espero que eso Ayude a aclarar!
Tristan.
Hola Tristan,
Muchas gracias por este artículo. Realmente servicial.
Sólo quería saber, estaría usando Mailchimp (o similar) sólo para crear el código HTML, sin necesidad de una cuenta de pago Mailchimp? ¿O estaría enviando correos electrónicos de ' Mailchimp ' de alguna manera, y en última instancia, necesito tener una cuenta de Mailchimp pagada cuando mi correo electrónico alcance un cierto volumen?
Espero que lo que estoy pidiendo tenga sentido. Por favor Perdone mi ignorancia.
Gracias.
Hey NIC!
Claro, eso tiene sentido. Puedes usar una cuenta gratuita de MailChimp. Básicamente estás usando MailChimp para crear la plantilla, luego pegarlo en Shopify y ajustarlo. Así que no necesitas una cuenta de pago de MailChimp, solo una gratis. Creo que MailChimp es gratis para hasta 2.000 suscriptores por mes. (Mejor comprobar su sitio para los detalles) – usted debe estar bien con una cuenta gratuita.
Graphic River también es bueno – usted puede recoger las plantillas de correo electrónico de buen aspecto para alrededor de $15.
¡ Espero que ayude!
Hola – buen artículo. No veo ninguna mención del (molesto) hecho de que Shopify no envía correos electrónicos HTML cuando se activan manualmente desde admin (por ejemplo, para enviar invitaciones a la cuenta o actualizaciones de pedidos).
¿Sabes alguna manera de solucionar esto?
Por cierto, Klaviyo parece bueno (después de un día de uso) y tienen un par de plantillas predefinidas para Shopify con el código de líquido de Shopify (para insertar dinámicamente el nombre del cliente, el orden # etc.) que ya está ahí. Tan fácil de usar como Mailchimp.
Salud
Rory
Hola Rory,
Gracias por leer y contento de que le gustó el guía. He oído cosas buenas sobre Klayvio, una buena.
Para los correos electrónicos HTML al enviar una prueba — si voltea a la pantalla "correo electrónico HTML" en Shopify cuando estás haciendo la prueba, luego pulsa "enviar correo electrónico de prueba", de hecho le enviará la versión HTML.
Para aclarar, si vas a admin > configuración > notificaciones > confirmación de pedido, luego voltear a la pestaña "correo electrónico HTML" y pulsa enviar prueba de correo electrónico, debe enviarle la versión HTML en el correo electrónico de prueba. ¡ Espero que ayude!
Hola Tristan,
Muchas gracias por el artículo-es genial! Mi único problema es que puedo estar siendo realmente estúpido, pero ¿cómo puedo encontrar el HTML una vez que he diseñado mi plantilla de Mailchimp-no puedo acceder a ella en cualquier lugar-tengo que empezar de nuevo y crear una nueva plantilla de Mailchimp usando HTML?
¡ Muchas gracias por tu ayuda!
Catriona
Hola Catriona,
Debería haber un pequeño ícono como este: [<>] que te llevará a la vista HTML en MailChimp. También puedes buscar en "Mis plantillas". Es mejor ponerse en contacto con Mailchimp si no estás seguro. ¡ Espero que ayude! 🙂
Tristan.