”Kommer det här verkligen passa mig?” är frågan som fyller inkorgen, drar ut på köpen och i tysthet driver returer. Och det värsta är att du svarar på den en skärmdump, en storlekstabell-länk och en fram-och-tillbaka-konversation i taget.
Den här automatiseringen för virtual try-on images träffar e-handelsansvariga och butiksägare först, men marknadsteam märker det också när konverteringen stannar av. I stället för gissningar laddar kunden upp ett foto och får tillbaka en realistisk provbild direkt på produktsidan, på några minuter.
Nedan ser du hur flödet körs i n8n, vad det ersätter och vad du behöver för att lansera det utan att bygga en egen backend.
Så fungerar automatiseringen
Se hur detta löser problemet:
n8n Workflow Template: WooCommerce + Fal.run: virtuella prova-på-bilder direkt
flowchart LR
subgraph sg0["On form submission Flow"]
direction LR
n0["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/form.svg' width='40' height='40' /></div><br/>On form submission"]
n1@{ icon: "mdi:cog", form: "rounded", label: "FTP", pos: "b", h: 48 }
n2["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>Get Url image"]
n3["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>Get status"]
n4@{ icon: "mdi:swap-horizontal", form: "rounded", label: "Completed?", pos: "b", h: 48 }
n5["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>Create Image"]
n6["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/form.svg' width='40' height='40' /></div><br/>Form"]
n7["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>Get image"]
n8@{ icon: "mdi:cog", form: "rounded", label: "Wait 10 sec.", pos: "b", h: 48 }
n1 --> n5
n7 --> n6
n4 --> n2
n4 --> n8
n3 --> n4
n5 --> n8
n8 --> n3
n2 --> n7
n0 --> n1
end
%% Styling
classDef trigger fill:#e8f5e9,stroke:#388e3c,stroke-width:2px
classDef ai fill:#e3f2fd,stroke:#1976d2,stroke-width:2px
classDef aiModel fill:#e8eaf6,stroke:#3f51b5,stroke-width:2px
classDef decision fill:#fff8e1,stroke:#f9a825,stroke-width:2px
classDef database fill:#fce4ec,stroke:#c2185b,stroke-width:2px
classDef api fill:#fff3e0,stroke:#e65100,stroke-width:2px
classDef code fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
classDef disabled stroke-dasharray: 5 5,opacity: 0.5
class n0 trigger
class n4 decision
class n2,n3,n5,n7 api
classDef customIcon fill:none,stroke:none
class n0,n2,n3,n5,n6,n7 customIcon
Utmaningen: kunder kan inte visualisera passform
Storlekstabeller hjälper, men de tar inte bort osäkerheten. Kunden undrar fortfarande: hur kommer det här se ut på mig, med mina proportioner, min hållning, min belysning, min verklighet. Så de tvekar, öppnar en ny flik, kanske skickar ett DM, kanske överger varukorgen. Om de ändå köper dyker nästa problem upp senare som en retur som egentligen inte handlade om produktkvalitet, utan om osäkerhet. Multiplicera det med varje produktsida och varje kampanj du kör, så blir friktionen en tillväxtskatt.
Det går snabbt. Här är var upplevelsen oftast faller isär.
- Kunder ställer samma passformsfrågor om och om igen eftersom sidan inte kan ”visa” det de menar.
- Returerna ökar på produkter där utseende och fall spelar roll, och du får stå för frakt och tiden för återinläggning i lager.
- Även en enkel ”prova på”-upplevelse blir ofta ett utvecklingsprojekt som fastnar i en backlog i månader.
- Manuella supportsvare drar timmar varje vecka, och svaren känns ändå inte personliga för kunden.
Lösningen: fotouppladdning till omedelbar provbild (ingen egen backend)
Det här flödet lägger till en virtuell provningsprocess i din butik med n8n som ”limmet”. Kunden klickar på en Prova-knapp, laddar upp ett foto på sig själv, och din produktbild-URL skickas in tyst i bakgrunden (som en query-parameter). n8n lagrar kundens foto tillfälligt på din FTP-server och skickar sedan båda bild-URL:erna till Fal.run för att generera provresultatet. Eftersom AI-bildgenerering kan ta en stund kontrollerar flödet status i en loop med en kort väntan i stället för att låsa upplevelsen. När Fal.run är klart hämtar n8n den slutliga bild-URL:en och omdirigerar kunden till den genererade mockupen, så att de ser resultatet utan att behöva krångla med nedladdningar eller mejla supporten.
Flödet startar med en formulärinlämning. Därifrån laddar det upp kundbilden, startar bildgenereringen i Fal.run och pollar tills status är markerad som completed. Till sist omdirigerar det kunden till den färdiga provbilden.
Vad som förändras: före vs. efter
| Det här tar bort | Effekten du ser |
|---|---|
|
|
Effekt i verkligheten
Säg att din butik får 20 passformsrelaterade meddelanden om dagen, och varje svar tar kanske 6 minuter när du väl har plockat fram produktbilder och skrivit ett vettigt svar. Det är cirka 2 timmar per dag. Med det här flödet hjälper kunden sig själv: ungefär en minut för att ladda upp sitt foto, sedan väntar automatiseringen i bakgrunden (kontrollerar var 10:e sekund) tills provbilden är klar och omdirigerar dem till den. Supportbelastningen sjunker och teamet kan fokusera på riktiga ärenden, inte grundläggande tryggande.
Krav
- n8n-instans (prova n8n Cloud gratis)
- Self-hosting-alternativ om du föredrar det (Hostinger fungerar bra)
- WooCommerce för att lägga in Prova-knappen.
- Fal.run för att generera provbilden.
- FTP-server eller S3-liknande lagring för att tillfälligt lagra uppladdningar.
- Fal.run API-nyckel (hämta den i din Fal.run-kontopanel).
Svårighetsnivå: Medel. Du kopierar en inbäddningslänk, kopplar in autentiseringsuppgifter och testar några exempelinlämningar.
Behöver du hjälp att implementera detta? Prata med en automationsspecialist (gratis 15-minuters konsultation).
Flödet steg för steg
En kund skickar in prova-formuläret. Formuläret samlar in deras namn, deras foto (”Jag”) och ett dolt ”Produkt”-värde som innehåller din produktbild-URL från sidan de klickade på.
Kundbilden lagras tillfälligt. n8n laddar upp fotot till din FTP-lagring med ett tidsstämplat filnamn så att du slipper krockar när flera kunder skickar in ungefär samtidigt.
Fal.run genererar provbilden asynkront. n8n skickar båda bild-URL:erna till Fal.run och kontrollerar sedan status i en loop med 10 sekunders väntan mellan kontrollerna tills jobbet är klart.
Resultatet levereras som en enkel omdirigering. När Fal.run ger dig den färdiga bild-URL:en omdirigerar flödet kunden till resultatet, vilket håller upplevelsen enkel och undviker komplicerade ändringar i frontenden.
Du kan enkelt ändra formulärfälten för att fånga storlek eller färgvarianter efter behov. Se hela implementationsguiden nedan för anpassningsalternativ.
Steg-för-steg-guide för implementation
Steg 1: Konfigurera formulärtriggern
Det här arbetsflödet startar när en användare skickar in formuläret för virtuell prova-på, inklusive sin bild och en dold produkt-URL.
- Lägg till och öppna Form Intake Trigger.
- Ställ in Form Title till
Virtual Try On. - Ställ in Form Description till
Upload your image and virtually try on the dress. - Säkerställ att formulärfälten inkluderar Me som ett obligatoriskt filfält med Accept File Types inställt på
.jpg,.png, samt ett dolt Product-fält för plaggets URL.
Steg 2: Anslut FTP-uppladdningen
Den uppladdade användarbilden lagras på er FTP-server innan den skickas till prova-på-API:et.
- Lägg till Upload to FTP och anslut den till Form Intake Trigger.
- Ställ in Operation till
upload. - Ställ in Binary Property Name till
Me. - Ställ in Path till
=/eolianpenthouse.dev.eureweb.it/test/{{$now.format('yyyyyyLLddHHii')}}-{{ $json.Me[0].filename }}. - Credential Required: Anslut era
ftp-uppgifter i Upload to FTP.
Steg 3: Sätt upp prova-på-bearbetning och statusloop
Det här avsnittet skickar begäran till API:et, väntar, kontrollerar status och loopar tills resultatet är klart.
- Lägg till Generate Tryon Image och anslut den efter Upload to FTP.
- Ställ in URL till
https://queue.fal.run/fal-ai/kling/v1-5/kolors-virtual-try-onoch Method tillPOST. - Ställ in JSON Body till
={ "human_image_url": "https://eolianpenthouse.dev.eureweb.it/test/{{$now.format('yyyyyyLLddHHii')}}-{{ $json.Me[0].filename }}", "garment_image_url": "{{ $('Form Intake Trigger').item.json.Product }}" }. - Credential Required: Anslut era
httpHeaderAuth-uppgifter i Generate Tryon Image. - Lägg till Delay 10 Seconds med Amount inställt på
10, och anslut den sedan till Check Request Status. - I Check Request Status, ställ in URL till
=https://queue.fal.run/fal-ai/kling/requests/{{ $('Generate Tryon Image').item.json.request_id }}/status. - Credential Required: Anslut era
httpHeaderAuth-uppgifter i Check Request Status. - Konfigurera Completion Check så att den utvärderar att
={{ $json.status }}är lika medCOMPLETED. - Anslut true-utgången från Completion Check till Fetch Image URL, och false-utgången tillbaka till Delay 10 Seconds för att skapa polling-loopen.
⚠️ Vanlig fallgrop: Om loopen aldrig avslutas, verifiera att status-svaret i Check Request Status innehåller COMPLETED exakt och matchar versaler/gemener.
Steg 4: Konfigurera hämtning av resultat och omdirigering av formulär
När processen är klar hämtar arbetsflödet resultatet och omdirigerar formuläret till den slutliga bild-URL:en.
- I Fetch Image URL, ställ in URL till
=https://queue.fal.run/fal-ai/kling/requests/{{ $json.request_id }}. - Credential Required: Anslut era
httpHeaderAuth-uppgifter i Fetch Image URL. - Ställ in Retrieve Result Image URL till
={{ $json.image.url }}och anslut den efter Fetch Image URL. - I Return Form Redirect, ställ in Operation till
completion, Respond With tillredirectoch Redirect URL till={{ $json.image.url }}.
Steg 5: Testa och aktivera ert arbetsflöde
Kör ett fullständigt inskickningstest för att bekräfta att bilden genereras och att formuläret omdirigerar korrekt.
- Klicka på Execute Workflow och skicka in ett testformulär via Form Intake Trigger med en JPG- eller PNG-fil.
- Verifiera att Upload to FTP lagrar filen på den förväntade sökvägen och att Generate Tryon Image returnerar ett
request_id. - Bekräfta att polling-loopen slutförs och att Fetch Image URL ger ut ett
image.url. - Säkerställ att Return Form Redirect omdirigerar användaren till den slutliga bild-URL:en.
- Växla arbetsflödet till Active för användning i produktion.
Se upp med
- Fal.run-autentisering kan löpa ut eller kräva specifika behörigheter. Om något slutar fungera, kontrollera Fal.run API-nyckeln i n8n Credentials och bekräfta att Authorization-headern fortfarande är korrekt satt.
- Om du använder Wait-noder eller extern rendering varierar processtiderna. Öka väntetiden om efterföljande noder fallerar på tomma svar.
- FTP-uppladdningar misslyckas oftare än man tror på grund av mappbehörigheter eller felaktig mappning av publik URL. Bekräfta att den uppladdade ”Jag”-bilden är publikt åtkomlig på exakt den URL du skickar in till Fal.run.
Vanliga frågor
Oftast på ungefär en timme om dina FTP- och Fal.run-konton är klara.
Ja. Du kopplar ihop konton, klistrar in en formulärlänk på din sajt och kör några testinlämningar för att bekräfta att omdirigeringarna fungerar.
Ja. n8n har ett gratis self-hosted-alternativ och en gratis provperiod på n8n Cloud. Cloud-planer börjar på 20 USD/månad för högre volym. Du behöver också räkna med Fal.run API-kostnader baserat på hur många provningar kunderna genererar.
Två alternativ: n8n Cloud (hanterat, enklast att komma igång) eller self-hosting på en VPS. För self-hosting är Hostinger VPS prisvärd och hanterar n8n bra. Self-hosting ger obegränsade körningar men kräver grundläggande serverhantering.
Du kan behålla kärnflödet och byta ut delen ”Upload to FTP” mot ett annat lagringsalternativ, så länge det ger en publik bild-URL till Fal.run. Många butiker lägger till extra fält i formuläret (storlek, färg, passformspreferens) och skickar dem in i Generate Tryon Image-begäran så att resultaten matchar varianter. Om du vill att resultatet ska visas på den ursprungliga produktsidan i stället för via en omdirigering kan du ändra sista steget ”Return Form Redirect” till att skicka URL:en till din butik via en webhook eller lagra den i Google Sheets så att ditt tema kan hämta den.
Oftast beror det på en ogiltig eller saknad Authorization-header, eller att bild-URL:erna du skickar inte är publikt åtkomliga från Fal.run.
På n8n Cloud beror kapaciteten på din plans månatliga körningar, och varje provning förbrukar vanligtvis flera körningar på grund av statuskontroll-loopen. Om du self-hostar finns ingen körningsgräns, men du begränsas av serverresurser och hur många samtidiga Fal.run-jobb du startar. I praktiken kan de flesta små butiker köra detta utan problem och sedan höja wait/poll-inställningarna om du ser timeouts vid hög belastning.
Ofta, ja, eftersom det här flödet bygger på att loopa och vänta på att ett externt AI-jobb ska bli klart, och n8n hanterar den typen av kontrolllogik snyggt. Zapier och Make kan göra det, men det blir ofta pilligt och dyrt när du lägger till polling, förgreningar och retries. n8n ger dig också möjligheten att self-hosta, vilket är en stor grej när användningen ökar. Om du vill ha enklast möjliga setup och bara behöver en grundläggande tvåstegsintegration kan Zapier fortfarande fungera bra. Prata med en automationsspecialist om du vill ha en snabb rekommendation för din butik.
När detta väl är live får kunder trygghet utan att behöva vänta på att du ska skriva. Och ärligt talat är det hela poängen: flödet tar hand om den repetitiva passformsosäkerheten så att du kan lägga tid på tillväxt.
Kontakta oss
Hör av dig, så diskuterar vi hur just din verksamhet kan dra nytta av alla fantastiska möjligheter som AI skapar.