Video toevoegen aan je Shopify webshop: productpagina, homepage, collectie

Video toevoegen aan je Shopify-webshop kan op drie plekken, en elke plek heeft een eigen route. Op de productpagina sleep je de video in de productmedia. Op de homepage en de collectiepagina voeg je een Video-sectie toe in de thema-editor. En als je wilt dat de video producten verkoopt en je wilt meten wat hij oplevert, plaats je een app-blok met een shoppable widget.

Deze handleiding loopt alle drie de plekken door, met de stappen, de bestandslimieten, de iPhone-valkuil en de vraag wanneer je van de standaardvideo overstapt op een widget. Ben je vooral op zoek naar het brede overzicht van shoppable video, begin dan bij shoppable video aan Shopify toevoegen en kom hier terug voor de uitvoering.

De drie plekken en de drie manieren

Voordat je gaat uploaden, is het handig te weten dat Shopify video op drie plaatsen bewaart, en dat een video op de verkeerde plek nergens verschijnt.

Productmedia is het mediavak op de productpagina in je admin. Alleen de productgalerij van je thema leest daaruit. Bestanden (onder Inhoud) is een algemene opslag; secties en app-blokken kunnen daaruit putten, maar de productgalerij niet. En externe video is een YouTube- of Vimeo-link, waarbij Shopify alleen de verwijzing opslaat.

De laatste rij verrast veel winkeliers. Dawn, Horizon en de meeste Online Store 2.0-thema's tonen op productkaarten het stilstaande voorbeeldbeeld van de video, niet de video zelf. Dat is bewust, want een collectiepagina met twintig autoplayende video's zou onwerkbaar traag zijn.

Video toevoegen aan de productpagina

Open het product in je Shopify-admin en sleep de MP4 of MOV in het mediavak naast de productfoto's. Shopify verwerkt het bestand naar meerdere formaten, en zolang dat loopt zie je een verwerkingsbadge op de miniatuur. Een clip van dertig seconden is meestal binnen een paar minuten klaar; een lange 4K-video kan langer duren.

Zodra de badge weg is, sleep je de video naar positie twee of drie. Positie één laat je bij voorkeur aan een schone productfoto, omdat dat beeld ook op productkaarten, in Google Shopping en in social previews verschijnt. Positie twee betekent dat een bezoeker op mobiel de video na één swipe ziet. Positie negen betekent dat niemand hem ziet.

De limieten voor Shopify-gehoste video zijn ruim: tot 1 GB per bestand, maximaal 10 minuten, en resolutie tot 4K. De 20 MB die je vaak leest, is de limiet voor afbeeldingen. Toch is het verstandig om ver onder de limiet te blijven. Een productclip van 15 tot 30 seconden in 1080p hoeft niet meer dan enkele tientallen megabytes te zijn, en hoe kleiner het bestand, hoe sneller hij speelt op een telefoon met een matige verbinding.

In plaats van uploaden kun je ook een YouTube- of Vimeo-link toevoegen via de optie voor toevoegen via URL. Dat werkt voor openbare en verborgen video's waarvoor insluiten is toegestaan. Het nadeel is dat een externe video geen stille autoplay ondersteunt en dat de speler het logo van YouTube meeneemt.

Hoe Dawn precies met productvideo omgaat, en waar de standaardgalerij tegen zijn grenzen aanloopt, lees je in productvideo in het Dawn-thema.

Video op de homepage

De homepage gebruikt geen productmedia. Hier voeg je een sectie toe.

Ga naar Online Store, dan Thema's, klik op Aanpassen en kies in de linkerkolom Sectie toevoegen. Dawn en Horizon hebben allebei een Video-sectie. Die accepteert een Shopify-gehoste video uit Bestanden of een YouTube- of Vimeo-link, en biedt instellingen voor een omslagbeeld, een kop, en bij Shopify-gehoste video ook de keuze voor autoplay in een lus.

Upload je video eerst onder Inhoud, Bestanden, en kies hem daarna in de sectie. Een video die je in de productmedia hebt gezet, verschijnt niet in deze lijst; je uploadt hem dan opnieuw onder Bestanden.

Voor een homepagevideo gelden andere eisen dan voor een productclip. Hij staat vaak breed, dus 16:9 in 1920x1080 is het gebruikelijke formaat, en hij speelt meestal zonder geluid als achtergrond. Wil je dat hij de hele breedte vult als banner, met tekst eroverheen, dan komt bestandsgrootte en snelheid nauw. De handleiding video banner in Shopify: formaat, grootte en snelheid gaat daar in detail op in. Voor Horizon-specifieke instellingen is er de video-sectie in het Horizon-thema.

Video op de collectiepagina

Een collectiepagina bestaat in de meeste thema's uit een banner, een filterbalk en een productraster. Video past op twee plaatsen: als sectie boven het raster, of als video in de productkaarten zelf.

De sectie boven het raster voeg je op dezelfde manier toe als op de homepage: open de collectiepagina in de thema-editor en voeg een Video-sectie toe boven het raster. Dat werkt goed voor één video die de hele collectie introduceert, bijvoorbeeld een cadeaucollectie richting Sinterklaas.

