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

Points clés à retenir

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

Pour les uploads de personnalisation de produits (logo personnalisé, fichier de design), utilisez les propriétés de l’article (line item properties) de Shopify avec un champ de type fichier.

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

Hulk Form Builder et Jotform prennent tous deux en charge les uploads de fichiers avec stockage cloud.

Sur Shopify, l’upload de fichiers répond à deux cas d’usage distincts : les fichiers joints aux commandes de produits (comme un logo personnalisé pour un article gravé) et les fichiers joints aux soumissions de formulaires de contact (comme une photo pour une réclamation de garantie). La bonne approche diffère pour chacun d’eux.

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 d’upload de fichier :

<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 à l’article (line item). « Design File » est le libellé qui s’affiche dans l’admin de la commande.

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

Limitation : l’upload de fichier via les propriétés d’article de Shopify fonctionne dans le parcours de panier et de checkout standards. Il ne fonctionne pas avec les boutons de paiement accéléré (Shop Pay, PayPal) qui contournent le panier classique.

Le décrire à Fudge

Plutôt que de modifier les fichiers Liquid vous-même, décrivez la personnalisation à Fudge :

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

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 pour la 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 fichiers comme type de champ. Le forfait gratuit prend en charge les uploads de fichiers de base. Les fichiers uploadés vous sont envoyés par e-mail ou sont stockés dans le tableau de bord de l’application.

Powerful Contact Form Builder — fonctionnalités similaires, même développeur.

Configuration : Installez l’application → créez un nouveau formulaire → glissez-déposez 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 dans le stockage cloud de la plateforme et accessibles via le tableau de bord de soumission du formulaire. Intégrez-les sur votre page Shopify sous forme d’iframe.

Google Forms — gratuit, prend en charge les uploads de fichiers (stockés dans Google Drive), design très basique. Fonctionne, mais a un aspect assez générique.

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

Boutiques de produits sur mesure :

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

Boutiques Shopify de services :

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

Boutiques B2B ou de vente en gros :

Documents d’immatriculation d’entreprise
Licences commerciales

Précisez toujours clairement les types de fichiers acceptés et la taille maximale. Limites standards : images jusqu’à 10 Mo, documents jusqu’à 5 Mo.

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

Try Fudge for Free

Implémentation d’un upload de fichiers sur mesure

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

L’approche : utiliser un <input type="file"> dans un formulaire personnalisé, uploader le fichier vers un fournisseur de stockage cloud (AWS S3, Cloudinary, ou un service similaire) via un endpoint côté serveur, puis passer l’URL résultante comme champ caché (hidden field) lors de la soumission du formulaire ou comme line item property.

C’est complexe à réaliser correctement (authentification, limites de taille de fichier, sécurité). Il est préférable de confier cette tâche à un développeur ou de décrire l’intégralité de vos besoins à Fudge :

« 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. »

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 pour les uploads de fichiers sur Shopify ?

Pour les uploads de fichiers en propriétés d'article (commandes de produits personnalisés), Shopify limite chaque fichier à 20 Mo. Pour les uploads via des apps de formulaire ou des services externes, la limite dépend de l'outil - Hulk Form Builder et Jotform supportent généralement plus de 100 Mo sur les forfaits payants, tandis que les forfaits gratuits plafonnent souvent à 10 Mo. Vérifiez les détails du forfait de votre app.

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

Oui, mais cela nécessite un développement sur mesure. La méthode la plus simple : décrivez ce que vous voulez à Fudge ("ajouter un champ d'upload de fichier au tiroir du panier pour des instructions spéciales") et il modifiera le template du panier avec <input type="file" name="properties[…]"> pour que Shopify enregistre les uploads comme propriétés d'article. Manuellement : modifiez vous-même le template du panier. Pour des uploads spécifiques à chaque article, utilisez l'approche de la page produit présentée dans ce guide.

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

Non. Les fichiers joints en tant que propriétés d'article 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 apps de formulaire sont généralement décomptés du quota de stockage de l'app.

Quels types de fichiers devrais-je autoriser pour un upload de produit personnalisé ?

Restreignez l'attribut accept uniquement aux formats que vous pouvez réellement utiliser - généralement des images (.jpg, .png, .svg) et des fichiers de design (.pdf, .ai, .eps). Autoriser des .doc, .zip ou des exécutables crée des risques de sécurité et de traitement inutiles. Plus la liste d'acceptation 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 propriétés d'article sont stockés par Shopify et liés à la commande. Ouvrez la commande dans l'admin → cliquez sur l'article → le fichier apparaît sous forme de lien téléchargeable dans les propriétés de l'article. Les fichiers uploadés via des apps de formulaire se trouvent dans le tableau de bord de l'app ou dans votre stockage connecté (le dashboard de Hulk, le cloud de Jotform, votre bucket S3).