Lägg till video på Shopify-produktsidan, startsidan och kollektioner

Du kan lägga till video i Shopify på tre sätt: som produktmedia i produktens galleri, som en videosektion i temat (startsidan, kollektioner eller valfri sida) eller som ett app-block från en shoppable video-app. Vilket du väljer beror på var videon ska synas, om den ska spela automatiskt och om kunden ska kunna köpa direkt ur den.

Den här guiden går igenom alla tre i den ordning de flesta butiker behöver dem: produktsidan först, sedan startsidan och till sist kollektionssidorna. Du får de exakta klickvägarna i Shopify-adminen, formatkraven som gör att videon faktiskt spelar på iPhone, och en tabell som visar vilket sätt som passar vilken placering.

Om du fortfarande funderar på vad shoppable video egentligen innebär börjar du bäst med guiden till shoppable video på Shopify. Är du redan klar med varför och bara vill ha hur, fortsätt här.

Tre sätt att lägga till video i Shopify

Shopify har inget enda videoläge. Var videon hamnar avgörs av var du laddar upp den, och de tre platserna pratar inte med varandra.

• Produktmedia. Du laddar upp videon direkt på produkten i adminen. Den hamnar i produktgalleriet bredvid bilderna och följer med produkten överallt där galleriet visas, inklusive snabbvisning och rekommendationer.
• Temats videosektion. Dawn, Horizon och alla Online Store 2.0-teman har ett avsnitt som heter Video. Det tar en Shopify-hostad fil från Innehåll och Filer, eller en YouTube- eller Vimeo-länk, och kan placeras på startsidan, en kollektionssida eller vilken sida som helst.
• App-block. En shoppable video-app lägger till ett block i temaredigeraren. Blocket hanterar uppspelning, lazy loading och produkttaggar själv, och du placerar det där du vill precis som ett vanligt avsnitt.

Alla tre fungerar utan att du rör en rad kod. Skillnaden ligger i vad de kan göra: galleriet spelar sällan automatiskt, videosektionen kan inte tagga produkter, och app-blocket kräver en app.

Lägg till video på produktsidan

Den snabbaste vägen är att öppna produkten i adminen och dra in videofilen i mediarutan. Så här gör du steg för steg.

1. Gå till Produkter och öppna produkten.
2. Under Media klickar du på Ladda upp nytt eller drar filen direkt i rutan. Shopify tar MP4 och MOV.
3. Vänta tills bearbetningsmarkeringen försvinner. Videon syns inte i butiken förrän Shopify har konverterat den till de versioner som servas till olika enheter.
4. Dra videon till position två eller tre i galleriet. Position ett bör vara en ren produktbild, eftersom den används på kollektionskort, i sökresultat och i delningar på sociala medier.

Vill du använda en YouTube- eller Vimeo-video väljer du Lägg till från URL i samma meny. Videon måste vara offentlig eller olistad och tillåta inbäddning, annars visas en tom ruta i butiken. Klistra in den vanliga watch-adressen, inte en Shorts-, spellist- eller kanallänk.

Hur videon sedan visas beror på temat. Dawn visar en stillbild med en spelknapp och spelar när kunden trycker. Horizon har en inställning per block som kan slå på autoplay. Om ditt tema är äldre eller specialbyggt kan galleriet loopa över product.images i stället för product.media, och då visas videon inte alls, hur många gånger du än laddar upp den. Felsökningen för det fallet finns i guiden om produktvideo som inte visas.

Har produkten varianter kan du koppla en bild till varje variant, men inte en video. Videon ligger kvar i galleriet oavsett vilken variant kunden väljer, så spela in den så att den fungerar för alla färger och storlekar.

Lägg till video på startsidan

Startsidan är där de flesta butiker vill ha en rörlig hero, och där gör temats videosektion jobbet bäst.

1. Gå till Webbutik, Teman och klicka på Anpassa på det aktiva temat.
2. Välj Startsida i sidväljaren högst upp.
3. Klicka på Lägg till avsnitt i vänsterspalten och välj Video.
4. Välj en fil från Innehåll och Filer, eller klistra in en YouTube- eller Vimeo-länk.
5. Ställ in omslagsbild, rubrik och om videon ska spela automatiskt.
6. Dra avsnittet till rätt plats i listan och klicka på Spara.

