Een e-mailopmaak opstellen

Een e-mailopmaak bestaat uit de e-mail zelf: de onderwerpregel, het ontwerp en eventuele bijlagen. De Shopify Flow-actie kiest een opmaak en een afzender en verstuurt de e-mail vervolgens. Aangezien de opmaak losstaat van de workflow, kunt u één ontwerp voor alle klanten gebruiken zonder dat u nogmaals HTML hoeft aan te passen.

De lijst bevat twee tabbladen: Transactioneel en Marketing, waarop telkens wordt weergegeven hoeveel lay-outs erin zijn opgenomen. De lijst wordt geopend op het tabblad Transactioneel, en elke lay-out die u hebt aangemaakt voordat er e-mailtypes bestonden, is transactioneel. Uw zoekopdracht, sortering en paginanummering blijven behouden wanneer u van tabblad wisselt. Een marketinglay-out is herkenbaar aan het label Marketing naast de naam, en als u op het tabblad ‘Marketing’ op E-maillay-out aanmaken klikt, wordt de nieuwe lay-out als marketinglay-out aangemaakt.

Een lay-out maken

Ga naar E-mailindelingen en klik op E-mailindeling aanmaken. U stelt het volgende in:

• Naam - de naam waarmee u het herkent. Alleen u kunt dit zien.
• Onderwerp - ondersteunt {{ variables.xxx }} en {{ secrets.xxx }}.
• Voorbeeldtekst - optioneel. De korte regel die in de meeste inboxen naast het onderwerp wordt weergegeven. Streef naar 40-100 tekens; deze tekst ondersteunt dezelfde variabelen als het onderwerp. Als u dit veld leeg laat, kiest de e-mailclient in plaats daarvan de eerste tekst uit uw e-mail.
• Beschrijving - optioneel, ter informatie.
• E-mailtype - Transactioneel voor e-mails die klanten verwachten, zoals updates over bestellingen en verzendingen; deze worden altijd verzonden, zelfs naar klanten die zich hebben afgemeld voor marketingberichten. Marketing: voor nieuwsbrieven, promoties en terugwervingsmails; elke ontvanger krijgt een eigen e-mail met een afmeldlink en uw bedrijfsgegevens uit de instellingen, en klanten die zich hebben afgemeld, worden overgeslagen. In tegenstelling tot de editor kan het type later in de lay-outeditor worden gewijzigd. Meer informatie vindt u in Marketingmails en afmeldingen.

Kies vervolgens een editor:

Redacteur	Het meest geschikt voor
Visuele builder	Op maat ontworpen e-mails met uw huisstijl, samengesteld uit blokken die u met slepen en neerzetten kunt plaatsen
Rich Text / HTML	Eenvoudige transactiemeldingen, of een volledig op maat gemaakte HTML-e-mail die u hierin plakt

De visuele builder

De builder bestaat uit een scherm met twee panelen: de instellingen aan de linkerkant en een live voorbeeld van het canvas aan de rechterkant. U kunt blokken toevoegen via de knop Sectie toevoegen of via de +-markeringen tussen bestaande blokken.

Het linkerpaneel bevat vier tabbladen:

Tab	Wat erin staat
Algemeen	Naam, Onderwerp, Voorbeeldtekst, Beschrijving
Merkopbouw	Kleuren, typografie en opmaakafstanden voor de gehele e-mail
Blokken	Instellingen voor het blok dat u op het canvas hebt geselecteerd
Testvariabelen	Het JSON-fragment van Shopify Flow, de referentie met systeemvariabelen en voorbeeldwaarden voor het bekijken van een voorbeeld

Elk blok op het canvas beschikt over bedieningselementen waarmee u het kunt verslepen, dupliceren, verwijderen of verbergen zonder het te verwijderen.

Blokverwijzing

Elementen

Blok	Instellingen
Tekst	Opmaak, uitlijning, lettergrootte (12/14/16/18), kleur
Koptekst	Koptekst, grootte (Extra groot H1 tot Klein H4), uitlijning, kleur
Afbeelding	Afbeelding (uploaden of link), alternatieve tekst, breedte 10-100%, uitlijning
Knop	Label, URL, stijl (Primair / Secundair / Overzicht), uitlijning, randradius 0-24px
Scheidingsteken	Kleur, stijl (ononderbroken / gestreept / gestippeld), dikte 1-8
Afstand	Hoogte 4-80px
Bijlage	Een bestandskeuzescherm, een link of een metaveld met betrekking tot de bestelling of de klant van de stap, en een titel. Zie Bijlagen en afbeeldingen
Lus	Herhaalt een blok met Liquid + HTML over een array-variabele
HTML / Code	Ruwe HTML met Liquid, inclusief {% if %}-voorwaardelijke constructies
QR-code	Gegevens (URL of tekst, variabelen worden ondersteund), grootte 80-300px, uitlijning
Tabel met artikelen	De artikelen van de bestelling uit een lijstvariabele, met rijen voor afbeelding, aantal, prijs en totaalbedragen

