Las imágenes hacen que su configurador sea mucho más atractivo y aumentan la confianza en la compra. Con la visualización de imágenes, los clientes ven inmediatamente cómo queda el producto configurado con cada selección.
¿Qué método elegir?
Tengo fotos del producto en diferentes variantes (p.ej. persiana en blanco, antracita, bronce) → Imágenes de opciones
Quiero combinar variantes visualmente (p.ej. color + lámina visibles simultáneamente) → Tecnología de capas (imagen combinada)
Quiero una vista de producto giratoria → 360°
Imágenes de opciones
El principio más simple: cada opción recibe su propia imagen. Cuando el cliente elige una opción, se muestra la imagen correspondiente.
Añadir una imagen a una opción:
- Pestaña Características → hacer clic en la característica (p.ej. «Color»)
- En el panel derecho, abrir la sección VALORES → hacer clic en la opción
- En la sección IMAGEN, subir la imagen
- Formato recomendado: JPG o WebP, 800×800 px, fondo blanco o transparente
Uso típico: la selección de color — cada color muestra el producto en el color elegido.
Tecnología de capas (imagen combinada)
Con varias características configurables que influyen en la imagen, una foto por combinación supondría rápidamente cientos de imágenes. La tecnología de capas resuelve ese problema:
En lugar de una imagen completa por combinación, añade capas PNG transparentes por opción. configento.app superpone las capas en tiempo real para crear la imagen final del producto.
Ejemplo de una persiana:
- Capa base: marco y cajón (siempre visibles)
- Capa color Blanco: imagen de las lamas en blanco (transparente)
- Capa color Antracita: imagen de las lamas en antracita (transparente)
- Capa accionamiento Eléctrico: cajón del motor arriba (transparente)
Activar capas:
- En la pestaña Configuración → General → CONFIGURACIÓN DE IMAGEN: elegir Imagen de producto combinada
- Por opción: en el panel derecho, abrir la sección IMAGEN → Subir capa
- Subir un PNG transparente — todas las capas deben tener exactamente el mismo tamaño
- Definir el índice z (valor mayor = más adelante)
Importante: Todas las capas deben tener la misma resolución (p.ej. todas 1200×1200 px); de lo contrario la superposición no encajará.
Vista 360°
Para una vista de producto giratoria, suba tomas desde todos los ángulos.
Prerrequisitos:
- De 24 a 48 imágenes (cuantas más, más fluido el giro)
- Mismo tamaño de imagen y misma iluminación en todas las tomas
- Imágenes ordenadas en el sentido de giro correcto
Configuración:
- En la pestaña Configuración → General → CONFIGURACIÓN DE IMAGEN: elegir Imagen de producto combinada 360°
- Subir todas las imágenes en el orden correcto
La tecnología de capas también funciona en el modo 360°.
Tamaño de imagen y rendimiento
| Formato | Recomendación |
|---|---|
| Imágenes de opciones | 800×800 px, JPG o WebP |
| Capas | 1200×1200 px, PNG transparente |
| Imágenes 360° | 800×800 px, JPG |
Las imágenes demasiado grandes ralentizan el configurador, especialmente en dispositivos móviles. WebP ofrece la mejor compresión.
Posición de la imagen
En Configuración → General → CONFIGURACIÓN DE IMAGEN → Posición de las imágenes de características define si la imagen del producto aparece a la izquierda o a la derecha de las características.