Videosektionen i Dawn och Horizon renderar en riktig video-tagg med muted, loop och playsinline när du slår på autoplay, vilket är det som krävs för att Safari på iPhone ska spela den utan att kunden trycker. Slår du av autoplay visas omslagsbilden och en spelknapp i stället.

Tänk på tyngden. En hero-video som laddas överst på startsidan påverkar mätvärdet Largest Contentful Paint direkt, eftersom den är det största elementet i vyn. Håll filen kort (under 15 sekunder), komprimerad och utan ljudspår. Rekommendationer för storlek och format per placering finns i guiden till videostorlek och format för Shopify, och en djupare genomgång av just hero-banners i guiden om videobanner i Shopify.

Vill du ha flera korta klipp i rad på startsidan, till exempel Reels från ditt Instagram-konto eller kundvideor, passar ett app-block med karusell- eller rutnätslayout bättre än en enda videosektion. Det tar vi upp längre ner.

Lägg till video på kollektionssidor

Kollektionssidan har två lägen för video, och de förväxlas ofta i supportärenden.

Det första är själva produktkorten. I Dawn, Horizon och de flesta OS 2.0-teman visar produktkortet en stillbild av den första median, även om det är en video. Det är avsiktligt, eftersom en kollektionssida med tjugo autoplayande videor skulle bli tung och kortmarkeringen delas med sökresultat och varukorgen. Vill du ha rörliga kort krävs en mallredigering, och den beskrivs i guiden om video på kollektionssidan.

Det andra är avsnitt runt rutnätet. Kollektionsmallen kan ta avsnitt precis som startsidan.

1. I temaredigeraren väljer du Kollektioner och sedan Standardkollektion i sidväljaren.
2. Klicka på Lägg till avsnitt och välj Video, eller ett app-block om du har en videoapp installerad.
3. Placera det ovanför produktrutnätet som en kampanjbanner, eller under rutnätet som en samling kundvideor.

Observera att ändringen gäller alla kollektioner som använder samma mall. Vill du ha en video bara på Black Week-kollektionen skapar du en ny mall (Kollektioner, Skapa mall) och tilldelar den kollektionen den mallen i adminen. Då kan du också byta ut videon efter kampanjen utan att röra de andra kollektionerna.

Lägg till video som app-block

Ett app-block är rätt väg när videon ska göra mer än att spela: tagga produkter, öppna lägg-i-varukorg utan att lämna sidan, visa flera klipp i en karusell eller mäta vilken video som faktiskt säljer.

Så funkar det i praktiken, med SwipeReel som exempel.

1. Installera appen från Shopify App Store.
2. Importera videor från Instagram Reels eller TikTok, eller ladda upp egna filer. Massuppladdning ingår i gratisplanen.
3. Tagga en eller flera produkter i varje video. Gratisplanen tar en produkt per video, Pro obegränsat.
4. Öppna temaredigeraren, klicka på Lägg till avsnitt eller Lägg till block, och välj widgeten under Appar.
5. Välj layout: Inline, Overlay, Stacked eller Stories, med karusell eller rutnät som visningsläge.

Widgeten laddar lazy, alltså först när den närmar sig kundens skärm, och den blockerar inte renderingen av resten av sidan. Den fungerar likadant på Dawn, Horizon och ett specialbyggt tema eftersom den är ett theme app extension-block och inte en mallredigering, vilket också betyder att den överlever temauppdateringar.

Skillnaden mot temats videosektion är också att widgeten hanterar mobilautoplay själv. Du slipper tänka på H.264, muted och playsinline, vilket är där de flesta egenbyggda lösningar går sönder.

Säljer du till både Sverige och Norge via Shopify Markets kan widgettexterna (knappar, etiketter) visas på flera språk, så att en norsk kund ser norska knappar i samma widget som en svensk kund ser svenska. Videorna själva är samma, och det är ofta poängen: en Reel utan pålagt tal fungerar i hela Norden.

Format och filstorlek som fungerar överallt

Oavsett vilket av de tre sätten du väljer finns det en gemensam nämnare: formatet avgör om videon spelar på iPhone.

