Een e-mailopmaak opstellen

Een e-mailopmaak bestaat uit de e-mail zelf: de onderwerpregel, de vormgeving 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 elke klant worden gebruikt zonder dat u nogmaals aan de HTML hoeft te sleutelen.

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-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. Dit is 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 e-mails om klanten terug te winnen; 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 hierin plakt

De visuele builder

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

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	Bestandskeuzescherm en een titel. Zie Bijlagen en afbeeldingen
Lus	Herhaalt een blok met Liquid + HTML over een array-variabele - gebruik dit voor artikelen
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

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

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

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), evenals elk aangepast lettertype dat u hebt geüpload via Instellingen > Merk en lettertypen.

Kop- en voettekst

De kop- en voettekst zijn aanklikbare gebieden bovenaan en onderaan 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.

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 kaart met de tekst ‘Gebruik in Shopify Flow’ waarop de exacte variabelen (JSON) staan die u in de actie ‘Transactionele e-mail verzenden’ kunt plakken, waarbij alle sleutelnamen al correct zijn ingesteld. Kopieer deze, plak deze 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 variabelen ({{ 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 functie ‘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 deze niet evalueert.

Nadat u live bent gegaan, controleert u de Geschiedenis - een verzending waarbij een plaatshouder geen resultaat heeft opgeleverd, wordt gemarkeerd als „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 staan onder ‘Mijn sjablonen’, waar uitsluitend de ontwerpen worden bewaard 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-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 de 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 bevestiging voor het verwijderen - maar dit belet u niet om de lay-out te verwijderen.

Na het verwijderen mislukken alle Shopify Flow-stappen die er nog naar verwijzen met de foutmelding Email template not found, die in de geschiedenis wordt weergegeven. Wijzig de verwijzingen van die stappen naar een andere lay-out om het probleem op te lossen.

Gerelateerd

• Gegevens doorgeven vanuit Shopify Flow - het invoeren van de waarden.
• Variabelen en vloeistoffen - de volledige variabelereferentie.
• Bijlagen en afbeeldingen - bestanden, afbeeldingen en maximale bestandsgrootte.
• 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.