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

À retenir

Shopify n’a pas de champ natif d’upload de fichiers pour ses formulaires de contact.

Pour les uploads liés à la personnalisation de produits (logo personnalisé, fichier de design), utilisez les line item properties de Shopify avec un input de type file.

Pour les uploads de fichiers sur 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 du stockage cloud.

L’upload de fichiers dans Shopify répond à deux cas d’utilisation distincts : les uploads liés aux commandes de produits (comme un logo personnalisé pour un article gravé) et les uploads liés aux soumissions de formulaires de contact (comme une photo pour une réclamation de garantie). La bonne approche diffère pour chacun.

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 input de type file :

<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]" est la façon dont Shopify associe le champ à l’article de la commande. “Design File” est le libellé qui apparaîtra dans l’admin de la commande.

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

Limite : L’upload de fichiers via les line item properties de Shopify fonctionne dans le flux standard du panier et du checkout. Il 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 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 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 axées sur les services :

Photos de réclamation de garantie (JPG, PNG)
Documents de preuve 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 des fichiers. Les limites standards : images jusqu’à 10 Mo, documents jusqu’à 5 Mo.

Créez des formulaires Shopify personnalisés 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 liés aux line item properties (commandes de produits personnalisés), Shopify limite la taille de 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 100 Mo et plus sur les forfaits payants, tandis que les versions gratuites limitent souvent à 10 Mo. Vérifiez les détails du forfait spécifique à votre app.

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

Oui, mais cela nécessite une implémentation sur mesure. La méthode la plus propre : décrivez ce que vous souhaitez à Fudge (“ajoute un champ d’upload de fichier au cart drawer pour des instructions spéciales”) et il modifiera le template du panier avec <input type="file" name="properties[…]"> pour que Shopify enregistre les uploads en tant que line item properties. Méthode manuelle : modifiez le template du panier vous-même. Pour des uploads spécifiques à chaque article, utilisez la méthode de la page produit décrite dans ce guide.

Shopify facture-t-il les uploads de fichiers des clients ?

Non. Les fichiers joints 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 celle-ci. En revanche, les uploads via des apps de formulaires sont généralement décomptés du quota de stockage de l’app.

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 exploiter - généralement des images (.jpg, .png, .svg) et des fichiers de design (.pdf, .ai, .eps). Autoriser des fichiers .doc, .zip ou des exécutables crée des risques de sécurité et de traitement sans le moindre intérêt. Plus la liste d’acceptation est restreinte, moins il y a de 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 rattachés à la commande. Ouvrez la commande dans l’admin → cliquez sur l’article (line item) → le fichier apparaît sous forme de lien de téléchargement dans les line item properties. Les fichiers uploadés via des apps de formulaires se trouvent dans le dashboard de l’app ou dans votre stockage connecté (le dashboard de Hulk, le cloud de Jotform, votre bucket S3).