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, 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 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.

Erstellen Sie benutzerdefinierte Shopify-Formulare, indem Sie beschreiben, was Sie benötigen.

Try Fudge for Free

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 zu übermitteln. Achte immer darauf:

Akzeptierte Dateitypen einschränken durch das accept-Attribut im Input-Feld
Maximale Dateigröße festlegen und serverseitig validieren
Hochgeladene Dateien niemals ausführen – nur als statische Assets speichern
Nutze eine seriöse Form App oder einen Cloud-Speicherdienst mit eigener Sicherheitsvalidierung