Wichtige Erkenntnisse
- Shopify verfügt über kein natives Datei-Upload-Feld in seinem Kontaktformular.
- Für Uploads zur Produktpersonalisierung (eigenes Logo, Designdatei) sollten Sie Shopifys Line Item Properties mit einem File Input verwenden.
- Für Datei-Uploads in Kontaktformularen (Kaufbelege, Referenzbilder) nutzen Sie 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 sind (wie ein individuelles Logo für einen gravierten Artikel), und Uploads, die an Kontaktanfragen angehängt sind (wie ein Foto für einen Garantieanspruch). Die richtige Herangehensweise unterscheidet sich für beide Fälle.
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 - Duplizieren Sie Ihr Theme und öffnen Sie den Code-Editor.
Schritt 2 - Suchen Sie Ihr Produktformular. Dieses befindet sich normalerweise in sections/main-product.liquid oder snippets/product-form.liquid.
Schritt 3 - Fügen Sie innerhalb der <form>-Tags einen File Input hinzu:
<div class="product-form__input">
<label for="file-upload">Laden Sie Ihre Designdatei 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]" ist die Art und Weise, wie Shopify das Feld mit dem Artikel verknüpft. „Design File“ ist das Label, das im Admin-Bereich der Bestellung erscheint.
Schritt 4 - Shopify übernimmt die Speicherung der Datei und zeigt die hochgeladene Datei in den Bestelldetails an.
Einschränkung: Der Datei-Upload über Shopifys Line Item Properties funktioniert im standardmäßigen Warenkorb- und Checkout-Ablauf. Er funktioniert nicht mit Express-Checkout-Buttons (Shop Pay, PayPal), die den normalen Warenkorb überspringen.
Beschreibung für Fudge
Anstatt Liquid-Dateien selbst zu bearbeiten, beschreiben Sie Fudge einfach die gewünschte Anpassung:
„Füge ein Datei-Upload-Feld zu meinen Produktseiten für personalisierte Produkte hinzu. Beschrifte es mit ‘Laden Sie Ihr Design oder Logo hoch (JPG, PNG, PDF)’. Zeige es nur bei Produkten mit dem Tag ‘custom’ an.“
Anwendungsfall 2 — Datei-Uploads in Kontaktformularen
Für Kontaktformulare, bei denen Kunden 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 — 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 für personalisierte Produkte:
- Druckdateien (PDF, AI, EPS, SVG)
- Logodateien (PNG, SVG, AI)
- Fotos für die Personalisierung (JPG, PNG)
- Maße oder Skizzen (PDF)
Service-orientierte Shopify-Shops:
- Fotos für Garantieansprüche (JPG, PNG)
- Kaufbelege (PDF, JPG)
- Technische Spezifikationen (PDF, DOC)
B2B- oder Großhandels-Shops:
- Gewerbeanmeldungen
- Handelslizenzen
Geben Sie akzeptierte Dateitypen und die maximale Dateigröße immer klar an. Standardlimits: Bilder bis zu 10 MB, Dokumente bis zu 5 MB.
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 einzureichen. Sie sollten immer:
- Akzeptierte Dateitypen einschränken, indem Sie das
accept-Attribut im Input verwenden - Eine maximale Dateigröße festlegen und serverseitig validieren
- Hochgeladene Dateien niemals ausführen — nur als statische Assets speichern
- Eine seriöse Formular-App oder einen Cloud-Speicherdienst verwenden, der seine eigene Sicherheitsvalidierung beinhaltet
