Skapa en e-postlayout

En e-postlayout är själva e-postmeddelandet: ämnesraden, utformningen och eventuella bilagor. Shopify Flow-åtgärden väljer en layout och en avsändare och skickar sedan meddelandet. Eftersom layouten är skild från arbetsflödet kan samma utformning användas för alla kunder utan att du behöver röra HTML igen.

Listan har två flikar: ”Transaktionsmeddelanden” och ”Marknadsföring”, där varje flik visar hur många layouter den innehåller. Listan öppnas på fliken ”Transaktionsmeddelanden”, och alla layouter som du skapade innan e-posttyperna infördes är transaktionsmeddelanden. Dina inställningar för sökning, sortering och sidindelning behålls när du byter flik. En marknadsföringslayout har en marknadsföringsikon bredvid namnet, och funktionen ”Skapa e-postlayout” på fliken ”Marknadsföring” skapar den nya layouten som en marknadsföringslayout.

Skapa en layout

Gå till ”E-postmallar” och klicka på ”Skapa e-postmall”. Här ställer du in följande:

• Namn - så att du känner igen det. Det är bara du som ser det här.
• Ämne - stöder {{ variables.xxx }} och {{ secrets.xxx }}.
• Förhandsgranskningstext - valfritt. Den korta raden som visas bredvid ämnesraden i de flesta inkorgar. Sträva efter 40-100 tecken; den stöder samma variabler som ämnesraden. Lämna fältet tomt så väljer e-postklienten istället den första texten i ditt e-postmeddelande.
• Beskrivning - valfritt, för din egen referens.
• E-posttyp - Transaktionsmeddelanden för e-post som kunderna förväntar sig, till exempel order- och leveransuppdateringar; dessa skickas alltid, även till kunder som har avregistrerat sig från marknadsföring. Marknadsföring för nyhetsbrev, kampanjer och återvinningsmejl; varje mottagare får sitt eget mejl med en länk för att avregistrera sig och dina företagsuppgifter från Inställningar, och kunder som har avregistrerat sig hoppas över. Till skillnad från redigeraren kan typen ändras senare i layoutredigeraren. Mer information finns i Marknadsföringsmejl och avregistreringar.

Välj sedan en redigerare:

Redaktör	Bäst för
Visuell byggare	Skräddarsydda e-postmeddelanden med företagets varumärke, skapade med hjälp av dra-och-släpp-block
Rich Text / HTML	Enkla transaktionsmeddelanden eller ett helt anpassat HTML-mejl som du klistrar in

Den visuella byggaren

Byggverktyget består av en skärm med två fönster: inställningar till vänster och en förhandsgranskning av arbetsytan till höger. Lägg till block med knappen ”Lägg till avsnitt” eller med +-markörerna mellan befintliga block.

Den vänstra panelen har fyra flikar:

Flik	Vad den innehåller
Allmänt	Namn, Ämne, Förhandsgranskningstext, Beskrivning
Varumärkesprofilering	Färger, typografi och avstånd i layouten för hela e-postmeddelandet
Block	Inställningar för det block du har valt på arbetsytan
Testvariabler	JSON-kodsnutt för Shopify Flow, referens för systemvariabler och exempelvärden för förhandsgranskning

Varje block på arbetsytan har knappar för att dra det, duplicera det, ta bort det eller dölja det utan att ta bort det.

Blockreferens

Element

Blockera	Inställningar
Text	Formaterad text, justering, teckenstorlek (12/14/16/18), färg
Rubrik	Rubriktext, storlek (Extra stor H1 till liten H4), justering, färg
Bild	Bild (uppladdning eller länk), alternativtext, bredd 10-100 %, justering
Knapp	Etikett, URL, stil (Primär / Sekundär / Kontur), justering, kantradie 0-24 px
Avdelare	Färg, stil (heldragen / streckad / prickad), tjocklek 1-8
Avstånd	Höjd 4-80 px
Bilaga	Filväljare, en länk eller ett metafält för stegets order eller kund samt en rubrik. Se Bilagor och bilder
Slinga	Upprepar ett block med Liquid + HTML över en arrayvariabel
HTML / Kod	Rå HTML med Liquid, inklusive villkorssatser av typen {% if %}
QR-kod	Data (URL eller text, stöder variabler), storlek 80-300 px, justering
Tabell över enskilda poster	Beställningens artiklar från en listvariabel, med rader för bild, antal, pris och totalsummor

