Magento 2 email template zelf maken

Magento 2 email templates zelf maken

Hoe kan je Magento 2 email templates zelf maken zonder coderen of extensies? En hoe schrijf je een goede email? Het uitsturen van mailings is een perfecte manier om klanten te binden. Je komt als bedrijf namelijk op een persoonlijke plek binnen: de inbox. Wij laten je in vier stappen zien hoe je in zelf Magento 2 email templates kan maken zonder coderen. Zo houd jij je klanten op de hoogte van alles wat er gebeurd in je bedrijf en vakgebied!

 

Magento 2 email templates zelf maken zonder coderen of extensies

Voor vrijwel alles heb je de kunsten van een Magento-expert nodig, wil je grote wijzigingen doorvoeren aan je webshop. Maar een email, dat moet je toch in principe zelf kunnen doen? Dat is wat onze SEO Specialist zonder achtergrond in IT ook dacht. Zij ging voor jou op onderzoek uit en laat in dit voorbeeld zien hoe je ook als sterveling een mooie nieuwsbrieftemplate klaarzet.

Een kleine disclaimer: de allermooiste mails maak je nog steeds door deze te (laten) coderen. Magento 2 biedt helaas geen standaard drag-and-drop-functie aan waarmee je een echt sick design neerzet. Hiervoor schakel je liever een Magento-expert in: zij zijn hierin getraind en kunnen vrijwel elk ontwerp omzetten, of een extensie voor je installeren zodat je zelf aan de slag kan.

 

Magento 2 email templates instellen

We beginnen met het aanmaken van een nieuw template. Je kan als bedrijf verschillende soorten mails versturen naar je klanten. In de back-end van je Magento-shop zijn er twee plekken waar je een mail kan maken en klaarzetten: Dashboardmenu > ‘Marketing’ > ‘Communications’ > ‘Email Templates’ of Dashboardmenu > ‘Marketing’ > ‘Communications’ > ‘Newsletter Templates’. In dit artikel leren we je hoe je een nieuwsbrief maakt en verstuurt in Magento 2. Omdat we een nieuwsbrief maken, zetten we deze klaar onder Newsletter Templates. Het maakproces een nieuwsbrief of een algemenere mail is hetzelfde – alleen de plek waar je ze maakt en klaarzet is anders. Voor het aanmaken van een nieuw nieuwsbrieftemplate volg je de volgende route:

Volg Dashboardmenu > ‘Marketing’ > ‘Communications’ > ‘Newsletter Templates’ > ‘Add New Template’

Aanmaken email template in Magento 2

Nu kunnen we beginnen met het maken van een custom Magento email zonder te hoeven coderen. Zoals je ziet in de afbeelding hieronder, staan de invulvelden van de afzenderinformatie en het onderwerp van de nieuwsbrief bovenaan. Het is verleidelijk deze als eerste in te vullen, maar we raden je aan te beginnen met de content (de daadwerkelijk inhoud van je nieuwsbrief). De onderwerpsregel moet namelijk een perfecte teaser geven van de inhoud; weet je nog niet wat de inhoud is, dan kan je geen spannende onderwerpsregel schrijven.

Nieuw email template maken in Magento 2

Een nieuwsbrieftemplate maken in Magento 2

 

Stap 1: ontwerp een header

Je geeft je nieuwsbrief een professionelere uitstraling door deze een header te geven. Hiervoor kan je heel goed Canva gebruiken, een gratis online designtool. Als je Canva nog niet kent, dan is dit de beste dag van je week. Je kan er werkelijk alle kanten mee op. Zo is er een ogenschijnlijk oneindig grote database met stickers, effecten, vormen en animaties om uit te kiezen. En het allerbeste: je kan vrijblijvend gebruik maken van een heleboel templates. Waarom moeilijk doen, als het ook makkelijk kan?

Voorbeeld header nieuwsbrief Magento 2

Voorbeeld header voor een Magento 2 nieuwsbrief

