Opret et e-mail-layout

Et e-mail-layout er selve e-mailen: emnelinjen, designet og eventuelle vedhæftede filer. Shopify Flow-handlingen 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 - understøtter {{ 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. Detaljer i 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 blokke, der kan trækkes og slippes
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 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	Shopify Flow-JSON-kodestykket, 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 / Oversigt), 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 {% if %}-betingelser
QR-kode	Data (URL eller tekst, understøtter variabler), størrelse 80-300 px, justering
Tabel över varelinjer	Ordrens varer fra en listevariabel, med rækker for billede, antal, pris og samlet beløb

Handels- og indholdsblokke (nyt i 1.17; se Indholdsblokke: produkt, rabat, nedtælling, sporing og mere for en detaljeret beskrivelse af 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
Rabatkode	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 etiket 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, stilling, 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	Billedets placering (venstre/højre), billedets bredde 20-70 %, lodret justering, mellemrum, baggrundsfarve samt underkomponenter som billeder, tekst og knapper
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, for eksempel 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 - overskriftsskrifttype, brødtekstskrifttype, 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 som farvefelter under feltet i alle farvevælgere i builderen, og når du klikker på et farvefelt, anvendes den pågældende farve. Farvefeltet 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å lærredet. 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 kort med titlen »Brug i 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 udskift eventuelle pladsholdere af typen <pick a Flow variable>.

Du vælger layoutet for hvert trin i Shopify Flow på handlingskonfigurationssiden, hvor der vises et eksempel på, hvordan det ser ud, når det er udfyldt med testvariablerne. Tydelige navne og realistiske testvariabler gør det nemt at finde det rigtige layout her.

Fuldstændig vejledning: Overførsel af data fra Shopify Flow.

Forhåndsvisning med testvariabler

Under fanen Testvariabler vises alle {{ variables.x }}, som appen har fundet, 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 layoutredigeringsværktøjet. Den viser layoutet, som det vil se ud i virkeligheden, og sender det via en afsender, du selv vælger, med emnefeltet med præfikset [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 Eksporter downloader filen, og funktionen Importer på listesiden accepterer en .zip- eller .json-fil, 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 Shopify Flow-trin stadig henviser til det, vises der et mærke med teksten Bruges i Shopify Flow på layoutet, og det 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 den, 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 - angivelse af værdierne.
• Variabler og væske - den fulde variabeloversigt.
• 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 - brandfarver, brugerdefinerede skrifttyper og standardindstillinger for e-mails i hele butikken.