Avec la caractéristique Image personnalisée sur le produit, vos clients chargent une photo ou un logo et le voient immédiatement dans l'image du produit, exactement à l'endroit où il sera ensuite imprimé, gravé ou brodé. Ils déplacent, font pivoter, retournent et recadrent l'image eux-mêmes. Exemples typiques : mugs photo, t-shirts avec logo, plaques, étiquettes et objets publicitaires. Cet article montre comment configurer la caractéristique et ce que vos clients peuvent en faire. Pour le texte, il existe la caractéristique sœur Texte personnalisé sur le produit ; les deux se combinent sur le même produit.
Prérequis
- Moteur frontend V3. Le type de donnée s'appelle donc Image personnalisée sur le produit (V3 uniquement). Un composant contenant cette caractéristique fonctionne automatiquement avec V3. Pour en savoir plus : Moteur frontend : Legacy ou V3.
- Image de produit combinée. L'image du client est dessinée dans l'image de produit combinée. Le composant a donc besoin d'au moins une caractéristique dont les valeurs ont des images pour l'image de produit combinée. Voir Visualisation et chargement d'images.
- Option « Designer ». Pour publier, vous avez besoin de l'option Designer, que vous réservez dans le portail de service, sous vos services. Elle est toujours incluse pendant l'essai gratuit, et sans frais supplémentaires dans la licence Enterprise.
Créer la caractéristique
- Ouvrez le composant et créez une nouvelle caractéristique.
- Choisissez Saisie libre comme catégorie de données et Image personnalisée sur le produit (V3 uniquement) comme type de donnée.
- Sous Conception sur le produit, configurez la zone de conception, le placement de l'image et la résolution (voir ci-dessous).
- Enregistrez, vérifiez l'aperçu et publiez le composant.
Comme pour toute caractéristique, Champ obligatoire détermine si votre client doit charger une image.
La zone de conception
La zone de conception est la partie du produit où l'image peut se trouver, par exemple l'avant du mug ou la poitrine d'un t-shirt.
- L'éditeur affiche l'image la plus basse de l'image de produit combinée, c'est-à-dire le produit de base. Faites glisser le cadre au bon endroit et modifiez sa taille par le coin.
- Saisissez Largeur (mm) et Hauteur (mm) : la taille réelle de la zone sur le produit. configento.app en déduit la résolution d'impression de l'image en dpi.
- Rotation (°) fait pivoter la zone, par exemple pour une surface inclinée.
L'image ne quitte jamais la zone. La zone correspond à ce qui sera produit.
Une zone qui suit le format
Si votre client choisit lui-même la taille du produit, par exemple une plaque en largeur × hauteur, la zone de conception peut suivre :
| Réglage | Effet |
|---|---|
| Largeur depuis, Hauteur depuis | Taille fixe reprend les valeurs en mm ci-dessus. Si vous choisissez un champ numérique ou une formule, la zone reprend la valeur que votre client y règle. |
| Marge (mm) | Déduite de la taille choisie sur chaque côté, par exemple pour un bord non imprimé. |
La zone sur l'image est alors la plus grande surface possible ; elle reprend le rapport d'aspect choisi.
Placement, résolution et verrouillages
| Réglage | Effet |
|---|---|
| Placement de l'image | Afficher l'image entière place toute l'image dans la zone ; des bords vides peuvent rester. Remplir la zone remplit toute la zone et recadre l'image pour cela. |
| Avertir en dessous de (dpi) | Si l'image est en dessous de cette valeur à la taille d'impression choisie, votre client voit un avertissement. Par défaut : 150. 0 = aucun avertissement. |
| Refuser en dessous de (dpi) | Si l'image est en dessous, la configuration ne peut pas aller dans le panier. Par défaut : 0 = jamais. |
| L'acheteur ne peut pas modifier | Verrouille Position, Taille, Rotation, Miroir ou Recadrer. Votre client ne voit pas les outils verrouillés. |
Vos clients chargent des images PNG ou JPG jusqu'à 20 Mo. configento.app supprime au bout de 30 jours les images que personne ne met dans le panier.
Ce que voit votre client
- le bouton Charger une image avec l'indication « PNG ou JPG, jusqu'à 20 Mo »,
- après le chargement, un petit aperçu avec le nom du fichier et la résolution, par exemple « 508 dpi »,
- selon vos réglages, les outils Taille, Rotation (curseur et Tourner à gauche / Tourner à droite), Miroir et Recadrer,
- Remplacer et Supprimer,
- l'image en direct dans l'image du produit.
Votre client peut déplacer l'image dans l'image du produit à la souris ou au doigt, tant que vous n'avez pas verrouillé la position. Lorsque l'image est sélectionnée, cela fonctionne aussi avec les touches fléchées. Réinitialiser la position la remet à sa position de départ.
Recadrer ouvre une fenêtre dans laquelle votre client choisit un cadrage. Image entière annule le recadrage, Appliquer le valide.
Si l'image est agrandie au point que sa résolution passe sous Avertir en dessous de (dpi), le message « La résolution est faible à cette taille : l'impression peut être floue. » apparaît. La résolution se rapporte toujours à la taille d'impression réelle.
Dans la commande
La commande contient l'image avec son nom de fichier et sa résolution, par exemple :
logo.png · 508 dpi
S'y ajoute l'image d'origine en téléchargement, telle que votre client l'a chargée. Position, taille, rotation, retournement et recadrage sont transmis sous forme de données, et l'image de produit combinée dans le panier, dans les e-mails et dans le PDF montre l'image à sa place. Si votre client rouvre la configuration, tout est à nouveau tel qu'il l'a conçu.
Prix, règles et champ obligatoire fonctionnent comme pour toute autre caractéristique, par exemple un supplément dès qu'une image a été chargée.
L'option « Designer »
- Pendant l'essai gratuit, vous pouvez utiliser la caractéristique sans restriction.
- Ensuite, vous avez besoin de l'option Designer réservée, qui couvre le texte et l'image personnalisés. Sans l'option, le type de donnée est verrouillé dans l'éditeur. Vous pouvez continuer à modifier les caractéristiques existantes, mais lors de la publication, configento.app vous renvoie à l'option.
- Si l'option prend fin, un composant déjà publié continue de fonctionner sans changement dans votre boutique.
Dépannage
- L'éditeur n'affiche aucune image pour la zone de conception : le composant n'a pas encore d'image dans l'image de produit combinée. Ajoutez d'abord une image à une valeur.
- « Veuillez charger une image PNG ou JPG. » : les autres formats comme PDF, SVG ou HEIC ne sont pas acceptés. Votre client enregistre d'abord l'image en PNG ou JPG.
- « L'image dépasse 20 Mo. » ou « L'image a trop de pixels. » : votre client charge une version plus petite.
- L'avertissement de résolution apparaît immédiatement : la zone est grande en mm et l'image a trop peu de pixels pour cela. Vérifiez Largeur (mm) et Hauteur (mm), baissez Avertir en dessous de (dpi) ou demandez à vos clients des images plus grandes.
- L'image n'apparaît pas dans l'image du produit : vérifiez qu'une image de base est sélectionnée dans l'aperçu et que le Moteur est réglé sur V3.
- La publication échoue avec un renvoi à l'option : réservez l'option Designer dans le portail de service et publiez à nouveau.