Hierboven zie je de header die we speciaal voor dit project met Canva hebben ontworpen (dit is overigens niet de header van onze eigen nieuwsbrief. Onze eigen website is geen webshop – dus gebruiken we hiervoor ook geen Magento). We gebruiken de afmetingen 1900 x 300 px. Een header hoeft helemaal niet ingewikkeld te zijn. Zoals je in ons voorbeeld ziet, voldoet een mooie kleur, een logo en een paar kleine effecten. Als je je ontwerp af hebt, druk je rechts bovenin op ‘downloaden’.

Ontwerp downloaden uit Canva

Download je headerontwerp in Canva

 

Nu gaan we weer terug naar de nieuwsbrieftemplate in Magento. Druk op Show / Hide Editor en er verschijnt een klein menu dat doet denken aan Word. Heb je hier enige ervaring mee, dan weet je sowieso je weg te vinden! De opties zijn minimaal, maar genoeg om een redelijk mooie nieuwsbrief neer te zetten.

Show Hide Editor in Magento 2

Druk op ‘Show / Hide Editor’ om aan de slag te gaan

Zo ga je te werk:

  1. Klik op het afbeeldingicoon. Er opent een pop-up-scherm. Achter het invuldveld voor ‘Source’ klik je op het foldericoontje. Nu ben je in de mediabibliotheek van je webshop. Kies voor ‘Bestanden kiezen’ om het headerontwerp te uploaden;

Afbeelding toevoegen aan je nieuwsbrief

Navigeer naar de mediabibliotheek  

 

Afbeelding toevoegen aan mediabibliotheek

                                       Upload je header ontwerp

 

  1. Selecteer in de bibliotheek het headerontwerp (dubbelklik) om deze als afbeelding in te voegen;
  2. Maak je header kleiner door op de afbeelding te klikken en een van de hoeken naar binnen te ‘slepen’: in ons voorbeeld gebruiken we 820 x 120 px;

Afbeelding kleiner maken

Klik op de afbeelding om deze kleiner te maken door de hoeken naar binnen te slepen

 

  1. Centreer je header door op het ‘Align center’-icoon te klikken.

Align center knop Magento 2

 

Stap 2: schrijf je tekst

Nu gaat het echte werk beginnen. Een flitsende header verleidt tot lezen, mits de tekst kwalitatief van goed niveau is. In het nieuwsbriefvoorbeeld hieronder hebben we de tekst uit een van onze eerdere nieuwsbrieven gebruikt.

Voorbeeld Magento nieuwsbrief

 

Voorbeeld nieuwsbrief in Magento 2

Een paar tips voor hoe je een goede nieuwsbrief schrijft:

  1. Gebruik een binnenkomer: ‘Breaking news’ trekt meteen de aandacht en maakt nieuwsgierig;
  2. Plaats duidelijke tussenkoppen en geef deze ook als zodanig aan in de editor (H1, H2, H3, enz.): zo weet de lezer meteen wat hem te wachten staat;

Koppen instellen in Magento 2

Benoem tussenkoppen tot een H1, H2, H2, enz.

  1. Geef onder de koppen alleen noodzakelijke informatie, zonder af te doen aan de schrijfstijl: de lezer moet niet te hard werken om de tekst te snappen, maar wel worden gepaaid om door te klikken naar de website;
  2. Maak gebruik van call to action: link na elk blok tekst naar meer informatie (bij voorkeur op je eigen webshop). Hiermee maak je het aantrekkelijk voor de lezer om door te klikken (hallo traffic!);
  3. Denk na over volgorde: plaats het belangrijkste nieuws bovenaan. Helaas, maar waar: veel lezers zullen de onderkant van de nieuwsbrief niet eens halen;
  4. Geef de lezer de kans zich ook weer uit te schrijven: hiermee minimaliseer je de irritatie die de ontvanger koppelt aan jouw nieuwsbrief en indirect je bedrijf. Wanneer je een nieuwe nieuwsbrieftemplate begint, zet Magento hiervoor een standaard zin klaar die je kan gebruiken. Deze link zet je bij voorkeur onder je footer.

