Wichtigste Erkenntnisse
- Shopify hat kein natives Datei-Upload-Feld im Kontaktformular.
- Für Uploads zur Produktanpassung (individuelles Logo, Designdatei) nutzt du am besten die Line Item Properties von Shopify mit einem Datei-Input.
- Für Datei-Uploads in Kontaktformularen (Kaufbeleg, Referenzbilder) benötigst du eine Formular-App, die Datei-Uploads unterstützt.
- Hulk Form Builder und Jotform unterstützen beide Datei-Uploads mit Cloud-Speicher.
Datei-Uploads in Shopify dienen zwei unterschiedlichen Anwendungsfällen: Uploads, die an Produktbestellungen angehängt werden (wie ein individuelles Logo für einen gravierten Artikel), und Uploads, die an Kontaktformular-Einsendungen angehängt werden (wie ein Foto für einen Garantieanspruch). Der richtige Ansatz unterscheidet sich jeweils.
Anwendungsfall 1 — Datei-Uploads für Produktpersonalisierung
Der häufigste Grund, warum Shopify-Händler Datei-Uploads benötigen: Kunden, die personalisierte Produkte bestellen, müssen ihre Designdatei, ihr Logo oder ein Referenzbild mit der Bestellung einreichen.
Die richtige Shopify-Methode: Line Item Properties.
Mit Line Item Properties können Sie benutzerdefinierte Daten an einen Warenkorbartikel anhängen, einschließlich Datei-Uploads. Die hochgeladene Datei wird von Shopify gespeichert und mit der Bestellung verknüpft.
So fügen Sie eine Line Item Property für Datei-Uploads hinzu
Schritt 1 - Dupliziere dein Theme und öffne den Code-Editor.
Schritt 2 - Finde dein Produktformular. Das ist normalerweise in sections/main-product.liquid oder snippets/product-form.liquid zu finden.
Schritt 3 - Füge innerhalb der <form>-Tags ein Datei-Upload-Feld ein:
<div class="product-form__input">
<label for="file-upload">Upload your design file</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]" sagt Shopify, wie das Feld mit dem Line Item verknüpft wird. “Design File” ist das Label, das im Adminbereich der Bestellung erscheint.
Schritt 4 - Shopify übernimmt 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-Prozess. Er funktioniert nicht mit beschleunigten Checkout-Buttons (Shop Pay, PayPal), die den normalen Warenkorb überspringen.
Beschreibung für Fudge
Anstatt Liquid-Dateien selbst zu bearbeiten, beschreibe die Anpassung einfach Fudge:
“Füge ein Datei-Upload-Feld für personalisierte Produkte zu meinen Produktseiten hinzu. Beschrifte es mit ‘Lade dein Design oder Logo hoch (JPG, PNG, PDF)’. Zeige es nur bei Produkten mit dem Tag ‘custom’ an.”
Passend dazu: Shopify-Produktseite anpassen.
Passend dazu: Bedingte Logik zu Shopify-Formularen hinzufügen.
Anwendungsfall 2 — Datei-Uploads in Kontaktformularen
Bei Kontaktformularen, über die Kunden Kaufbelege, Garantiefotos oder Referenzbilder einreichen möchten, unterstützt das native Shopify-Kontaktformular überhaupt keine Datei-Uploads.
Passend dazu: Ein individuelles Kontaktformular in Shopify hinzufügen.
Optionen:
Formular-Apps mit Datei-Upload-Unterstützung
Hulk Form Builder — enthält Datei-Upload als Feldtyp. Der kostenlose Plan unterstützt einfache Datei-Uploads. Hochgeladene Dateien werden Ihnen per E-Mail zugeschickt oder im Dashboard der App gespeichert.
Powerful Contact Form Builder — ähnliche Funktionalität, gleicher Entwickler.
Einrichtung: App installieren → neues Formular erstellen → ein „File Upload“-Feld in das Formular ziehen → erlaubte Dateitypen und Größenbeschränkungen konfigurieren → das Formular auf Ihrer Kontaktseite einbetten.
Formular-Tools von Drittanbietern
Typeform und JotForm unterstützen Datei-Uploads nativ. Die Dateien werden im Cloud-Speicher der Plattform gespeichert und sind über das Dashboard für Formularübermittlungen zugänglich. Betten Sie diese als Iframe auf Ihrer Shopify-Seite ein.
Google Forms — kostenlos, unterstützt Datei-Uploads (gespeichert in Google Drive), sehr einfaches Design. Funktioniert, sieht aber generisch aus.
Welche Arten von Datei-Uploads werden häufig benötigt?
Shops mit personalisierten Produkten:
- Druckdateien (PDF, AI, EPS, SVG)
- Logo-Dateien (PNG, SVG, AI)
- Fotos zur Personalisierung (JPG, PNG)
- Maße oder Skizzen (PDF)
Service-basierte Shopify-Shops:
- Fotos für Garantieansprüche (JPG, PNG)
- Kaufbelege (PDF, JPG)
- Technische Spezifikationen (PDF, DOC)
B2B- oder Großhandels-Shops:
- Gewerbeanmeldungen
- Handelslizenzen
Gib immer klar an, welche Dateitypen akzeptiert werden und wie groß die Datei maximal sein darf. Standard-Limits: Bilder bis 10MB, Dokumente bis 5MB.
Implementierung individueller Datei-Uploads
Für Shops, die eine Datei-Upload-Erfahrung benötigen, die vollständig in das Shop-Design integriert ist – und nicht von einem Drittanbieter-Tool eingebettet wird –, ist eine individuelle Implementierung mit einem Cloud-Speicherdienst eine Option.
Der Ansatz: Verwenden Sie ein <input type="file"> in einem benutzerdefinierten Formular, laden Sie die Datei über einen serverseitigen Endpunkt zu einem Cloud-Speicheranbieter (AWS S3, Cloudinary oder ein ähnlicher Dienst) hoch und übergeben Sie die resultierende URL als verstecktes Feld bei der Formularübermittlung oder als Line Item Property.
Dies ist komplex korrekt aufzubauen (Authentifizierung, Dateigrößenbeschränkungen, Sicherheit). Es wird am besten von einem Entwickler erledigt oder indem Sie die gesamte Anforderung Fudge beschreiben:
„Erstelle ein Kontaktformular mit einem Datei-Upload-Feld. Dateien sollen zu [Speicherdienst] hochgeladen werden und die Übermittlung soll die Datei-URL enthalten. Begrenze Uploads auf Bilder und PDFs unter 10 MB.“
Sicherheitsaspekte bei Datei-Uploads
Jedes Datei-Upload-Feld kann missbraucht werden, um schädliche Dateien hochzuladen. Deshalb immer:
- Erlaubte Dateitypen einschränken, indem du das
accept-Attribut im Input-Feld nutzt - Maximale Dateigröße festlegen und serverseitig validieren
- Hochgeladene Dateien niemals ausführen – immer nur als statische Assets speichern
- Eine vertrauenswürdige Formular-App oder einen Cloud-Speicherdienst mit eigener Sicherheitsvalidierung nutzen
FAQ
Für Datei-Uploads über Line Item Properties (Bestellungen von personalisierten Produkten) begrenzt Shopify einzelne Dateien auf 20MB. Bei Uploads über Formular-Apps oder externe Dienste hängt das Limit vom jeweiligen Tool ab – der Hulk Form Builder und Jotform unterstützen in den kostenpflichtigen Plänen meist 100MB+, während die kostenlosen Versionen oft bei 10MB gedeckelt sind. Überprüfe die Details deines spezifischen App-Plans.
Ja, aber das erfordert eine individuelle Anpassung. Der sauberste Weg: Beschreibe Fudge einfach, was du möchtest ("Füge dem Cart Drawer ein Dateiupload-Feld für spezielle Anweisungen hinzu"), und es bearbeitet das Cart-Template mit <input type="file" name="properties[…]">, sodass Shopify die Uploads als Line Item Properties speichert. Manuell: Bearbeite das Cart-Template selbst. Für Uploads pro Artikel solltest du den in diesem Guide beschriebenen Ansatz für die Produktseite verwenden.
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 während der gesamten Lebensdauer der Bestellung zugänglich. Formular-App-Uploads werden stattdessen normalerweise auf den Speicherplatz deines App-Plans angerechnet.
Beschränke das accept-Attribut auf die Formate, die du auch wirklich nutzen kannst – normalerweise Bilder (.jpg, .png, .svg) und Design-Dateien (.pdf, .ai, .eps). Das Zulassen von .doc, .zip oder ausführbaren Dateien bringt Sicherheits- und Verarbeitungsrisiken ohne echten Nutzen mit sich. Je enger die Liste der akzeptierten Dateien, desto geringer ist die Gefahr von Missbrauch.
Dateien von Line Item Properties werden von Shopify gespeichert und mit der Bestellung verknüpft. Öffne die Bestellung im Adminbereich → klicke auf das Line Item → die Datei erscheint als Download-Link in den Line Item Properties. Dateien, die über Formular-Apps hochgeladen werden, landen im Dashboard der App oder in deinem verbundenen Speicher (Hulk's Dashboard, Jotform's Cloud, dein S3-Bucket).
Auch interessant: Custom JavaScript in Shopify hinzufügen.