Video in de productkaarten zelf is lastiger. De kaart toont standaard het stilstaande voorbeeldbeeld van de eerste media. Wil je dat de kaart beweegt, dan moet je de kaartsjabloon van je thema aanpassen of een app-blok gebruiken. Het volledige stappenplan met de prestatiegrenzen staat in video op de Shopify-collectiepagina.

Een praktische middenweg is een app-blok onder de collectiebanner met een carrousel van drie tot zes korte video's van producten uit die collectie. Bezoekers die cadeaus vergelijken, zien dan het product in gebruik zonder eerst een productpagina te openen.

Formaat, bestandsgrootte en de iPhone-valkuil

Het meest gestelde supportvraagstuk rond video in Shopify is niet de upload, maar het afspelen op een iPhone. De video staat er, speelt op de laptop van de winkelier, en toont op de telefoon van de klant een stilstaand beeld.

Voor het formaat gelden twee vuistregels. Verticale video voor productpagina's en widgets is 9:16 in 1080x1920, hetzelfde als een Instagram Reel of TikTok. Brede video voor banners en homepagesecties is 16:9 in 1920x1080. Een verticale video in een brede sectie krijgt zwarte balken, een brede video in een verticale widget wordt afgesneden.

Exporteer in H.264 met een gematigde bitrate. Een montageprogramma dat standaard in HEVC of ProRes exporteert, levert bestanden op die Shopify wel accepteert maar die op sommige browsers niet spelen of onnodig groot zijn. Wanneer je twijfelt over het exportprofiel, is de handleiding Shopify-videolimieten en Reels-specificaties het naslagwerk.

Laadsnelheid: één regel die alles bepaalt

Video maakt een pagina niet vanzelf traag. Wat een pagina traag maakt, is video die direct bij het laden wordt opgehaald, nog voordat de bezoeker iets ziet.

Een enkele video met een posterafbeelding die pas laadt als de bezoeker scrolt, heeft nauwelijks meetbaar effect op je laadtijd. Vier autoplayende video's boven de vouw, elk van 40 MB, wel. Die trekken de bandbreedte weg van de productfoto's, de knop en de tekst die de bezoeker eerst nodig heeft.

De praktische regels zijn simpel. Laat maximaal één video boven de vouw automatisch spelen. Geef elke video een posterafbeelding, zodat er direct iets zichtbaar is. Kies lazy loading voor alles wat onder de vouw staat. En houd de bestanden klein: een productclip hoort onder de 10 MB te kunnen bij 1080p en 20 seconden.

Shopify's eigen Video-sectie laadt redelijk netjes. De productgalerij ook, omdat die pas speelt na een tik. Widgets van apps verschillen enorm, en het is de moeite waard om na installatie de laadtijd van een productpagina te meten voor en na. Wat er precies gebeurt bij een goed en een slecht gebouwde widget, staat in vertraagt een videowidget je Shopify-winkel.

Wanneer een app-widget de betere keuze is

De standaardvideo van Shopify volstaat voor één productclip in de galerij en één sfeervideo op de homepage. Er zijn vier situaties waarin je er tegenaan loopt.

Je wilt meerdere video's per pagina, bijvoorbeeld drie klantvideo's naast je eigen productclip. De galerij is daar niet voor gemaakt en de Video-sectie toont er één.

Je wilt dat de kijker vanuit de video kan kopen. Standaardvideo heeft geen producttags en geen add-to-cart in de speler.

Je wilt weten wat een video oplevert. Shopify Analytics rapporteert niets per video.

Je verkoopt in meerdere talen via Shopify Markets en wilt de knop en het label per taal aanpassen.

SwipeReel dekt die vier. De app importeert Instagram Reels en TikTok-video's en toont ze als app-blok in vier vormen: Inline, Overlay, Stacked en Stories, met carrousel- en gridlayouts. De widgets laden lazy en blokkeren het renderen van de pagina niet. Elke video draagt producttags (één product per video op het gratis plan, onbeperkt op Pro), en de analytics tonen per video de views, add-to-carts en toegewezen omzet. De widgetteksten stel je per taal in, wat voor een winkel die Nederlands en Frans verkoopt het verschil maakt. Het gratis plan geeft 25 uploads, onbeperkte views en feeds, bulk upload, vijf video's live in de winkel en 100 MB per bestand; Pro maakt uploads en live video's onbeperkt, gaat naar 500 MB per bestand, haalt de SwipeReel-branding weg en geeft eigen CSS en priority support.

Wil je eerst Instagram Reels op je site zetten en pas later nadenken over tags, dan is Instagram Reels op je website zetten de kortere route.

Controleer dit voordat de video live gaat

Een video die in de admin staat, is nog geen video die verkoopt. Loop deze lijst door op een echte telefoon, in een privévenster, voordat je de pagina deelt.

Als de video door deze lijst komt en toch niet verschijnt, ligt het bijna altijd aan de plek waar hij staat of aan een thema dat over afbeeldingen loopt in plaats van over media. De Engelstalige gids Shopify product video not showing loopt die zeven oorzaken in volgorde af.