Uitschrijven nieuwsbrief Magento 2

Geef je lezers de mogelijkheid zich eenvoudig weer uit te schrijven

 

Stap 3: footer

Na de afsluiting van je nieuwsbrief is het een goed idee om extra informatie in de footer te plaatsen. De footer ontwerpen we zelf door een tabel met twee kolommen in te voegen. In de linker kolom heb je bijvoorbeeld plek voor socialemediaknoppen; in de rechter kolom voor standaard bedrijfsinformatie.

Voorbeeld footer nieuwsbrief

Voorbeeld footer

Een nieuwsbrief met deze informatie afsluiten heeft meerdere voordelen:

  1. De lezer wordt aangespoord de socials eens te checken;
  2. De lezer wordt ondersteund als hij snel achter meer informatie wil komen;
  3. De nieuwsbrief ziet er professioneler uit.

Psst: de socialemediaknoppen in onze voorbeeldnieuwsbrief zijn in feite gewoon twee afbeeldingen. Als je op ‘logo LinkedIn’ en ‘logo Facebook’ Googled, vind je er genoeg. Je voegt ze, net als de headerafbeelding, eerst toe aan de bibliotheek via het afbeeldingsicoontje. Daarna selecteer je ze om in te voegen in het tekstvak. Als je de informatie in de footer gecentreerd wilt hebben, zoals wij in onze nieuwsbrief hebben gedaan, dan selecteer je alle tekst in de tabel en klik je weer op de ‘Align center’-knop.

 

Stap 4: Afzenderinformatie en onderwerp

Nadat je de content hebt ingevuld, ga je verder met de afzenderinformatie en het onderwerp. Een tip van onze marketingafdeling: vul als afzender eens je eigen naam in, gevolgd door het bedrijf waarvoor je werkt. Op deze manier maak je een veel toegankelijkere indruk bij de ontvangers. Ga zelf maar na: vind je het leuker om een mail te ontvangen van ‘Klantenservice 3WebApps’ of ‘Laura van 3WebApps’? Als je voor deze strategie kiest, gebruik dan ook je eigen zakelijke mailadres. Op deze manier geef je de ontvangers het gevoel dat ze met een echt persoon in gesprek kunnen gaan en zijn ze eerder geneigd een reactie te sturen. Zo zet je klantenbinding in werking!

Afzender en onderwerp van Magento 2 nieuwsbrief

Denk goed na over de afzender en het onderwerp!

Naast de daadwerkelijke content van je nieuwsbrief, is de onderwerpsregel heel belangrijk. Dit is namelijk het visitekaartje van je custom email. Deze moet aandacht opeisen en vertellen waar (een deel van) de nieuwsbrief over gaat. Dit zijn de basisingedienten voor een goed onderwerp:

  • Juiste lengte: niet meer dan 73 karakters;
  • Juiste woorden: kies voor een urgente, vriendelijke toon die bij je doelgroep past;
  • Juiste informatie: licht een tipje van de sluier op van waar je nieuwsbrief over gaat, maar hou ook nog wat te raden over;
  • Juiste volgorde: de belangrijkste informatie moet vooraan staan.

Wil je het onderwerp van je nieuwsbrief nog wat pimpen? Dan kan je deze opties eens uitproberen (let er wel op dat je altijd goed moet nadenken wie je doelgroep is en of je ze op deze manier juist aanspreekt):

  • Plaats een emoticon;
  • Gebruik een woordgrap;
  • Voeg een (persoonlijke) korting toe;
  • Personaliseer op naam

Voorbeelden van mailonderwerpen

Voorbeeldonderwerpen nieuwsbrief

 

Responsive web design

Onze pro-tip voor een kickass nieuwsbrief? Design hem eerst als mobiele versie. Tegenwoordig openen steeds meer mensen nieuwsbrieven via hun mobiel. Bij ons is dit zelfs 57%! En geef ze eens ongelijk: een nieuwsbrief is perfect leesvoer om even te checken als je wacht op de trein of in een saaie meeting zit. Wil je een zo groot mogelijk publiek aanspreken met je nieuwsbrief? Denk dan mobile first. Het is namelijk makkelijker om een mobiel design uit te breiden dan een desktopdesign in te korten.

