Comment ajouter un champ d'upload de fichier sur Shopify (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’. »

À lire aussi : Personnaliser votre page produit Shopify.

À lire aussi : Ajouter une logique conditionnelle aux formulaires 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 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.

À lire aussi : Ajouter un formulaire de contact personnalisé dans Shopify.

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.

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 fichiers peut être utilisé de manière abusive pour soumettre des fichiers malveillants. Pensez toujours à :

• Restreindre les types de fichiers acceptés en utilisant l’attribut accept sur l’input
• Définir une taille de fichier maximale et la valider côté serveur
• Ne jamais exécuter les fichiers uploadés — stockez-les uniquement comme des assets statiques
• Utiliser une application de formulaire ou un service de stockage cloud réputé qui inclut sa propre validation de sécurité

À lire aussi : Ajouter du JavaScript personnalisé sur Shopify.