Les images rendent votre configurateur bien plus attractif et renforcent la confiance à l'achat. Avec la visualisation des images, les clients voient immédiatement à quoi ressemble le produit configuré à chaque sélection.
Quelle méthode choisir ?
J'ai des photos du produit dans différentes variantes (par ex. store en blanc, anthracite, bronze) → Images d'options
Je veux combiner visuellement des variantes (par ex. couleur + lame visibles simultanément) → Technologie de calques (image combinée)
Je veux une vue produit rotative → 360°
Images d'options
Le principe le plus simple : chaque option reçoit sa propre image. Lorsque le client choisit une option, l'image correspondante s'affiche.
Ajouter une image à une option :
- Onglet Caractéristiques → cliquer sur la caractéristique (par ex. « Couleur »)
- Dans le panneau de droite, ouvrir la section VALEURS → cliquer sur l'option
- Dans la section IMAGE, télécharger l'image
- Format recommandé : JPG ou WebP, 800×800 px, fond blanc ou transparent
Cas d'usage typique : le choix de la couleur — chaque couleur montre le produit dans la couleur sélectionnée.
Technologie de calques (image combinée)
Avec plusieurs caractéristiques configurables ayant une influence visuelle, une photo par combinaison représenterait rapidement des centaines d'images. La technologie de calques résout ce problème :
Au lieu d'une image complète par combinaison, vous ajoutez des calques PNG transparents par option. configento.app superpose les calques en temps réel pour créer l'image produit finale.
Exemple d'un volet roulant :
- Calque de base : le cadre et le coffre (toujours visibles)
- Calque couleur Blanc : image des lames en blanc (transparente)
- Calque couleur Anthracite : image des lames en anthracite (transparente)
- Calque entraînement Électrique : le coffre du moteur en haut (transparent)
Activer les calques :
- Dans l'onglet Paramètres → Général → PARAMÈTRES D'IMAGE : choisir Image produit combinée
- Par option : dans le panneau de droite, ouvrir la section IMAGE → Télécharger le calque
- Télécharger un PNG transparent — tous les calques doivent avoir exactement la même taille
- Définir l'index z (valeur plus élevée = devant)
Important : Tous les calques doivent avoir la même résolution (par ex. tous 1200×1200 px), sinon la superposition ne sera pas correcte.
Vue 360°
Pour une vue produit rotative, vous téléchargez des prises de vue sous tous les angles.
Prérequis :
- 24 à 48 images (plus il y en a, plus la rotation est fluide)
- Même taille d'image et même éclairage pour toutes les prises de vue
- Images triées dans le bon sens de rotation
Configuration :
- Dans l'onglet Paramètres → Général → PARAMÈTRES D'IMAGE : choisir Image produit combinée 360°
- Télécharger toutes les images dans le bon ordre
La technologie de calques fonctionne également en mode 360°.
Taille des images et performances
| Format | Recommandation |
|---|---|
| Images d'options | 800×800 px, JPG ou WebP |
| Calques | 1200×1200 px, PNG transparent |
| Images 360° | 800×800 px, JPG |
Des images trop volumineuses ralentissent le configurateur — en particulier sur les appareils mobiles. WebP offre la meilleure compression.
Position de l'image
Sous Paramètres → Général → PARAMÈTRES D'IMAGE → Position des images de caractéristiques, vous définissez si l'image produit apparaît à gauche ou à droite des caractéristiques.