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 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 fichier peut être détourné pour soumettre des fichiers malveillants. Veillez toujours à :
- Restreindre les types de fichiers acceptés en utilisant l’attribut
acceptsur 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
Pour les uploads liés aux propriétés de l'article (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 autorisent généralement 100 Mo ou plus sur leurs forfaits payants, tandis que les versions gratuites plafonnent souvent à 10 Mo. Vérifiez les détails du forfait de votre application.
Oui, mais cela nécessite une intégration sur mesure. La méthode la plus propre : 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 de l'article. Méthode manuelle : modifiez le template du panier vous-même. Pour des uploads spécifiques à une ligne, utilisez l'approche de la page produit décrite dans ce guide.
Non. Les fichiers joints en tant que propriétés de l'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 applications de formulaire sont en général décomptés de l'espace de stockage alloué par l'application.
Restreignez l'attribut accept aux seuls formats que vous pouvez réellement utiliser - généralement des images (.jpg, .png, .svg) et des fichiers de conception (.pdf, .ai, .eps). Autoriser les .doc, .zip ou les fichiers exécutables crée des risques de sécurité et de traitement sans aucun avantage. Plus la liste des formats acceptés est restreinte, plus la surface d'abus est faible.
Les fichiers liés aux propriétés de l'article sont stockés par Shopify et rattaché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 la ligne. Les fichiers uploadés via des applications de formulaire se trouvent dans le tableau de bord de l'application ou dans votre stockage connecté (tableau de bord de Hulk, cloud de Jotform, votre bucket S3).
À lire aussi : Ajouter du JavaScript personnalisé sur Shopify.