Las imágenes muestran a sus clientes lo que están configurando. configento.app conoce tres tipos: una imagen en la característica, una miniatura en el valor para la selección y la imagen de producto combinada, que se compone capa a capa a partir de las imágenes de los valores elegidos – si lo desea, también como vista giratoria de 360°.
¿Qué tipo de imagen necesita?
| Quiere … | Entonces use … |
|---|---|
| mostrar una imagen explicativa junto a una característica, p. ej. un croquis «Así se mide el ancho» | la imagen en la característica |
| que sus clientes elijan valores mediante imágenes pequeñas, p. ej. muestras de color | la miniatura del valor |
| componer el producto terminado a partir de los valores elegidos, p. ej. estructura + tejido + accionamiento | la imagen de producto combinada |
| mostrar el producto compuesto de forma giratoria | la Imagen combinada 360° (solo Legacy) |
Imagen en la característica
- Seleccione la característica en el árbol de estructura.
- A la derecha, abra la sección Imagen y suba la imagen.
Dónde aparece la imagen junto a la característica se configura para todo el componente: pestaña Ajustes → General → Posición de imagen de opción → Izquierda, Derecha o No mostrar.
Hay imagen en la característica en las características de selección, campos de entrada, campos estáticos, atributo de producto y paquete.
Imágenes en los valores
Un clic en un valor de la sección Valores abre sus ajustes. Allí hay dos campos de imagen:
| Sección | Para qué | Campos adicionales |
|---|---|---|
| Miniatura | La imagen pequeña con la que el cliente elige el valor – sobre todo con el tipo de dato Lista con imágenes | W (px) y H (px): tamaño de visualización de la miniatura (solo Legacy) |
| Imagen | La capa para la imagen de producto combinada | Offset X y Offset Y: desplazamiento de la capa en píxeles (solo Legacy) |
Si la imagen de producto combinada está configurada en 360°, la sección Imagen se llama Imágenes 360° y admite toda una secuencia de imágenes (ver más abajo).
La imagen de producto combinada
En lugar de hacer una foto para cada combinación, crea una capa para cada valor. El configurador superpone las capas de los valores elegidos.
Ejemplo: techo de terraza
| Característica | Orden de imagen | Capas de los valores |
|---|---|---|
| Estructura | 1 | Estructura antracita, estructura blanca |
| Cubierta | 2 | Vidrio transparente, vidrio mate, placas alveolares |
| Pared lateral | 3 | sin (sin imagen), pared corredera de vidrio |
Configuración
- Active la imagen combinada: pestaña Ajustes → General → sección Imagen de producto combinada → Imagen combinada = Imagen de producto combinada.
- En cada valor que deba verse en la imagen, suba su capa en la sección Imagen.
- Defina el orden de apilado en la característica, en el campo Orden de imagen. Las características con número menor quedan abajo; las de número mayor, encima.
- Compruebe el resultado en la vista previa.
Para que las capas encajen
- Todas las capas tienen el mismo tamaño de imagen y el mismo encuadre.
- Todo lo que no sea la pieza en sí es transparente – use PNG o WebP con transparencia; SVG también funciona.
- La capa inferior (normalmente la estructura base) cubre todo el fondo.
- Un valor sin imagen no aporta nada a la imagen total – práctico para «sin».
Dónde aparece la imagen en la tienda
Dónde se sitúa la imagen combinada en la página del producto depende de la integración. En Magento y Shopware indica en los ajustes del plugin un selector CSS para la zona de imagen; vea Instalar plugin Magento e Instalar plugin Shopware.
La imagen en el PDF y en el e-mail
Con el marcador {{combined_image}} inserta la imagen de producto actual en el PDF o el e-mail del botón de acción. Solo funciona con el motor de frontend V3 – en Legacy el marcador queda vacío.
La vista 360°
La vista 360° muestra el producto combinado de forma giratoria. Solo existe en el motor de frontend Legacy; V3 muestra en su lugar la imagen combinada estática. Vea Motor de frontend: Legacy o V3.
- Ponga Imagen combinada en Imagen combinada 360°.
- En cada valor, suba en la sección Imágenes 360° toda la secuencia de imágenes – una toma por ángulo, ordenadas en el sentido del giro. El orden se cambia arrastrando; Eliminar todo vacía la secuencia.
- Todos los valores necesitan el mismo número de imágenes con los mismos ángulos; si no, las capas no encajan al girar.
Otros ajustes de la sección Imagen de producto combinada:
| Ajuste | Efecto |
|---|---|
| Animación 360 | Animación mientras cargan las imágenes: Sin animación de carga, Carga sin porcentaje, Carga con porcentaje o Solo porcentaje |
| Secuencia inicial en vista 360° | Con qué imagen de la secuencia empieza la vista |
| Mostrar icono 3D después de (selector CSS) | Detrás de qué elemento de la página aparece el símbolo 3D |
El color de la animación de carga se configura en la pestaña Diseño, en Color de la animación de carga.
Formatos y tamaños
| Permitido | Tamaño | |
|---|---|---|
| Imagen en la característica, miniatura, capa | JPG, PNG, GIF, WebP, SVG | máx. 5 MB por imagen |
| Imágenes 360° | JPG, PNG, GIF, WebP – sin SVG | máx. 5 MB por imagen, como máximo 360 imágenes por valor |
Puede elegir las imágenes con un clic o arrastrarlas al campo. Reemplazar imagen cambia una imagen; Eliminar imagen la borra.
Recomendaciones (no son requisitos del sistema): mantenga las miniaturas pequeñas, unos 100–200 px. Las capas de la imagen combinada, en el tamaño en que la imagen aparece en la página – normalmente 800–1200 px de ancho. Con la misma calidad, WebP es bastante más ligero que PNG. Las imágenes grandes ralentizan el configurador, sobre todo en el móvil y en 360° con muchas imágenes por valor.
Todas las imágenes de un componente: la pestaña «Medios»
A la derecha, en los ajustes de una característica, la pestaña Medios muestra todas las imágenes de todo el componente – imágenes en características, miniaturas y capas. Un clic en una imagen abre la característica a la que pertenece. Así encuentra rápidamente dónde está una imagen.
Solución de problemas
- La imagen combinada queda vacía – Imagen combinada está en No, o los valores elegidos no tienen capa en la sección Imagen.
- Una capa queda detrás de otra – compruebe el Orden de imagen de las dos características. El número mayor queda arriba.
- Las capas están desplazadas entre sí – las imágenes tienen tamaños o encuadres distintos. Exporte todas las capas con el mismo tamaño de lienzo. Offset X/Y solo ayuda en Legacy.
- La vista 360° no gira – el componente funciona con V3. 360° solo existe en Legacy.
- Falta la imagen de producto en el PDF –
{{combined_image}}solo funciona con V3. - Se rechaza la subida – archivo de más de 5 MB o que no es una imagen. En las imágenes 360° no se permite SVG.
- La imagen de la característica no aparece – Posición de imagen de opción está en No mostrar.