Handels- och innehållsblock (nytt i version 1.17, se Innehållsblock: produkt, rabatt, nedräkning, spårning och mer för detaljerad information om varje enskilt block)

Blockera	Vad den gör
Produkt	Ett produktkort: bild, titel, beskrivning, pris med jämförelsepris och en knapp. Varje fält tar emot en variabel
Produktrutnät	Två eller tre kort per rad från en listvariabel, till exempel tabellen med radposter
Rabattkod	Ett kodfält med en knapp som tillämpar koden vid utcheckningen. Antingen en kod som du skriver in själv, eller en unik engångskod som skapas i din butik för varje e-postadress
Nedräkning	En nedräkning i realtid till ett datum, som visas som en animerad bild när e-postmeddelandet öppnas. Rutor, vändkort, minimalistisk stil eller textstil
Spåra din beställning	Transportör, spårningsnummer, en ”Spåra”-knapp och en förloppsindikator som uppdateras utifrån försändelsens status
Stjärnbetyg	Stjärnor utifrån ett tal, med en etikett och en valfri länk till din recensionssida
Kundutlåtande	Ett citat med namn, befattning och foto, i form av ett kort, med en accentstreck eller utan utsmyckning
Sociala länkar	En rad med nätverksikoner
Video	En miniatyrbild med en uppspelningsknapp som länkar till videon
Signatur	Namn, befattning, företag, telefonnummer, e-postadress, webbplats och ett foto
Tabell	En liten datatabell där varje cell innehåller en variabel
Visa i webbläsaren	Den vanliga raden ”Visa det här e-postmeddelandet i webbläsaren”
Pris	En prissrad i sig: priset, ett valfritt jämförelsepris som är överstruket, storlek, färg och justering

Layout

Blockera	Inställningar
Bild + text	Bildens placering (vänster/höger), bildens bredd 20-70 %, vertikal justering, mellanrum, bakgrundsfärg samt underkomponenter som bild, text och knappar
Två kolumner	Kolumnindelning (50/50, 33/67, 67/33, 40/60, 60/40), avstånd 0-40, vertikal justering, utfyllnad samt separat innehåll i vänster- och högerkolumn
Kolumner	Två, tre eller fyra lika stora kolumner, var och en med sina egna block
Visa om	Ett avsnitt som endast skickas när ett villkor för variablerna är uppfyllt, till exempel variables.total > 100 eller language == "de"

Varumärkesprofilering

Fliken ”Branding” gäller för hela layouten:

• Färger - primärfärger, sekundärfärger, textfärg, bakgrundsfärg för brödtext, bakgrundsfärg för innehåll
• Typografi - rubriktypsnitt, brödtext, radavstånd
• Layout - inställningarna för avstånd nedan

Kontroll	Vad som förändras	Sortiment
Maximal bredd	Hur stort e-postinnehållet kan bli	400-800 px
Fyllmaterial för containrar	Mellanrum runt hela innehållsområdet	0-40 px
Blockfyllning (sidor)	Avståndet mellan ditt innehåll och vänster- respektive högerkanten	0-40 px
Blockutfyllnad (övre och nedre)	Mellanrum ovanför och under innehållet i varje block	0-40 px
Avstånd mellan block	Vertikalt avstånd mellan ett block och nästa	0-40 px

Håll blockutfyllnaden (överst och nederst) liten. Blockavståndet separerar redan blocken, så om man ökar båda värdena uppstår stora mellanrum.

Om du har namngett varumärkesfärger under Inställningar > Varumärke och teckensnitt visas de som färgprover under fältet i alla färgväljare i byggverktyget, och när du klickar på ett färgprov tillämpas den färgen. Färgprovet för den färg som för närvarande finns i fältet är markerat. Se Inställningar.

I rullgardinsmenyn för teckensnitt finns systemteckensnitt (Arial, Georgia, Verdana, Times New Roman, Helvetica, Trebuchet MS), en uppsättning Google-teckensnitt (Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Nunito, Raleway, Playfair Display, Merriweather, Source Sans 3, Oswald, Work Sans, DM Sans, Space Grotesk) samt alla anpassade typsnitt som du har laddat upp under Inställningar > Varumärke och typsnitt.

Sidhuvud och sidfot

