Shopify HTML plantillas de correo electrónico: una guía para principiantes

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:

basado en texto-vs-HTML-email-plantillas

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:

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.

Para solucionar esto, debe usar estilos inline.  Copia tu código HTML (el que creaste anteriormente, por ejemplo, usando MailChimp), y pégalo en este sitio web: https://inlinestyler.torchboxapps.com/

Eso le dará código HTML en línea.  Booyah.

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":

Enable-HTML-email

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:

Shopify-Code-into-HTML

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.

preview1

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 storeAll 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.

Impulsado por ConvertKit

15 responses to “Shopify HTML plantillas de correo electrónico: una guía para principiantes

  1. 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 🙂

    1. ¡ 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:

      Para crear un enlace en negrita, utilice :Su texto de enlace va aquí
      Para crear un enlace en cursiva, utilice :Su texto de enlace va aquí

      Otros que podría utilizar: (to make your text black), (to make your text huge), and so on.

      Hope that helps!
      – Tristan.

  2. Hi Tristan

    Thank you for the great post. I am REALLY new too all of this and am trying to use an aweber email template as my shopify order confirmation email. I have created the email using the email template but now do not seem to be able to view it as HTML. Can you tell me where I am going wrong?

    Many thanks 🙂

    1. Hey Laura! Glad you liked the post. It could be a bit tricky to integrate it with an AWeber Template, as I think they use their own formatting styles & stylesheets. What exactly isn’t working properly? For example, do you see nothing, or does it just look out of line?

      To view it as HTML, click on “HTML Preview” or you could also try sending a test email.
      Cheers — Tristan.

  3. <b class="fn"><a href='https://flex-apparel.myshopify.com/' rel='external nofollow ugc' class='url'>Jonathan</a></b> says:

    Hi Tristan,

    Thanks for the article. I didn’t want to have to use Shopify’s plain email format.

    I am having difficulty with the text-based email content for shipping, etc.
    It is placing above a sentence, and I would like it below that sentence. And, it shows as a paragraph, and I would like each item to have it’s own line. Price, Item, etc.

    Would I be able to send you the HTML in a word document and could you suggest the area where I should paste the info?

    Thanks,

    Jonathan

    1. <b class="fn"><a href='https://www.blackbeltcommerce.com' rel='external nofollow ugc' class='url'>Tristan King</a></b> says:

      Hey Chris,
      Shopify gives you 7 email templates to work with. You can’t have multiple variations of each one – you can only have one, because they’re sent at specific times.

      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

      So – you can only overwrite an existing email template. You *can* have a text version and a HTML version, but you can’t have multiple versions of the HTML template.

      I hope that helps to clarify!
      Tristan.

  4. Hi Tristan,

    Thanks so much for this article. Really helpful.

    I just wanted to know, would I be using mailchimp (or similar) just to create the html code, without needing a paid mailchimp account? Or would I be sending ‘mailchimp’ emails somehow, and ultimately need to have a paid mailchimp account when my email reaches a certain volume?

    I hope what I’m asking makes sense. Please excuse my ignorance.

    Thank you.

    1. <b class="fn"><a href='https://www.blackbeltcommerce.com' rel='external nofollow ugc' class='url'>Tristan King</a></b> says:

      Hey Nic!

      Sure, that makes sense. You can use a free MailChimp account. You’re basically using MailChimp to create the template, then pasting that into Shopify and adjusting. So you don’t need a MailChimp paid account – just a free one. I believe MailChimp is free for up to 2,000 subscribers per month. (Best to check their site for the details) – you should be fine with a free account.

      Graphic River is also good – you can pick up good-looking email templates for around $15.

      Hope that helps!

  5. Hi there – nice article. I see no mention of the (annoying) fact that Shopify doesn’t send html emails when you manually trigger them from admin (eg to send account invites or order updates).

    Do you know any way around this?

    By the way Klaviyo seems good (after a day or so use) and they have a couple of pre-set templates for Shopify with the Shopify liquid code (for dynamically inserting customer name, order# etc) already in there. About as easy to use as mailchimp.

    Cheers,

    Rory

    1. <b class="fn"><a href='https://www.blackbeltcommerce.com' rel='external nofollow ugc' class='url'>Tristan King</a></b> says:

      Hey Rory,

      Thanks for reading and glad you liked the guide. I’ve heard some good things about Klayvio, nice one.

      For the HTML emails when sending a test — if you flip to “HTML Email” screen in Shopify when you’re doing the testing, then hit “Send Test Email”, it will indeed send you the HTML version.

      To clarify, if you go to Admin > Settings > Notifications > Order Confirmation, then flip to the “HTML Email” tab and hit Send Test Email, it should send you the HTML version in the test email. Hope that helps!

  6. Hi Tristan,

    Thanks so much for the article- it is great! My only problem is, I may be being really stupid, but how do i find the html once I’ve designed my Mailchimp template- I can’t seem to access it anywhere- do I have to start again and create a new mailchimp template using html?

    Thanks so much for your help!

    Catriona

    1. <b class="fn"><a href='https://www.blackbeltcommerce.com' rel='external nofollow ugc' class='url'>Tristan King</a></b> says:

      Hi Catriona,
      There should be a little icon like this: [<>] that will take you to the HTML view in MailChimp. You could also try looking under “My Templates”. Best to contact Mailchimp if you’re not sure though. Hope that helps! 🙂
      Tristan.

Add Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

;

Comments 15

  1. <b class="fn"><a href='https://www.christinalauer.net' rel='external nofollow ugc' class='url'>Christina</a></b> says:

    This is great – thanks so much! But I’m losing the styling of my links. How would I fix that? Sorry, I’m a designer not a programmer 🙂

    1. Hey Christina! Glad you’re making good progress. To style your links, you’d need to enclose them within the relevant HTML tags. For example:

      To make a link bold, use <strong>: </strong>Your Link Text Goes Here
      To make a link italic, use <em>: </em>Your Link Text Goes Here

      Others you could use: (to make your text black), (to make your text huge), and so on.

      Hope that helps!
      – Tristan.

  2. Hi Tristan

    Thank you for the great post. I am REALLY new too all of this and am trying to use an aweber email template as my shopify order confirmation email. I have created the email using the email template but now do not seem to be able to view it as HTML. Can you tell me where I am going wrong?

    Many thanks 🙂

    1. Hey Laura! Glad you liked the post. It could be a bit tricky to integrate it with an AWeber Template, as I think they use their own formatting styles & stylesheets. What exactly isn’t working properly? For example, do you see nothing, or does it just look out of line?

      To view it as HTML, click on “HTML Preview” or you could also try sending a test email.
      Cheers — Tristan.

  3. <b class="fn"><a href='https://flex-apparel.myshopify.com/' rel='external nofollow ugc' class='url'>Jonathan</a></b> says:

    Hi Tristan,

    Thanks for the article. I didn’t want to have to use Shopify’s plain email format.

    I am having difficulty with the text-based email content for shipping, etc.
    It is placing above a sentence, and I would like it below that sentence. And, it shows as a paragraph, and I would like each item to have it’s own line. Price, Item, etc.

    Would I be able to send you the HTML in a word document and could you suggest the area where I should paste the info?

    Thanks,

    Jonathan

    1. <b class="fn"><a href='https://www.blackbeltcommerce.com' rel='external nofollow ugc' class='url'>Tristan King</a></b> says:

      Hey Chris,
      Shopify gives you 7 email templates to work with. You can’t have multiple variations of each one – you can only have one, because they’re sent at specific times.

      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

      So – you can only overwrite an existing email template. You *can* have a text version and a HTML version, but you can’t have multiple versions of the HTML template.

      I hope that helps to clarify!
      Tristan.

  4. Hi Tristan,

    Thanks so much for this article. Really helpful.

    I just wanted to know, would I be using mailchimp (or similar) just to create the html code, without needing a paid mailchimp account? Or would I be sending ‘mailchimp’ emails somehow, and ultimately need to have a paid mailchimp account when my email reaches a certain volume?

    I hope what I’m asking makes sense. Please excuse my ignorance.

    Thank you.

    1. <b class="fn"><a href='https://www.blackbeltcommerce.com' rel='external nofollow ugc' class='url'>Tristan King</a></b> says:

      Hey Nic!

      Sure, that makes sense. You can use a free MailChimp account. You’re basically using MailChimp to create the template, then pasting that into Shopify and adjusting. So you don’t need a MailChimp paid account – just a free one. I believe MailChimp is free for up to 2,000 subscribers per month. (Best to check their site for the details) – you should be fine with a free account.

      Graphic River is also good – you can pick up good-looking email templates for around $15.

      Hope that helps!

  5. Hi there – nice article. I see no mention of the (annoying) fact that Shopify doesn’t send html emails when you manually trigger them from admin (eg to send account invites or order updates).

    Do you know any way around this?

    By the way Klaviyo seems good (after a day or so use) and they have a couple of pre-set templates for Shopify with the Shopify liquid code (for dynamically inserting customer name, order# etc) already in there. About as easy to use as mailchimp.

    Cheers,

    Rory

    1. <b class="fn"><a href='https://www.blackbeltcommerce.com' rel='external nofollow ugc' class='url'>Tristan King</a></b> says:

      Hey Rory,

      Thanks for reading and glad you liked the guide. I’ve heard some good things about Klayvio, nice one.

      For the HTML emails when sending a test — if you flip to “HTML Email” screen in Shopify when you’re doing the testing, then hit “Send Test Email”, it will indeed send you the HTML version.

      To clarify, if you go to Admin > Settings > Notifications > Order Confirmation, then flip to the “HTML Email” tab and hit Send Test Email, it should send you the HTML version in the test email. Hope that helps!

  6. Hi Tristan,

    Thanks so much for the article- it is great! My only problem is, I may be being really stupid, but how do i find the html once I’ve designed my Mailchimp template- I can’t seem to access it anywhere- do I have to start again and create a new mailchimp template using html?

    Thanks so much for your help!

    Catriona

    1. <b class="fn"><a href='https://www.blackbeltcommerce.com' rel='external nofollow ugc' class='url'>Tristan King</a></b> says:

      Hi Catriona,
      There should be a little icon like this: [<>] that will take you to the HTML view in MailChimp. You could also try looking under “My Templates”. Best to contact Mailchimp if you’re not sure though. Hope that helps! 🙂
      Tristan.

Add Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.