Handels- en inhoudsblokken (nieuw in versie 1.17; zie Inhoudsblokken: product, korting, aftelling, tracking en meer voor gedetailleerde informatie over elk blok)

Blok	Wat het doet
Product	Eén productkaart: afbeelding, titel, beschrijving, prijs met vergelijkingsprijs en een knop. Elk veld bevat een variabele
Productoverzicht	Twee of drie kaarten per rij uit een lijstvariabele, zoals de tabel met artikelen
Kortingscode	Een codevak met een knop waarmee de code bij de checkout wordt toegepast. Dit kan een code zijn die u zelf invoert, of een unieke code voor eenmalig gebruik die in uw winkel voor elk e-mailadres wordt aangemaakt
Aftellen	Een live aftelling naar een datum, die bij het openen van de e-mail als geanimeerde afbeelding wordt weergegeven. Vakjes, omdraaikaartjes, minimalistische stijl of tekststijl
Bestelling volgen	Vervoerder, trackingnummer, een knop ‘Tracken’ en een voortgangsbalk die wordt aangepast aan de verzendstatus
Sterrenbeoordeling	Sterren op basis van een getal, met een bijschrift en een optionele link naar uw beoordelingspagina
Getuigenis	Een citaat met naam, functie en foto, in de vorm van een kaart, met een accentstreep of zonder versiering
Sociale media	Een rij netwerkpictogrammen
Video	Een miniatuurafbeelding met een afspeelknop die naar de video leidt
Handtekening	Naam, functie, bedrijf, telefoonnummer, e-mailadres, website en een foto
Tabel	Een kleine gegevenstabel, waarbij elke cel een variabele bevat
In de browser bekijken	De gebruikelijke zin „Bekijk deze e-mail in uw browser“
Prijs	Een prijsregel op zichzelf: de prijs, een optionele doorgehaalde vergelijkingsprijs, maat, kleur en uitlijning

Indeling

Blok	Instellingen
Afbeelding + tekst	Afbeeldingspositie (links/rechts), afbeeldingsbreedte 20-70%, verticale uitlijning, tussenruimte, achtergrondkleur, plus subcomponenten zoals afbeeldingen, tekst en knoppen
Twee kolommen	Kolomverdeling (50/50, 33/67, 67/33, 40/60, 60/40), tussenruimte 0-40, verticale uitlijning, opvulling en afzonderlijke inhoud voor de linker- en rechterkolom
Rijen	Twee, drie of vier gelijke kolommen, elk met hun eigen blokken
Geef aan of	Een sectie die alleen wordt verzonden wanneer aan een voorwaarde met betrekking tot de variabelen is voldaan, bijvoorbeeld variables.total > 100 of language == "de"

Merkopbouw

Het tabblad Branding is van toepassing op de gehele lay-out:

• Kleuren - primaire kleuren, secundaire kleuren, tekstkleur, achtergrondkleur van de hoofdtekst, achtergrondkleur van de inhoud
• Typografie - lettertype voor koppen, lettertype voor de hoofdtekst, regelafstand
• Opmaak - de onderstaande instellingen voor de spatiëring

Controle	Wat er verandert	Bereik
Maximale breedte	Hoe groot de inhoud van de e-mail kan worden	400-800 px
Vulmateriaal voor containers	Ruimte rondom het gehele inhoudsgebied	0-40px
Opvulling van de blokken (zijkanten)	De ruimte tussen uw inhoud en de linker- en rechterrand	0-40px
Opvulling van blokken (boven en onder)	Ruimte boven en onder de inhoud van elk blok	0-40px
Afstand tussen blokken	Verticale afstand tussen het ene blok en het volgende	0-40px

Houd de opvulling van blokken (boven en onder) klein. De blokafstand zorgt al voor scheiding tussen de blokken, dus als u beide waarden verhoogt, ontstaan er grote openingen.

Als u in Instellingen > Merk en lettertypen kleuren voor uw merk hebt benoemd, worden deze in elke kleurenkiezer in de builder weergegeven als kleurvakjes onder het invoerveld; door op een kleurvakje te klikken, wordt die kleur toegepast. Het kleurvakje van de kleur die momenteel in het invoerveld staat, is gemarkeerd. Zie Instellingen.

In het keuzemenu voor lettertypen vindt u systeemlettertypen (Arial, Georgia, Verdana, Times New Roman, Helvetica, Trebuchet MS), een reeks Google-lettertypen (Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Nunito, Raleway, Playfair Display, Merriweather, Source Sans 3, Oswald, Work Sans, DM Sans, Space Grotesk) en elk aangepast lettertype dat u hebt geüpload via Instellingen > Merk en lettertypen.

Kop- en voettekst