Sidhuvudet och sidfoten är klickbara områden längst upp och längst ner på arbetsytan. För båda kan du använda en sparad förinställning så att en ändring av ditt varumärke uppdaterar alla layouter samtidigt, eller alternativet ”Anpassad” (endast denna layout) för en engångsändring. Se Förinställningar för sidhuvud och sidfot.

Rich Text-/HTML-läge

I det här läget består gränssnittet av en enda redigerare med en växlingsknapp för Rich Text/HTML och en separat växlingsknapp för förhandsgranskning.

• Med Rich Text får du tillgång till ett välbekant formateringsverktygsfält.
• HTML ger dig ett vanligt textfält - klistra in ett färdigformaterat e-postmeddelande om du redan har ett.
• Med funktionen ”Infoga bild” kan du lägga till en bild som finns på servern, antingen från ditt mediebibliotek eller via en länk.

Förhandsgranskningen är skrivskyddad och visar Liquid-taggarna precis som de är. För att se de faktiska värdena, skicka ett testmejl.

Ansluta det till Shopify Flow

En layout är bara halva jobbet - Shopify Flow måste fylla i värdena i dina platshållare.

Varje layout har ett kort med rubriken ”Använd i Shopify Flow” som innehåller exakt de variabler (JSON) som ska klistras in i åtgärden ”Send Transactional Email”, där alla nyckelnamn redan är korrekt angivna. Kopiera det, klistra in det i Shopify Flow och ersätt eventuella platshållare av typen <pick a Flow variable>.

Du väljer layout för varje steg i Shopify Flow på åtgärdens konfigurationssida, där det visas en förhandsgranskning av layouten ifylld med testvariablerna. Tydliga namn och realistiska testvariabler gör det enkelt att hitta rätt layout där.

Fullständig genomgång: Överföring av data från Shopify Flow.

Förhandsgranskning med testvariabler

På fliken ”Testvariabler” visas alla {{ variables.x }} som appen har upptäckt, så att du kan ange exempelvärden och se att designen återges korrekt.

För att mata in en array i ett Loop-block anger du den som en JSON-array på den här fliken.

Skicka ett testmejl

Använd funktionen ”Skicka testmejl” i layoutredigeraren. Den visar hur layouten ser ut i verkligheten och skickar den via en avsändare som du väljer, med [TEST] som prefix i ämnesraden. Detta är det enda sättet att kontrollera att din Liquid-kod faktiskt fungerar, eftersom förhandsgranskningen på sidan inte utvärderar den.

När du har publicerat, kontrollera historiken - en sändning där en platshållare inte genererade något markeras med ”Tomma variabler”. Se Historik och felsökning.

Återanvända en design

• Mer → Med ”Spara som mall” sparas designen så att du kan utgå från den igen. Sparade designer finns under ”Mina mallar”, där endast de designer som du själv har sparat finns.
• Mer → Duplicera kopierar layouten på plats.
• Mer → Funktionen ”Exportera” laddar ner filen, och funktionen ”Importera” på listan accepterar en .zip- eller .json-fil som tidigare exporterats från appen - praktiskt när man vill flytta en design mellan butiker.

Ta bort en layout

Du kan alltid ta bort en layout. Om ett steg i Shopify Flow fortfarande hänvisar till den, visas en etikett med texten ”Används i Shopify Flow” på layouten och detta anges även i bekräftelsen vid borttagningen - men det hindrar dig inte från att ta bort den.

Efter borttagningen misslyckas alla steg i Shopify Flow som fortfarande hänvisar till den med felmeddelandet Email template not found, vilket visas i historiken. Ange en annan layout för dessa steg för att åtgärda problemet.

Relaterat

• Innehållsblock: produkt, rabatt, nedräkning, spårning och mer - produkt, rabatt, nedräkning, spårning och övriga innehållsblock.
• Överföring av data från Shopify Flow - ange värdena.
• Variabler och vätska - den fullständiga variabelreferensen.
• Bilagor och bilder - filer, bilder och storleksbegränsningar.
• Förinställningar för sidhuvud och sidfot - återanvändbara varumärkesmallar.
• Marknadsföringsmejl och avregistreringar - vad som utmärker en marknadsföringslayout.
• Inställningar - varumärkesfärger, anpassade typsnitt och standardinställningar för e-postmeddelanden i hela butiken.