• Codec. H.264 i en MP4-container. Safari på iOS spelar inte VP9 eller AV1 pålitligt, och HEVC-filer direkt från iPhone-kameran behöver ofta konverteras innan de fungerar i alla webbläsare.
• Bildförhållande. 9:16 (1080x1920) för Reels och TikToks, 16:9 för hero-banners, 1:1 eller 4:5 om videon ska sitta i produktgalleriet bredvid kvadratiska bilder.
• Längd. Under 15 sekunder för banners, 15 till 60 sekunder för produktdemonstrationer och kundvideor.
• Ljud. Autoplay kräver att videon är tyst. Har filen ett ljudspår spelas den ändå med muted, men du sparar filstorlek på att ta bort spåret helt om ingen ändå hör det.

Filstorleken bör hållas nere även om Shopify tillåter upp till 1 GB. En 30 sekunder lång vertikal video i H.264 med rimlig bitrate landar ofta mellan 5 och 15 MB, vilket är gott och väl inom de 100 MB per fil som SwipeReels gratisplan tar och de 500 MB som Pro tar.

Autoplay på mobil: vad som krävs

Den vanligaste supportfrågan efter att någon lagt till video är varför den inte spelar på telefonen.

Svaret är nästan alltid attribut. Alla mobilwebbläsare blockerar autoplay med ljud. Safari på iOS kräver dessutom att video-taggen har både muted och playsinline, annars visar den bara första bildrutan med en spelknapp. Temats videosektion sätter dessa själv när autoplay är på. Produktgalleriet i Dawn sätter dem inte, eftersom galleriet är byggt för tryck-för-att-spela.

Lågenergiläge på iPhone pausar dessutom all autoplay oavsett attribut, så testa aldrig med lågenergiläge på och tro att butiken är trasig. Hela felsökningen, inklusive vad du gör åt Liquid-koden i ett äldre tema, finns i guiden om autoplay-video på produktsidan.

Vanliga fel när du lägger till video

Några fel dyker upp om och om igen, och de flesta har en enkel förklaring.

Videon syns i adminen men inte i butiken. Nästan alltid bearbetning som inte är klar, eller att filen ligger i Innehåll och Filer i stället för på produkten. Galleriet läser bara produktmedia.

Videon visas som en bild på kollektionssidan. Förväntat beteende. Produktkortet visar stillbilden, och det är därför första bildrutan i din video bör se ut som en produktbild.

YouTube-länken ger en svart ruta. Videon är privat, inbäddning är avstängd eller du har klistrat in en Shorts- eller spellisteadress i stället för en vanlig watch-adress.

Videon spelar på datorn men inte på mobilen. Saknade muted- och playsinline-attribut, eller lågenergiläge. Ibland är det en annan app, till exempel en galleriapp som bygger om galleriet från bildlistan och tappar videon på vägen.

Sidan blev långsam. Videon laddas överst utan lazy loading, eller filen är onödigt stor. Flytta den under vecket, komprimera om, eller använd en widget som laddar lazy.

Vilket sätt ska du välja

Använd produktmedia när videon tillhör en enda produkt och kunden gärna får trycka för att spela. Det är gratis, inbyggt och kräver inget underhåll, och det är rätt plats för ett kort klipp som visar produkten i användning.

Använd temats videosektion för en hero på startsidan eller en kampanjvideo ovanför en kollektion. Den spelar automatiskt, laddas som en del av temat och kräver ingen app. Nackdelen är att den bara tar en video åt gången och inte kan koppla den till en produkt.

Använd ett app-block när du vill visa flera klipp, återanvända Reels och TikToks, tagga produkter så att kunden kan köpa direkt ur videon, eller se vilken video som gav intäkt. Det är den enda av de tre vägarna som ger dig analys per video, och den enda som fungerar likadant på alla teman.

Många butiker kör alla tre samtidigt: en produktvideo i galleriet, en hero på startsidan och en widget med kundvideor under produktbeskrivningen. Exempel på hur det ser ut i skarpa butiker finns i samlingen med shoppable video-exempel, och när du vill ha fler kundvideor att fylla widgeten med finns guiden om UGC-innehåll för webbutiker.