De kop- en voettekst zijn klikbare gebieden aan de boven- en onderkant van het canvas. Voor beide kunt u een opgeslagen voorinstelling gebruiken, zodat een wijziging in uw huisstijl in één keer in alle lay-outs wordt doorgevoerd, of de optie Aangepast (alleen voor deze lay-out) voor een eenmalige aanpassing. Zie Voorinstellingen voor kop- en voetteksten.

Rich Text / HTML-modus

In deze modus bestaat het hoofdgedeelte uit één enkele editor met een schakelaar voor Rich Text/HTML en een aparte schakelaar voor het voorbeeld.

• Met Rich Text beschikt u over een vertrouwde opmaakwerkbalk.
• HTML biedt u een onopgemaakt tekstveld - plak hier een volledig opgemaakte e-mail als u die al hebt.
• Met Afbeelding invoegen voegt u een gehoste afbeelding toe, hetzij uit uw mediabibliotheek, hetzij via een link.

Het voorbeeld is alleen-lezen en toont Liquid-tags precies zoals ze zijn. Om de daadwerkelijke waarden te zien, dient u een test-e-mail te versturen.

Het koppelen aan Shopify Flow

Een lay-out is slechts de helft van het werk - Shopify Flow moet de waarden voor uw plaatshouders aanleveren.

Elke lay-out bevat een kaart ‘Gebruik in Shopify Flow’ met de exacte variabelen (JSON) die u in de actie Send Transactional Email kunt plakken, waarbij alle sleutelnamen al correct zijn ingesteld. Kopieer deze, plak ze in Shopify Flow en vervang eventuele plaatshouders van het type <pick a Flow variable>.

U kiest de lay-out voor elke Shopify Flow-stap op de configuratiepagina van de actie, waar een voorbeeld wordt getoond waarin de lay-out is ingevuld met de testvariabelen. Dankzij duidelijke namen en realistische testvariabelen kunt u daar gemakkelijk de juiste lay-out herkennen.

Volledige handleiding: Gegevens doorgeven vanuit Shopify Flow.

Voorbeeld met testvariabelen

Op het tabblad Testvariabelen worden alle {{ variables.x }} weergegeven die de app heeft gedetecteerd, zodat u voorbeeldwaarden kunt invoeren en kunt controleren of het ontwerp correct wordt weergegeven.

Om een array in een Loop-blok in te voeren, voert u deze op dit tabblad in als een JSON-array.

Een test-e-mail verzenden

Gebruik de functie Test-e-mail verzenden in de lay-outeditor. Hiermee wordt de lay-out daadwerkelijk weergegeven en verzonden via een door u gekozen afzender, met het voorvoegsel [TEST] in het onderwerp. Dit is de enige manier om te controleren of uw Liquid-code daadwerkelijk wordt verwerkt, aangezien het voorbeeld op de pagina deze niet evalueert.

Nadat u live bent gegaan, controleert u de geschiedenis - een verzending waarbij een plaatshouder geen resultaat heeft opgeleverd, wordt gemarkeerd met Lege variabelen. Zie Geschiedenis en probleemoplossing.

Een ontwerp hergebruiken

• Meer → Met Opslaan als sjabloon wordt het ontwerp opgeslagen, zodat u er later weer mee aan de slag kunt. Opgeslagen ontwerpen worden opgeslagen onder Mijn sjablonen, waar uitsluitend de ontwerpen staan die u zelf hebt opgeslagen.
• Meer → Met Dupliceren wordt de lay-out ter plekke gekopieerd.
• Meer → Met Exporteren kunt u het bestand downloaden, en met Importeren op de lijstpagina kunt u een .zip- of .json-bestand invoeren dat eerder vanuit de app is geëxporteerd - handig om een ontwerp tussen winkels uit te wisselen.

Een lay-out verwijderen

U kunt een lay-out altijd verwijderen. Als een stap in Shopify Flow er nog steeds naar verwijst, wordt bij de lay-out het label Gebruikt in Shopify Flow weergegeven en wordt dit ook vermeld in de verwijderingsbevestiging - maar dit houdt u niet tegen.

Na het verwijderen zal elke Shopify Flow-stap die er nog naar verwijst, een foutmelding geven met de tekst Email template not found; deze wordt weergegeven in de geschiedenis. Wijzig de verwijzing van die stappen naar een andere lay-out om het probleem op te lossen.

Gerelateerd

• Inhoudsblokken: product, korting, aftelling, tracking en meer - product, korting, aftelling, tracking en de overige inhoudsblokken.
• Gegevens doorgeven vanuit Shopify Flow - het doorgeven van de waarden.
• Variabelen en vloeistoffen - de volledige variabelengids.
• Bijlagen en afbeeldingen - bestanden, afbeeldingen en maximale bestandsgrootte.
• Voorinstellingen voor kop- en voetteksten - herbruikbare huisstijlelementen.
• Marketingmails en afmeldingen - wat een marketinglay-out anders doet.
• Instellingen - merkkleuren, aangepaste lettertypen en standaardinstellingen voor e-mails voor de gehele winkel.