Een e-mailopmaak ontwerpen

Een e-mailopmaak bestaat uit de e-mail zelf: de onderwerpregel, het ontwerp en eventuele bijlagen. De actie Shopify Flow kiest een opmaak en een afzender en verstuurt de e-mail vervolgens. Aangezien de opmaak losstaat van de workflow, kan één ontwerp voor alle klanten worden gebruikt 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-mailtypen 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 maken’ klikt,** wordt de nieuwe lay-out als marketinglay-out aangemaakt.

Een lay-out maken

Ga naar ‘E-mailopmaak’ en klik op ‘E-mailopmaak 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 op 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 kunt invoegen

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 de Shopify Flow, de referentie met systeemvariabelen en voorbeeldwaarden voor een voorvertoning

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 (doorlopend / gestreept / gestippeld), dikte 1-8
Spatiëring	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 voorwaardelijke constructies van het type {% if %}
QR-code	Gegevens (URL of tekst, ondersteunt variabelen), grootte 80-300px, uitlijning
Tabel met artikelen	De artikelen van de bestelling uit een lijstvariabele, met rijen voor afbeelding, aantal, prijs en totaalbedragen

Blokken voor handel en inhoud (nieuw in versie 1.17; zie Inhoudsblokken: product, korting, aftelling, tracking en meer voor gedetailleerde informatie over elk blok afzonderlijk)

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 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, omslagkaartjes, 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 opmaak
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 prijslijn op zichzelf: de prijs, een optionele doorstreepte 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
Weergeven indien	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 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

Zorg ervoor dat de opvulling van blokken (boven en onder) klein blijft. De blokafstand zorgt er al voor dat blokken van elkaar worden gescheiden, dus als u beide waarden verhoogt, ontstaan er grote openingen.

Als u in „Instellingen > Merk en lettertypen“ merkkleuren hebt benoemd, worden deze in elke kleurenkiezer in de builder weergegeven als kleurvlakjes onder het invoerveld; door op een kleurvlakje te klikken, wordt die kleur toegepast. Het kleurvlakje 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 werkgebied. 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.

Aansluiten op 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 ‘Gebruik in’Shopify Flow-kaart met de exacte variabelen (JSON) die u in de actie ‘Transactionele e-mail verzenden’ 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>.

Volledige handleiding: Gegevens doorgeven vanuit Shopify Flow.

Voorbeeldweergave met testvariabelen

Op het tabblad ‘Testvariabelen’ worden alle door de app gedetecteerde {{ variables.x }} weergegeven, 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 optie ‘Test-e-mail verzenden’ in de lay-outeditor. Hiermee wordt de lay-out daadwerkelijk weergegeven en verzonden via een door u gekozen afzender, waarbij het onderwerp wordt voorafgegaan door [TEST]. Dit is de enige manier om te controleren of uw Liquid-code daadwerkelijk wordt verwerkt, aangezien het voorbeeld op de pagina dit niet controleert.

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 bij ‘Importeren’ op de lijstpagina kunt u een .zip of .json invoeren die 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 er nog een stap in de Shopify Flow naar deze lay-out verwijst, wordt de lay-out gemarkeerd met het label „Gebruikt in Shopify Flow” en wordt dit ook vermeld in de bevestigingsmelding bij het verwijderen - maar dit belet u niet om de lay-out te verwijderen.

Na het verwijderen mislukt elke Shopify Flow-stap die er nog naar verwijst met de foutmelding Email template not found, die in de geschiedenis wordt weergegeven. 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 invoeren van de waarden.
• Variabelen en vloeistoffen - de volledige variabelereferentie.
• Bijlagen en afbeeldingen - bestanden, afbeeldingen en maximale grootte.
• Voorinstellingen voor kop- en voetteksten - herbruikbare huisstijlelementen.
• Marketingmails en afmeldingen - waarin een marketinglay-out zich onderscheidt.
• Instellingen - merkkleuren, aangepaste lettertypen en standaardinstellingen voor e-mails die voor de gehele webwinkel gelden.