Opret et e-mail-layout

Et e-mail-layout er selve e-mailen: emnelinjen, designet og eventuelle vedhæftede filer. Handlingen »Shopify Flow« vælger et layout og en afsender og sender derefter e-mailen. Da layoutet er adskilt fra arbejdsgangen, kan ét design bruges til alle kunder, uden at du behøver at røre ved HTML igen.

Listen har to faner: »Transaktion« og »Marketing«, hvor hver fane viser, hvor mange layouts den indeholder. Den åbnes på fanen »Transaktion«, og alle layouts, du har oprettet, før e-mailtyperne blev indført, er transaktionslayouts. Din søgning, sortering og sideinddeling overføres, når du skifter mellem fanerne. Et marketinglayout har et »Marketing«-mærke ved siden af navnet, og hvis du vælger »Opret e-mail-layout« på fanen »Marketing«, oprettes det nye layout som et marketinglayout.

Opret et layout

Gå til »E-mail-layouter«, og klik på »Opret e-mail-layout«. Her skal du indstille:

• Navn - så du kan genkende det. Det er kun dig, der kan se det.
• Emne - supports {{ variables.xxx }} og {{ secrets.xxx }}.
• Forhåndsvisningstekst - valgfri. Den korte tekst, som de fleste indbakker viser ved siden af emnefeltet. Sigt efter 40-100 tegn; den understøtter de samme variabler som emnefeltet. Hvis du lader feltet stå tomt, vælger e-mail-klienten i stedet den første tekst i din e-mail.
• Beskrivelse - valgfrit, til eget brug.
• E-mailtype - Transaktions-e-mails, som kunderne forventer, f.eks. opdateringer om ordrer og forsendelser; disse sendes altid, også til kunder, der har afmeldt markedsføring. Markedsføring til nyhedsbreve, kampagner og e-mails med henblik på at genvinde kunder; hver modtager får sin egen e-mail med et link til afmelding og dine virksomhedsoplysninger fra Indstillinger, og kunder, der har afmeldt sig, springes over. I modsætning til editoren kan typen ændres senere i layouteditoren. Se nærmere på Markedsførings-e-mails og afmeldinger.

Vælg derefter et redigeringsprogram:

Redaktør	Bedst egnet til
Visuelt redigeringsværktøj	Designede e-mails med virksomhedens branding, opbygget af drag-and-drop-blokke
Rich Text / HTML	Enkle transaktionsmeddelelser eller en fuldt tilpasset HTML-e-mail, som du indsætter

Den visuelle builder

Redigeringsværktøjet består af to paneler: indstillinger til venstre og et live-eksempel på arbejdsområdet til højre. Du kan tilføje blokke ved at klikke på knappen »Tilføj sektion« eller ved at klikke på +-ikonerne mellem eksisterende blokke.

Det venstre panel har fire faner:

Fane	Hvad den indeholder
Generelt	Navn, Emne, Forhåndsvisningstekst, Beskrivelse
Branding	Farver, typografi og mellemrum i layoutet for hele e-mailen
Blokke	Indstillinger for den blok, du har valgt på arbejdsfladen
Testvariabler	JSON-kodestykket »Shopify Flow«, oversigten over systemvariabler og eksempelværdier til forhåndsvisning

Hver blok på lærredet har knapper, der gør det muligt at trække den, kopiere den, slette den eller skjule den uden at slette den.

Blokhenvisning

Elementer

Blok	Indstillinger
Tekst	Formateret tekst, justering, skriftstørrelse (12/14/16/18), farve
Overskrift	Overskriftstekst, størrelse (Ekstra stor H1 til Lille H4), justering, farve
Billede	Billede (upload eller link), alternativ tekst, bredde 10-100 %, justering
Knap	Etiket, URL, stil (Primær / Sekundær / Kontur), justering, kantradius 0-24 px
Skillevæg	Farve, stil (kontinuerlig / stiplet / prikket), tykkelse 1-8
Afstand	Højde 4-80 px
Vedhæftet fil	Filvælger, et link eller et metafelt for trinets ordre eller kunde samt en titel. Se Vedhæftede filer og billeder
Loop	Gentager en blok bestående af Liquid + HTML over en array-variabel
HTML / Kode	Rå HTML med Liquid, herunder betingelser af typen »{% if %}«
QR-kode	Data (URL eller tekst, understøtter variabler), størrelse 80-300 px, justering
Tabel over varelinjer	Ordenes varer fra en listevariabel, med rækker for billede, antal, pris og samlet beløb

