Das Wichtigste in Kürze
- Shopify hat standardmäßig kein Datei-Upload-Feld im Kontaktformular.
- Für Uploads bei der Produktanpassung (eigenes Logo, Design-Datei) nutzt du die Line Item Properties von Shopify mit einem Datei-Input.
- Für Datei-Uploads im Kontaktformular (Kaufbeleg, Referenzbilder) verwendest du eine Formular-App, die Datei-Uploads unterstützt.
- Hulk Form Builder und Jotform unterstützen beide Datei-Uploads mit Cloud-Speicher.
Shopify hat kein eingebautes Datei-Upload-Feld. Für Produktbestellungen fügst du dem Produktformular ein Datei-Input mit dem Namen properties[...] hinzu, damit die Datei an das Line Item angehängt wird. Für Kontaktformulare verwendest du eine Formular-App wie den Hulk Form Builder oder ein eingebettetes Jotform.
Anwendungsfall 1 – Datei-Uploads für Produktanpassungen
Der häufigste Grund, warum Shopify-Händler Datei-Uploads benötigen: Kunden, die personalisierte Produkte bestellen, müssen ihre Design-Datei, ihr Logo oder ein Referenzbild mit der Bestellung einreichen.
Die richtige Methode für Shopify: Line Item Properties.
Mit Line Item Properties kannst du benutzerdefinierte Daten an einen Warenkorb-Artikel anhängen, einschließlich Datei-Uploads. Die hochgeladene Datei wird von Shopify gespeichert und mit der Bestellung verknüpft.
So fügst du eine Line Item Property für den Datei-Upload hinzu
Schritt 1 - Dupliziere dein Theme und öffne den Code-Editor.
Schritt 2 - Finde dein Produktformular. Dieses befindet sich normalerweise in sections/main-product.liquid oder snippets/product-form.liquid.
Schritt 3 - Füge innerhalb der <form>-Tags ein Datei-Input ein:
<div class="product-form__input">
<label for="file-upload">Lade deine Design-Datei hoch</label>
<input type="file" id="file-upload" name="properties[Design File]" accept=".jpg,.jpeg,.png,.pdf,.ai,.eps" />
</div>Das Format name="properties[Design File]" sorgt dafür, dass Shopify das Feld mit dem Line Item verknüpft. “Design File” ist das Label, das im Shopify Adminbereich der Bestellung erscheint.
Dein Produktformular benötigt außerdem enctype="multipart/form-data"; ohne dieses Attribut wird nur der Dateiname gespeichert, aber nicht die eigentliche Datei.
Schritt 4 - Shopify kümmert sich um die Dateispeicherung und zeigt die hochgeladene Datei in den Bestelldetails an.
Einschränkung: Der Datei-Upload über Line Item Properties funktioniert im standardmäßigen Warenkorb- und Checkout-Ablauf. Er funktioniert nicht mit beschleunigten Checkout-Buttons (Shop Pay, PayPal), die den normalen Warenkorb überspringen.
Wie du es Fudge beschreibst
Anstatt Liquid-Dateien selbst zu bearbeiten, kannst du die Anpassung Fudge, dem KI-Operator für Shopify-Stores, beschreiben. Fudge entwirft die Änderung in deinem Produkt-Template, damit du sie als Vorschau ansehen kannst, bevor du sie veröffentlichst:
“Füge meinen Produktseiten für personalisierte Produkte ein Datei-Upload-Feld hinzu. Nenne es ‘Lade dein Design oder Logo hoch (JPG, PNG, PDF)’. Zeige es nur bei Produkten mit dem Tag ‘custom’ an.”
Für weitere Änderungen an der Produktseite, siehe Deine Shopify-Produktseite anpassen.
Anwendungsfall 2 – Datei-Uploads in Kontaktformularen
Für Kontaktformulare, über die Kunden vielleicht Kaufbelege, Garantiefotos oder Referenzbilder einreichen möchten, unterstützt das native Shopify-Kontaktformular überhaupt keine Datei-Uploads.
Optionen:
Formular-Apps mit Datei-Upload-Unterstützung
Hulk Form Builder — beinhaltet Datei-Uploads als Feldtyp. Der kostenlose Plan unterstützt einfache Datei-Uploads. Hochgeladene Dateien werden dir per E-Mail zugeschickt oder im Dashboard der App gespeichert.
Powerful Contact Form Builder – ähnliche Funktionalität.
Einrichtung: Installiere die App → erstelle ein neues Formular → ziehe ein “Datei-Upload”-Feld in das Formular → konfiguriere die erlaubten Dateitypen und Größenlimits → bette das Formular auf deiner Kontaktseite ein.
Formular-Tools von Drittanbietern
Typeform und Jotform unterstützen beide nativ Datei-Uploads. Die Dateien werden im Cloud-Speicher der Plattform gespeichert und sind über das Dashboard für Formulareinsendungen zugänglich. Du kannst sie als iFrame auf deiner Shopify-Seite einbetten.
Google Forms — kostenlos, unterstützt Datei-Uploads (gespeichert in Google Drive), sehr einfaches Design. Funktioniert, sieht aber ziemlich gewöhnlich aus.
Für ein Kontaktformular mit weiteren Feldern, siehe Ein benutzerdefiniertes Kontaktformular in Shopify hinzufügen.
Welche Arten von Datei-Uploads werden am häufigsten gebraucht?
Shops für personalisierte Produkte:
- Druckdateien (PDF, AI, EPS, SVG)
- Logo-Dateien (PNG, SVG, AI)
- Fotos zur Personalisierung (JPG, PNG)
- Maße oder Skizzen (PDF)
Dienstleistungsbasierte Shopify-Stores:
- Fotos für Garantieansprüche (JPG, PNG)
- Kaufbelege (PDF, JPG)
- Technische Spezifikationen (PDF, DOC)
B2B- oder Großhandels-Shops:
- Gewerbeanmeldungen
- Handelslizenzen
Gib akzeptierte Dateitypen und die maximale Dateigröße immer klar an. Ein sinnvolles Limit sind 10 MB für Bilder und 5 MB für Dokumente.
Eigene Datei-Upload-Implementierung
Für Shops, die ein Datei-Upload-Erlebnis benötigen, das vollständig in das Shop-Design integriert ist – und nicht über ein externes Formular-Tool eingebettet wird – ist eine benutzerdefinierte Implementierung mit einem Cloud-Speicherdienst eine Option.
Der Ansatz: Verwende ein <input type="file"> in einem benutzerdefinierten Formular, lade die Datei über einen serverseitigen Endpunkt zu einem Cloud-Speicheranbieter (AWS S3, Cloudinary oder ein ähnlicher Dienst) hoch und übergebe dann die resultierende URL als verstecktes Feld in der Formularübermittlung oder als Line Item Property.
Dies korrekt zu entwickeln ist komplex (Authentifizierung, Dateigrößenbeschränkungen, Sicherheit). Es wird am besten von einem Entwickler übernommen. Fudge kann das Formular und das Upload-Feld in deinem Theme erstellen, aber der Speicher-Endpunkt läuft außerhalb von Shopify. Daher benötigst du für diesen Teil einen separat eingerichteten Dienst. Beschreibe Fudge die Theme-Seite so:
“Erstelle ein Kontaktformular mit einem Datei-Upload-Feld. Dateien sollen auf [Speicherdienst] hochgeladen werden und die Einsendung soll die Datei-URL enthalten. Beschränke Uploads auf Bilder und PDFs unter 10 MB.”
Wo benutzerdefinierte Skripte in einem Theme platziert werden, erfährst du unter Benutzerdefiniertes JavaScript in Shopify hinzufügen.
Sicherheitsaspekte bei Datei-Uploads
Jedes Datei-Upload-Feld kann missbraucht werden, um schädliche Dateien hochzuladen. Denke deshalb immer an Folgendes:
- Schränke die erlaubten Dateitypen ein, indem du das
accept-Attribut beim Input-Feld nutzt - Lege eine maximale Dateigröße fest und validiere diese serverseitig
- Führe hochgeladene Dateien niemals aus – speichere sie nur als statische Assets
- Nutze eine seriöse Formular-App oder einen Cloud-Speicherdienst, der eigene Sicherheitsvalidierungen mitbringt
FAQ
Was ist die maximale Dateigröße für Shopify Datei-Uploads?
Für Datei-Uploads über Line Item Properties (personalisierte Produktbestellungen) beschränkt Shopify einzelne Dateien auf 20 MB. Für Uploads über Formular-Apps oder externe Dienste hängt das Limit vom jeweiligen Tool ab – Hulk Form Builder und Jotform unterstützen in der Regel über 100 MB in kostenpflichtigen Plänen, während kostenlose Versionen oft bei 10 MB enden. Überprüfe die Details deines App-Plans.
Kann ich ein Datei-Upload-Feld auf der Shopify-Warenkorbseite hinzufügen?
Nicht nativ. Platziere den Upload auf der Produktseite (die Methode in diesem Guide), damit er an das Line Item angehängt wird; ein Upload auf Warenkorb-Ebene erfordert eine App oder einen externen Speicherdienst.
Berechnet Shopify Gebühren für Datei-Uploads von Kunden?
Nein. Dateien, die als Line Item Properties angehängt werden, speichert Shopify ohne zusätzliche Kosten. Sie erscheinen in den Bestelldetails und bleiben für Händler ein Leben lang für diese Bestellung zugänglich. Uploads über Formular-Apps zählen hingegen meistens zum Speicherlimit der App.
Welche Dateitypen sollte ich für den Upload personalisierter Produkte erlauben?
Beschränke das accept-Attribut nur auf die Formate, die du auch wirklich nutzen kannst – in der Regel Bilder (.jpg, .png, .svg) und Design-Dateien (.pdf, .ai, .eps). Das Erlauben von .doc, .zip oder ausführbaren Dateien birgt ohne Mehrwert Sicherheits- und Verarbeitungsrisiken. Je enger die Liste der akzeptierten Dateien ist, desto geringer ist die Angriffsfläche.
Wo landen hochgeladene Dateien, wenn ein Kunde eine Bestellung aufgibt?
Line Item Property-Dateien werden von Shopify gespeichert und mit der Bestellung verknüpft. Öffne die Bestellung im Adminbereich → klicke auf das Line Item → die Datei erscheint als herunterladbarer Link in den Line Item Properties. Dateien, die über Formular-Apps hochgeladen werden, befinden sich im Dashboard der App oder in deinem verbundenen Speicher (Dashboard von Hulk, Cloud von Jotform, dein S3-Bucket).
