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’en 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 når 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 - understøtter {{ variables.xxx }} og {{ secrets.xxx }}.
• Forhåndsvisningstekst - valgfri. Den korte tekst, som de fleste indbakker viser ved siden af emnefeltet. Sørg for, at den indeholder 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 en live-forhåndsvisning af arbejdsområdet til højre. Du kan tilføje blokke ved at klikke på knappen »Tilføj sektion« eller 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-80px
Vedhæftet fil	Filvælger og en titel. Se Vedhæftede filer og billeder
Loop	Gentager en blok med Liquid + HTML over en array-variabel - brug dette til varelinjer
HTML / Kode	Rå HTML med Liquid, herunder betingelsesudtryk med »{% if %}«
QR-kode	Data (URL eller tekst, understøtter variabler), størrelse 80-300 px, 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

Branding

Fanen »Branding« gælder for hele layoutet:

• Farver - primærfarver, sekundærfarver, tekstfarver, 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 til containere	Mellemrum omkring hele indholdsområdet	0-40px
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-40px
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 dele, opstår der store mellemrum.

Hvis du har navngivet brandfarver under Indstillinger > Brand og skrifttyper, vises de som farveprøver under feltet i alle farvevælgere i byggeren, 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 »Use in«-kort** under »Shopify Flow«**, der indeholder de nøjagtige variabler (JSON), som skal indsættes i handlingen »Send Transactional Email«, hvor alle nøglenavne allerede er angivet korrekt. Kopier det, indsæt det i Shopify Flow, og erstat eventuelle »<pick a Flow variable>«-pladsholdere.

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

Forhåndsvisning med testvariabler

Under fanen »Testvariabler« vises alle de »{{ 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 på denne fane.

Send en test-e-mail

Brug funktionen »Send test-e-mail« i layouteditoren. 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-kodefjer 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 »Eksporter« henter filen, og funktionen »Importer« på listesiden accepterer en fil med endelsen .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

• 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.