Handels- og indholdsblokke (nyt i version 1.17; se Indholdsblokke: produkt, rabat, nedtælling, sporing og mere for detaljerede oplysninger om hver enkelt)

Blok	Hvad det gør
Produkt	Et produktkort: billede, titel, beskrivelse, pris med sammenligningspris og en knap. Hvert felt tager en variabel
Produktoversigt	To eller tre kort pr. række fra en listevariabel, f.eks. tabellen med varelinjer
Rabat-kode	Et kodefelt med en knap, der anvender koden ved checkout. Enten en kode, du selv indtaster, eller en unik engangskode, der oprettes i din butik for hver e-mail
Nedtælling	En live nedtælling til en dato, der vises som et animeret billede, når e-mailen åbnes. Kasser, vendekort, minimalistisk stil eller tekststil
Ordrestatus	Transportør, sporingsnummer, en »Spor«-knap og en statusbjælke, der opdateres i takt med forsendelsens status
Stjerneklassificering	Stjerner ud fra et tal, med en tekst og et valgfrit link til din anmeldelsesside
Kundeudtalelse	Et citat med navn, rolle og foto, som et kort, med en accentstreg eller uden
Sociale medier	En række netværksikoner
Video	Et miniaturebillede med en afspilningsknap, der fører til videoen
Underskrift	Navn, titel, virksomhed, telefonnummer, e-mail, hjemmeside og et foto
Tabel	En lille datatabel, hvor hver celle indeholder en variabel
Vis i browseren	Den sædvanlige sætning »Se denne e-mail i din browser«
Pris	En prislinje i sig selv: prisen, en valgfri sammenligningspris med gennemstregning, størrelse, farve og justering

Opfyldning

Blok	Indstillinger
Billede + tekst	Billedplacering (venstre/højre), billedbredde 20-70 %, lodret justering, mellemrum, baggrundsfarve samt underkomponenter som billede, tekst og knap
To kolonner	Kolonneopdeling (50/50, 33/67, 67/33, 40/60, 60/40), mellemrum 0-40, lodret justering, afstand og separat indhold i venstre og højre kolonne
Kolonner	To, tre eller fire lige store kolonner, hver med sine egne blokke
Vis, hvis	Et afsnit, der kun sendes, når en betingelse for variablerne er opfyldt, f.eks. variables.total > 100 eller language == "de"

Branding

Fanen »Branding« gælder for hele layoutet:

• Farver - primærfarver, sekundærfarver, tekstfarve, baggrundsfarve for brødteksten, baggrundsfarve for indholdet
• Typografi - skrifttype til overskrifter, skrifttype til brødtekst, linjehøjde
• Layout - indstillingerne for mellemrum nedenfor

Kontrol	Hvad der ændres	Rækkevidde
Maks. bredde	Hvor meget kan indholdet af en e-mail vokse?	400-800 px
Polstring af containere	Mellemrum omkring hele indholdsområdet	0-40 px
Blokpolstring (sider)	Afstanden mellem dit indhold og venstre og højre kant	0-40 px
Blokafstand (øverst og nederst)	Afstand over og under indholdet i hver blok	0-40 px
Afstand mellem blokke	Lodret afstand mellem to blokke	0-40 px

Hold blokafstanden (øverst og nederst) lille. Blokafstanden adskiller allerede blokkene, så hvis man øger begge, opstår der store mellemrum.

Hvis du har navngivet brandfarver under Indstillinger > Brand og skrifttyper, vises de i alle farvevælgere i builderen som farveprøver under feltet, og når du klikker på en farveprøve, anvendes den pågældende farve. Farveprøven for den farve, der aktuelt er valgt i feltet, er fremhævet. Se Indstillinger.

I rullemenuen med skrifttyper finder du systemskrifttyper (Arial, Georgia, Verdana, Times New Roman, Helvetica, Trebuchet MS), et udvalg af Google-skrifttyper (Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Nunito, Raleway, Playfair Display, Merriweather, Source Sans 3, Oswald, Work Sans, DM Sans, Space Grotesk) samt eventuelle brugerdefinerede skrifttyper, du har uploadet under Indstillinger > Brand og skrifttyper.