In chique bewoording heet het ontwerpen van een website of, in dit geval, een nieuwsbrief, voor verschillende formaten apparaten ‘responsive web design’. Centraal bij mobiel design staat de gebruikerservaring. Je wilt je nieuwsbrief zo inrichten, dat deze intuïtief te bedienen is en direct duidelijk laat zien waar de content over gaat. Het laatste wat je wilt, is dat de lezer met twee vingers moet inzoomen en heen en weer scrollen om de zinnen te kunnen lezen. Grote letters en grote knoppen zijn het devies.

Wederom benadrukken we dat het, ook in dit opzicht, wellicht een goed idee is om een Magento-expert in te schakelen. Zij weten namelijk alles van responsive web design af. Kies je er toch voor zelf een nieuwsbrief te maken, zoals in dit artikel beschreven? Houd er dan rekening mee dat deze op mobiel of tablet niet optimaal ingericht zijn.

 

Nieuwsbrief versturen

Nu je je nieuwsbrief afhebt, is het tijd om deze de wereld in te schieten. Belangrijk: eerst checken hoe de nieuwsbrief er (ongeveer) op desktop, mobiel en tablet uitziet! Druk op ‘Preview’ rechts bovenin. Er opent nu een voorbeeld van je nieuwsbrief in een nieuw tabblad. Klik vervolgens in de browseropties voor ‘Meer hulpprogramma’s’ > ‘Hulpprogramma’s voor ontwikkelaars’. Negeer de code aan de rechterkant en druk op het icoontje met wat lijkt op een mobieltje en een tablet. Nu kan je switchen tussen een mobiele, tablet-, en desktopversie van je nieuwsbrief.

Magento 2 nieuwsbrief als mobiele en tabletversie zien

Check de mobiele en tabletversie van je nieuwsbrief

 

Switch tussen mobiele en tabletweergave

Switch met dit icoontje tussen de mobiele, tablet- en desktopversie van je nieuwsbrief

 

Magento 2 nieuwsbrief tabletversie

Tabletversie voorbeeld nieuwsbrief

 

Magento 2 nieuwsbrief mobiele versie

Mobiele versie voorbeeld nieuwsbrief

Ziet alles er mooi uit? Dan druk je op ‘Save Template’. Nu ga je weer terug naar het overzicht van ‘Newsletter Templates’ (Dashboardmenu > ‘Marketing’ > ‘Newsletter Templates’). Hier staat je opgeslagen template klaar. Onder ‘Actie’ kies je voor ‘Queue Newsletter’. Je wordt automatisch doorverwezen naar een nieuwe pagina waar je je nieuwsbrief kunt inplannen. Als je op ‘Queue Date Start’ klikt, verschijnt er een kalender- en tijdinstelling. Hier kies je de datum en tijd waarop je de nieuwsbrief wilt versturen. Onder ‘Subscribers from’ klik je aan naar welke groep klanten je de mail wilt versturen (hiervan is alleen sprake als je meerdere Magento-websites beheerd).

Let op: voor nieuwsbrieven geldt dat dit alleen klanten kunnen zijn die zich hebben ingeschreven voor de nieuwsbrief. Check nog een keer de afzenderinformatie, het onderwerp en de content voordat je op ‘Save Newsletter’ klikt. Better save than sorry. Als je nu op ‘Save Newsletter’ in de rechter bovenhoek klikt, staat je mail klaar om verzonden te worden. Als je nog iets wilt wijzigen, dan kan dat via Dashboardmenu > ‘Marketing’ > ‘Newsletter Queue’.

Gefeliciteerd, nu kan je Magento 2 email templates zelf maken!

 

Kom je er niet helemaal uit of heb je nog vragen?

Related Posts

Gerelateerd: