Ajouter un champ d'upload de fichier sur Shopify : 3 Méthodes (2026)

Points clés

Shopify ne possède pas de champ natif d’upload de fichier dans son formulaire de contact.

Pour l’upload de fichiers liés à la personnalisation de produits (logo personnalisé, fichier de design), utilisez les line item properties de Shopify avec un champ file input.

Pour les formulaires de contact (preuve d’achat, images de référence), utilisez une application de formulaire qui prend en charge l’upload de fichiers.

Hulk Form Builder et Jotform prennent tous deux en charge l’upload de fichiers avec un stockage dans le cloud.

Shopify n’a pas de champ d’upload de fichier intégré. Pour les commandes de produits, ajoutez un champ de type fichier (file input) nommé properties[...] au formulaire du produit pour que le fichier soit rattaché au line item. Pour les formulaires de contact, utilisez une application de formulaire comme Hulk Form Builder ou un Jotform intégré.

Cas d’utilisation 1 — Upload de fichiers pour la personnalisation de produits

La raison la plus courante pour laquelle les marchands Shopify ont besoin de l’upload de fichiers : les clients qui commandent des produits personnalisés doivent soumettre leur fichier de design, leur logo ou une image de référence avec leur commande.

La bonne méthode sur Shopify : les line item properties.

Les line item properties vous permettent de joindre des données personnalisées à un article du panier, y compris des fichiers uploadés. Le fichier uploadé est stocké par Shopify et lié à la commande.

Comment ajouter un upload de fichier via une line item property

Étape 1 - Dupliquez votre thème et ouvrez l’éditeur de code.

Étape 2 - Trouvez votre formulaire de produit. Il se trouve généralement dans sections/main-product.liquid ou snippets/product-form.liquid.

Étape 3 - À l’intérieur des balises <form>, ajoutez un champ file input :

<div class="product-form__input">
    <label for="file-upload">Uploadez votre fichier de design</label>
    <input type="file" id="file-upload" name="properties[Design File]" accept=".jpg,.jpeg,.png,.pdf,.ai,.eps" />
</div>

Le format name="properties[Design File]" permet à Shopify d’associer le champ au line item. “Design File” est le libellé qui apparaît dans l’admin de la commande.

Votre formulaire de produit nécessite également l’attribut enctype="multipart/form-data" ; sans cela, seul le nom du fichier est enregistré, mais pas le fichier lui-même.

Étape 4 - Shopify gère le stockage du fichier et affiche le fichier uploadé dans les détails de la commande.

Limitation : L’upload de fichiers via les line item properties de Shopify fonctionne dans le panier classique et le processus de checkout standard. Cela ne fonctionne pas avec les boutons de paiement accéléré (Shop Pay, PayPal) qui contournent le panier normal.

Le décrire à Fudge

Plutôt que de modifier vous-même les fichiers Liquid, décrivez la personnalisation à Fudge, l’opérateur IA pour les boutiques Shopify, et il préparera la modification dans votre template de produit pour que vous puissiez la prévisualiser avant de la publier :

“Ajoute un champ d’upload de fichier sur mes pages produits pour les produits personnalisés. Mets comme libellé ‘Uploadez votre design ou logo (JPG, PNG, PDF)’. Affiche-le uniquement sur les produits ayant le tag ‘custom’.”

Pour d’autres modifications de page produit, consultez Personnaliser votre page produit Shopify.

Cas d’utilisation 2 — Upload de fichiers dans les formulaires de contact

Pour les formulaires de contact où les clients pourraient soumettre une preuve d’achat, des photos de garantie ou des images de référence, le formulaire de contact natif de Shopify ne prend pas du tout en charge l’upload de fichiers.

Options :

Les applications de formulaire avec support de l’upload de fichiers

Hulk Form Builder — inclut l’upload de fichier comme type de champ. Le forfait gratuit prend en charge les uploads de base. Les fichiers uploadés vous sont envoyés par e-mail ou stockés dans le dashboard de l’application.

Powerful Contact Form Builder - fonctionnalité similaire.

Configuration : Installez l’application → créez un nouveau formulaire → faites glisser un champ “File Upload” dans le formulaire → configurez les types de fichiers autorisés et les limites de taille → intégrez le formulaire sur votre page de contact.

Les outils de formulaire tiers

Typeform et JotForm prennent tous deux en charge l’upload de fichiers de manière native. Les fichiers sont stockés sur le cloud de la plateforme et accessibles via le dashboard de soumission du formulaire. Vous pouvez les intégrer sur votre page Shopify sous forme d’iframe.

Google Forms — gratuit, prend en charge l’upload de fichiers (stockés dans Google Drive), design très basique. Ça fonctionne, mais le rendu est générique.

Pour un formulaire de contact avec plus de champs, consultez Ajouter un formulaire de contact personnalisé dans Shopify.

Quels sont les types d’uploads de fichiers les plus courants ?

Boutiques de produits personnalisés :

Fichiers d’impression (PDF, AI, EPS, SVG)
Fichiers de logo (PNG, SVG, AI)
Photos pour la personnalisation (JPG, PNG)
Mesures ou schémas (PDF)

Boutiques Shopify basées sur des services :

Photos pour les réclamations de garantie (JPG, PNG)
Preuves d’achat (PDF, JPG)
Spécifications techniques (PDF, DOC)

Boutiques B2B ou wholesale :

Documents d’immatriculation d’entreprise
Licences commerciales

Spécifiez toujours clairement les types de fichiers acceptés et la taille maximale du fichier. Une limite raisonnable est de 10 Mo pour les images et 5 Mo pour les documents.

Créez des formulaires Shopify sur mesure en décrivant ce dont vous avez besoin.

Démarrer l'essai gratuit

Implémentation d’un upload de fichiers sur mesure

Pour les boutiques qui ont besoin d’une expérience d’upload de fichiers totalement intégrée au design de leur site — et non intégrée via un outil tiers — une implémentation sur mesure utilisant un service de stockage cloud est une option.

L’approche : utilisez un <input type="file"> dans un formulaire personnalisé, uploadez le fichier vers un fournisseur de stockage cloud (AWS S3, Cloudinary ou similaire) via un endpoint côté serveur, puis passez l’URL générée en tant que champ masqué (hidden field) dans la soumission du formulaire ou comme line item property.

C’est complexe à bien mettre en place (authentification, limites de taille, sécurité). Il vaut mieux confier cela à un développeur. Fudge peut créer le formulaire et le champ d’upload dans votre thème, mais l’endpoint de stockage s’exécute en dehors de Shopify ; cette partie nécessite donc un service que vous configurez séparément. Décrivez la partie thème à Fudge comme ceci :

“Crée un formulaire de contact avec un champ d’upload de fichier. Les fichiers doivent être uploadés sur [service de stockage] et la soumission doit inclure l’URL du fichier. Limite les uploads aux images et aux PDF de moins de 10 Mo.”

Pour savoir où placer les scripts personnalisés dans un thème, consultez Ajouter du JavaScript personnalisé dans Shopify.

Considérations de sécurité pour l’upload de fichiers

Tout champ d’upload de fichier peut être détourné pour soumettre des fichiers malveillants. Veillez toujours à :

Restreindre les types de fichiers acceptés en utilisant l’attribut accept sur l’input
Définir une taille limite de fichier et valider côté serveur
Ne jamais exécuter les fichiers uploadés — stockez-les uniquement comme des assets statiques
Utiliser une app de formulaire reconnue ou un service de stockage cloud qui intègre ses propres validations de sécurité

FAQ

Quelle est la taille maximale d'un fichier uploadé sur Shopify ?

Pour les uploads via les line item properties (commandes de produits personnalisés), Shopify limite les fichiers individuels à 20 Mo. Pour les uploads via des applications de formulaire ou des services externes, la limite dépend de l'outil - Hulk Form Builder et Jotform prennent généralement en charge plus de 100 Mo sur leurs forfaits payants, tandis que les versions gratuites plafonnent souvent à 10 Mo. Vérifiez les détails du forfait de votre application.

Puis-je ajouter un upload de fichier sur la page panier de Shopify ?

Pas de manière native. Placez l'upload sur la page produit (la méthode de ce guide) pour qu'il soit rattaché au line item ; un upload au niveau du panier nécessite une application ou un service de stockage externe.

Est-ce que Shopify facture les uploads de fichiers par les clients ?

Non. Les fichiers attachés en tant que line item properties sont stockés par Shopify sans frais supplémentaires. Ils apparaissent dans les détails de la commande et restent accessibles aux marchands pendant toute la durée de vie de la commande. Les uploads via des applications de formulaire sont généralement décomptés du quota de stockage de l'application.

Quels types de fichiers dois-je autoriser pour l'upload sur un produit personnalisé ?

Restreignez l'attribut accept uniquement aux formats que vous pouvez réellement utiliser - typiquement des images (.jpg, .png, .svg) et des fichiers de design (.pdf, .ai, .eps). Autoriser les .doc, .zip ou les fichiers exécutables crée des risques de sécurité et de traitement inutiles. Plus la liste des formats acceptés est stricte, plus vous réduisez les risques d'abus.

Où vont les fichiers uploadés lorsqu'un client passe une commande ?

Les fichiers des line item properties sont stockés par Shopify et liés à la commande. Ouvrez la commande dans l'admin → cliquez sur le line item → le fichier apparaît sous forme de lien téléchargeable dans les line item properties. Les fichiers uploadés via des applications de formulaire se trouvent dans le dashboard de l'application ou dans votre stockage connecté (le dashboard de Hulk, le cloud de Jotform, votre bucket S3).