Les images montrent à vos clients ce qu'ils sont en train de configurer. configento.app en connaît trois sortes : une image sur la caractéristique, une vignette sur la valeur pour la sélection et l'image de produit combinée, composée calque par calque à partir des images des valeurs choisies – sur demande aussi sous forme de vue 360° rotative.
Quel type d'image vous faut-il ?
| Vous voulez … | Alors prenez … |
|---|---|
| afficher à côté d'une caractéristique une image explicative, par exemple un croquis « Comment mesurer la largeur » | l'image sur la caractéristique |
| que vos clients choisissent des valeurs via de petites images, par exemple des échantillons de couleur | la vignette sur la valeur |
| composer le produit fini à partir des valeurs choisies, par exemple structure + toile + motorisation | l'image de produit combinée |
| montrer le produit composé en rotation | l'Image combinée 360° (Legacy uniquement) |
Image sur la caractéristique
- Sélectionnez la caractéristique dans l'arborescence.
- À droite, ouvrez la section Image et téléversez l'image.
L'emplacement de l'image à côté de la caractéristique se règle pour l'ensemble du composant : onglet Paramètres → Général → Position de l'image d'option → Gauche, Droite ou Ne pas afficher.
Une image sur la caractéristique existe pour les caractéristiques de sélection, les champs de saisie, les champs statiques, l'attribut produit et le pack.
Images sur les valeurs
Un clic sur une valeur dans la section Valeurs ouvre ses paramètres. On y trouve deux champs d'image :
| Section | Utilité | Champs supplémentaires |
|---|---|---|
| Vignette | La petite image par laquelle le client choisit la valeur – surtout avec le type de données Liste avec images | W (px) et H (px) : taille d'affichage de la vignette (Legacy uniquement) |
| Image | Le calque pour l'image de produit combinée | Offset X et Offset Y : décalage du calque en pixels (Legacy uniquement) |
Si l'image combinée est réglée sur 360°, la section Image s'appelle Images 360° et accueille toute une séquence d'images (voir ci-dessous).
L'image de produit combinée
Au lieu de photographier chaque combinaison, vous créez un calque par valeur. Le configurateur superpose les calques des valeurs choisies.
Exemple de toiture de terrasse :
| Caractéristique | Ordre des images | Calques des valeurs |
|---|---|---|
| Structure | 1 | Structure anthracite, structure blanche |
| Couverture | 2 | Verre clair, verre mat, plaques alvéolaires |
| Paroi latérale | 3 | sans (pas d'image), paroi coulissante en verre |
Mise en place
- Activez l'image combinée : onglet Paramètres → Général → section image de produit combinée → Image combinée = Image produit combinée.
- Sur chaque valeur qui doit être visible dans l'image, téléversez son calque dans la section Image.
- Définissez l'ordre d'empilement sur la caractéristique, dans le champ Ordre des images. Les caractéristiques avec un chiffre plus petit sont en dessous, celles avec un chiffre plus grand au-dessus.
- Vérifiez le résultat dans l'Aperçu.
Pour que les calques s'ajustent
- Tous les calques ont la même taille d'image et le même cadrage.
- Tout ce qui n'est pas la pièce elle-même est transparent – utilisez du PNG ou du WebP avec transparence, le SVG fonctionne aussi.
- Le calque le plus bas (souvent la structure de base) couvre tout l'arrière-plan.
- Une valeur sans image n'apporte rien à l'image globale – pratique pour « sans ».
Où l'image apparaît dans la boutique
L'emplacement de l'image combinée sur la page produit dépend de l'intégration. Dans Magento et Shopware, vous indiquez dans les paramètres du plugin un sélecteur CSS pour la zone d'image, voir Installer le plugin Magento et Installer le plugin Shopware.
L'image dans le PDF et l'e-mail
Avec l'espace réservé {{combined_image}}, vous insérez l'image produit actuelle dans le PDF ou l'e-mail du bouton d'action. Cela ne fonctionne qu'avec le moteur frontend V3 – en Legacy, l'espace réservé reste vide.
La vue 360°
La vue 360° montre le produit combiné en rotation. Elle n'existe qu'avec le moteur frontend Legacy ; V3 affiche à la place l'image combinée statique. Voir Moteur frontend : Legacy ou V3.
- Réglez Image combinée sur Image combinée 360°.
- Sur chaque valeur, téléversez dans la section Images 360° toute la séquence – une prise de vue par angle, triée dans le sens de rotation. Vous modifiez l'ordre par glisser-déposer, Tout supprimer vide la séquence.
- Toutes les valeurs ont besoin du même nombre d'images avec les mêmes angles, sinon les calques ne coïncident pas pendant la rotation.
Autres paramètres de la section image de produit combinée :
| Paramètre | Effet |
|---|---|
| Animation 360 | Animation pendant le chargement des images : Aucune animation de chargement, Chargement sans pourcentage, Chargement avec pourcentage ou Pourcentage uniquement |
| Séquence initiale en vue 360° | L'image de la séquence par laquelle la vue commence |
| Afficher l'icône 3D après (sélecteur CSS) | L'élément de la page après lequel l'icône 3D apparaît |
La couleur de l'animation de chargement se règle dans la section Design sous Couleur de l'animation de chargement.
Formats et tailles
| Autorisé | Taille | |
|---|---|---|
| Image sur la caractéristique, vignette, calque | JPG, PNG, GIF, WebP, SVG | max. 5 Mo par image |
| Images 360° | JPG, PNG, GIF, WebP – pas de SVG | max. 5 Mo par image, au maximum 360 images par valeur |
Vous pouvez choisir les images par clic ou les faire glisser dans le champ. Remplacer l'image échange une image, Supprimer l'image la supprime.
Recommandations (pas des exigences du système) : gardez les vignettes petites, environ 100–200 px. Les calques de l'image combinée à la taille à laquelle l'image apparaît sur la page – le plus souvent 800–1200 px de large. À qualité égale, le WebP est nettement plus léger que le PNG. Les grandes images ralentissent le configurateur, surtout sur smartphone et en 360° avec de nombreuses images par valeur.
Toutes les images d'un composant avec l'onglet Médias
À droite, dans les paramètres d'une caractéristique, l'onglet Médias affiche toutes les images du composant – images sur les caractéristiques, vignettes et calques. Un clic sur une image ouvre la caractéristique à laquelle elle appartient. Vous trouvez ainsi rapidement où une image est déposée.
Dépannage
- L'image combinée reste vide – Image combinée est sur Non, ou les valeurs choisies n'ont pas de calque dans la section Image.
- Un calque se trouve derrière un autre – vérifiez l'Ordre des images des deux caractéristiques. Le chiffre le plus grand est au-dessus.
- Les calques sont décalés les uns par rapport aux autres – les images ont des tailles ou des cadrages différents. Exportez tous les calques avec la même taille de toile. Offset X/Y n'aide qu'en Legacy.
- La vue 360° ne tourne pas – le composant s'exécute avec V3. Le 360° n'existe qu'en Legacy.
- L'image produit manque dans le PDF –
{{combined_image}}ne fonctionne qu'avec V3. - Le téléversement est refusé – fichier de plus de 5 Mo ou pas un format d'image. Pour les images 360°, le SVG n'est pas autorisé.
- L'image sur la caractéristique n'apparaît pas – Position de l'image d'option est sur Ne pas afficher.