Overskrift og sidefod

Hoved- og fodteksten er klikbare områder øverst og nederst på arbejdsfladen. Du kan enten bruge en gemt forudindstilling, så en ændring af dit brand udskifter alle layouts på én gang, eller vælge »Brugerdefineret« (kun dette layout) for en engangsændring. Se Forudindstillinger for sidehoved og sidefod.

Rich Text / HTML-tilstand

I denne tilstand fungerer Body som en enkelt editor med en knap til at skifte mellem Rich Text og HTML samt en separat knap til forhåndsvisning.

• Rich Text giver dig en velkendt formateringsværktøjslinje.
• HTML giver dig et simpelt tekstfelt - indsæt en færdigudformet e-mail, hvis du allerede har en.
• Med funktionen »Indsæt billede« kan du indsætte et billede, der er hostet, enten fra dit mediebibliotek eller via et link.

Forhåndsvisningen er skrivebeskyttet og viser Liquid-tags, som de er. For at se de faktiske værdier skal du sende en test-e-mail.

Tilslutning til Shopify Flow

Et layout er kun halvdelen af arbejdet - Shopify Flow skal levere værdierne til dine pladsholdere.

Hvert layout har et »Brug Shopify Flow«-kort, der indeholder de nøjagtige variabler (JSON), som skal indsættes i handlingen »Send transaktions-e-mail«, hvor alle nøglenavne allerede er angivet korrekt. Kopier det, indsæt det i Shopify Flow, og udskift eventuelle »<pick a Flow variable>«-pladsholdere.

Komplet gennemgang: Overførsel af data fra Shopify Flow.

Forhåndsvisning med testvariabler

Under fanen »Testvariabler« vises en liste over alle {{ variables.x }}, som appen har registreret, så du kan indtaste eksempelværdier og se, om designet vises korrekt.

For at indsætte en matrix i en Loop-blok skal du indtaste den som en JSON-matrix i denne fane.

Send en test-e-mail

Brug funktionen »Send test-e-mail« i layoutredigeringsværktøjet. Den viser layoutet, som det vil se ud i virkeligheden, og sender det via en afsender, du selv vælger, med emnelinjen »[TEST]«. Dette er den eneste måde at kontrollere, om dit Liquid-kode faktisk fungerer, da forhåndsvisningen på siden ikke udfører koden.

Når du er gået live, skal du tjekke »Historik« - en afsendelse, hvor en pladsholder ikke har genereret noget, markeres med »Tomme variabler«. Se Historik og fejlfinding.

Genbrug et design

• Mere → »Gem som skabelon« gemmer designet, så du kan bruge det som udgangspunkt næste gang. Gemte designs findes under »Mine skabeloner«, hvor der kun vises de designs, du selv har gemt.
• Mere → »Duplicate« kopierer layoutet på det samme sted.
• Mere → Funktionen »Eksport« henter filen, og funktionen »Import« på listen accepterer en fil med filtypen .zip eller .json, der tidligere er eksporteret fra appen - praktisk, når man skal flytte et design mellem butikker.

Sletning af et layout

Du kan altid slette et layout. Hvis et trin i »Shopify Flow« stadig henviser til det, vises der et mærke med teksten »Bruges i Shopify Flow« ved layoutet, og dette fremgår også af sletningsbekræftelsen - men det forhindrer dig ikke i at slette det.

Efter sletningen vil alle Shopify Flow-trin, der stadig henviser til det, give fejlen »Email template not found«, som vises i historikken. Ret disse trin mod et andet layout for at løse problemet.

Relateret

• Indholdsblokke: produkt, rabat, nedtælling, sporing og mere - produkt, rabat, nedtælling, sporing og de øvrige indholdsblokke.
• Overførsel af data fra Shopify Flow - indtastning af værdierne.
• Variabler og væske - den fulde variabelhenvisning.
• Vedhæftede filer og billeder - filer, billeder og størrelsesbegrænsninger.
• Forudindstillinger for sidehoved og sidefod - genanvendeligt branding.
• Markedsførings-e-mails og afmeldinger - hvad der adskiller et marketinglayout fra andre.
• Indstillinger - mærkefarver, brugerdefinerede skrifttyper og standardindstillinger for e-mails i hele butikken.