2026-08-25

Bestand uploaden op Shopify productpagina: logo en artwork zonder extra SKU’s

Wie textiel bedrukt, borduurt, een stempel laat graveren of een bord print, heeft één ding nodig dat Shopify niet als variant kent: een bestand. Een logo, een vector, een foto, een PDF met drukinstructies. Native variants zijn SKU’s — Size, Color, Style — geen bijlagen. Toch willen klanten bestand uploaden op Shopify productpagina en daarna gewoon afrekenen, zonder een mailtje naar je inbox.

Dit stuk legt uit waarom een `<input type="file">` in je thema zelden houdt wat het belooft, hoe de actuele Shopify-limieten (3 options / 2048 variants) daar niets aan veranderen, en hoe je met Options Price Calculator een uploadveld, validatie en een live handling fee op dezelfde productpagina zet.

Waarom een bestand geen variant is

Volgens Shopify Help Adding variants mag een product maximaal drie options hebben en tot 2048 variants. Die cap ging in oktober 2025 van 100 naar 2048 (changelog). Dat helpt shops met een echte maat/kleur-matrix. Het helpt niet als de klant een PNG van 2 MB meestuurt.

Een bestand is geen option value. Je kunt geen variant “logo-van-deze-klant” aanmaken, en je wilt dat ook niet: voorraad, feeds en kortingen horen bij producten die je op voorraad legt, niet bij unieke artwork. Extra keuzes zoals plaats van de print, aantal kleuren of “vectoriseren” vreten bovendien die drie native options op — hetzelfde plafond waar we eerder over meer dan 3 productopties schreven.

Kortom: de catalogus blijft schoon als het bestand *naast* de SKU leeft, niet erin.

Wat shops nu in Liquid proberen

1. File input als line item property

Het klassieke recept is een veld `properties[Artwork]` van type file in `main-product.liquid`. Bij een gewone HTML-POST met `enctype="multipart/form-data"` kwam het bestand vroeger soms op de order. Moderne Online Store 2.0-thema’s (Dawn en afgeleiden) voegen toe via Ajax. Threads als How to send image file in Shopify add to cart form en Line Item Properties attach images or data laten zien wat er dan gebeurt: `serialize()` of JSON-cart-calls kunnen geen File-object meenemen. Op de order blijft hooguit de bestandsnaam of `C:\fakepath\…` over — zonder bytes.

Zelfs als de upload wél aankomt, verandert de prijs niet. Line item properties zijn tekst op de regel. We behandelden dat mechanisme in Shopify line item properties wijzigen geen prijs: een extra bestand of een zwaardere PDF kost evenveel als geen bestand, tenzij je er een calculator naast zet.

2. “Mail ons je bestand na checkout”

Werkt, tot je volume krijgt. Fulfillment zoekt dan in de mailbox, koppelt te laat, of produceert het verkeerde logo. Klanten haken af als ze eerst moeten betalen en daarna nog iets moeten sturen.

3. Een extra product “ontwerpkosten”

Een losse SKU van €15 die de klant “er bij moet gooien”. Dat is foutgevoelig, verschijnt niet bij het juiste artikel, en schaalt niet als de toeslag per extra bestand moet groeien.

File upload als productoptie, met formule

Options Price Calculator is een Built for Shopify-app met onbeperkte velden op de productpagina, waaronder File upload. De File Upload-documentatie beschrijft wat je instelt:

Label dat de klant begrijpt (“Upload je drukbestand (PDF of PNG)”).
Key (technische id, bijvoorbeeld `design_file`) voor de formule.
Required als er zonder bestand niet besteld mag worden.
Upload mode: dropzone (sleep-en-neerzetten, logisch bij print) of een compacte knop als de upload optioneel is.
Bestandstypen: o.a. JPG/PNG/WebP/GIF/SVG, PDF/DOCX, video en audio — je vinkt aan wat je werkplaats aankan.
Max totale grootte (voorbeeld in de docs: 50 MB) met een vertaalbare foutmelding.
Max files: 1 tot 5.
Numeric value: die waarde × het aantal geüploade bestanden gaat de formule in. Geen bestand → `0`. Twee bestanden bij waarde 15 → 30.

Een handling fee volgens de formulevoorbeelden:

``` product_price + file_upload ```

`file_upload` is hier de key van het veld. De variabelen-docs bevestigen: bij File Upload telt de geconfigureerde numeric value, vermenigvuldigd met het aantal bestanden. De prijs op de pagina beweegt terwijl de klant uploadt — geen offerte-rondje.

Wil je een extra toeslag alleen als iemand “logo nastekenen” aanvinkt, of een minimumbedrag als er wél een bestand is maar de basisprijs te laag is, dan is dat Premium conditional pricing. Live preview van het ontwerp op de productfoto is Premium Product Personalizer. File upload zelf zit in de opties van de listing; je hebt daar geen Premium-plan voor nodig.

De calculator hang je per variant als dat wél een SKU-verschil is (bijvoorbeeld katoen versus polyester). Voorraad blijft op die echte varianten, niet op elk logo.

Voorbeeld: borduurlogo op een hoodie

Stel: je verkoopt hoodies. Native variants: maat en kleur (twee van de drie options). De klant moet een logo meesturen, mag optioneel een tweede bestand met plaatsingsinstructies toevoegen, en jij rekent €12,50 handling per bestand.

In OPC:

File Upload, key `logo_files`, max files 2, types PNG/PDF/SVG, required aan, numeric value `12.50`, dropzone.
Optioneel: een Rich Text-blok erboven met “Max. 10 MB totaal, vector bij voorkeur”.
Formule: `product_price + logo_files`.
Link de calculator aan de hoodie-varianten.

De klant kiest M / Navy, sleept `logo.svg` en `plaatsing.pdf` in de dropzone, ziet €25 extra op de prijs, en checkt uit. Jij ziet de bestanden bij de orderregel. Via productdata in de orderbevestiging kun je die extra data ook in de mail zetten, zodat productie niet in de admin hoeft te zoeken.

Hetzelfde patroon werkt voor stempelplaten, gevelreclame, verpakkingsdruk of een foto op glas. Combineer gerust met een getalveld voor afmeting; de uploadtoeslag blijft een term in dezelfde formule. Voor tekst-plus-toeslag zonder bestand, zie gravering en personalisatie.

Wat je nodig hebt om te starten

Installeer Options Price Calculator via de App Store (installatie). Free: 20 uses (op een develop-store altijd gratis). Starter ($9.99/mo) geeft onbeperkte opties, formule builder en meertalige labels. Premium ($14.99/mo) voegt conditional logic, font picker, live preview en price breakdown toe.
Maak een calculator: File Upload + eventuele extra velden, daarna de formule.
Koppel de calculator aan de juiste producten of varianten.
Zet het app block op het producttemplate, bij voorkeur onder de prijs en boven Add to cart (theme app extension). Thema’s verschillen; gebruik zo nodig de selector picker voor prijs en knop.
Test een echte upload, inclusief een te groot bestand en een verboden type, en controleer order + mail.

Server-side price validation (in de app-instellingen) is de safety-net: de berekende prijs wordt niet alleen in de browser vertrouwd.

Tot slot

Bestand uploaden op Shopify productpagina is geen vierde variant-optie en geen Liquid-hack die Ajax-carts overleeft. Houd SKU’s voor voorraad. Zet het bestand in een uploadveld, laat de formule de handling fee optellen, en laat de klant in één flow afrekenen.

Installeer Options Price Calculator en koppel een File Upload-veld aan je eerste personaliseerbare product.