Con la característica Imagen propia en el producto, tus clientes suben una foto o un logotipo y lo ven al instante en la imagen del producto, exactamente en el lugar donde después se imprimirá, grabará o bordará. Ellos mismos mueven, giran, reflejan y recortan la imagen. Ejemplos típicos son tazas con foto, camisetas con logotipo, placas, etiquetas y artículos promocionales. Este artículo muestra cómo configurar la característica y qué pueden hacer tus clientes con ella. Para texto existe la característica hermana Texto propio en el producto; ambas se pueden combinar en el mismo producto.
Requisitos
- Motor de frontend V3. Por eso el tipo de dato se llama Imagen propia en el producto (solo V3). Un componente con esta característica funciona automáticamente con V3. Más información: Motor de frontend: Legacy o V3.
- Imagen de producto combinada. La imagen del cliente se dibuja en la imagen de producto combinada. Por tanto, el componente necesita al menos una característica cuyos valores tengan imágenes para la imagen de producto combinada. Consulta Visualización de imágenes y carga de imágenes.
- Complemento «Designer». Para publicar necesitas el complemento Designer, que contratas en el portal de servicio, en tus servicios. Durante la prueba gratuita siempre está incluido, y en la licencia Enterprise sin coste adicional.
Crear la característica
- Abre el componente y crea una característica nueva.
- Elige Entrada libre como categoría de datos e Imagen propia en el producto (solo V3) como tipo de dato.
- En Diseño en el producto, configura la zona de diseño, el ajuste de la imagen y la resolución (ver más abajo).
- Guarda, revisa la vista previa y publica el componente.
Como en cualquier característica, Campo obligatorio decide si tu cliente tiene que subir una imagen.
La zona de diseño
La zona de diseño es la parte del producto donde puede ir la imagen, por ejemplo la parte delantera de la taza o el pecho de una camiseta.
- El editor muestra la imagen inferior de la imagen de producto combinada, es decir, el producto base. Arrastra el recuadro al lugar correcto y cambia su tamaño con la esquina.
- Introduce Ancho (mm) y Alto (mm): el tamaño real de la zona en el producto. Con ello configento.app calcula la resolución de impresión de la imagen en dpi.
- Con Rotación (°) giras la zona, por ejemplo para una superficie inclinada.
La imagen nunca sale de la zona. La zona es lo que se producirá después.
Una zona que crece con el formato
Si tu cliente elige el tamaño del producto, por ejemplo una placa en ancho × alto, la zona de diseño puede crecer con él:
| Ajuste | Efecto |
|---|---|
| Ancho de, Alto de | Tamaño fijo usa los valores en mm de arriba. Si eliges en su lugar un campo numérico o una fórmula, la zona toma el valor que tu cliente ajuste allí. |
| Margen (mm) | Se resta del tamaño elegido en cada lado, por ejemplo para un borde sin imprimir. |
La zona en la imagen es entonces la superficie más grande posible; adopta la proporción elegida.
Ajuste, resolución y bloqueos
| Ajuste | Efecto |
|---|---|
| Ajuste de la imagen | Mostrar la imagen completa encaja toda la imagen en la zona; pueden quedar bordes vacíos. Rellenar la zona rellena toda la zona y para ello recorta la imagen. |
| Avisar por debajo de (dpi) | Si la imagen queda por debajo de este valor en el tamaño de impresión elegido, tu cliente ve un aviso. Por defecto: 150. 0 = sin aviso. |
| Rechazar por debajo de (dpi) | Si la imagen queda por debajo, la configuración no puede ir al carrito. Por defecto: 0 = nunca. |
| El comprador no puede cambiar | Bloquea Posición, Tamaño, Rotación, Reflejar o Recortar. Tu cliente no ve las herramientas bloqueadas. |
Tus clientes suben imágenes PNG o JPG de hasta 20 MB. configento.app borra a los 30 días las imágenes que nadie añade al carrito.
Lo que ve tu cliente
- el botón Subir imagen con la indicación «PNG o JPG, hasta 20 MB»,
- tras la subida, una pequeña vista previa con el nombre del archivo y la resolución, por ejemplo «508 dpi»,
- según tus ajustes, las herramientas Tamaño, Rotación (control deslizante y Girar a la izquierda / Girar a la derecha), Reflejar y Recortar,
- Reemplazar y Quitar,
- la imagen en directo en la imagen del producto.
Tu cliente puede desplazar la imagen en la imagen del producto con el ratón o con el dedo, siempre que no hayas bloqueado la posición. Con la imagen seleccionada, también funciona con las teclas de flecha. Restablecer la posición la devuelve a su posición inicial.
Recortar abre una ventana en la que tu cliente elige un encuadre. Imagen completa deshace el recorte, Aplicar lo aplica.
Si la imagen se amplía tanto que su resolución baja de Avisar por debajo de (dpi), aparece «La resolución es baja a este tamaño: la impresión puede verse borrosa.». La resolución siempre se refiere al tamaño real de impresión.
En el pedido
El pedido contiene la imagen con su nombre de archivo y su resolución, por ejemplo:
logo.png · 508 dpi
Además llega la imagen original para descargar, tal como la subió tu cliente. Posición, tamaño, rotación, reflejo y recorte se transmiten como datos, y la imagen de producto combinada en el carrito, en los correos y en el PDF muestra la imagen en su sitio. Si tu cliente vuelve a abrir la configuración, todo está como lo diseñó.
Precios, reglas y campo obligatorio funcionan como en cualquier otra característica, por ejemplo un recargo en cuanto se ha subido una imagen.
El complemento «Designer»
- Durante la prueba gratuita puedes usar la característica sin restricciones.
- Después necesitas el complemento Designer contratado, que incluye texto propio e imagen propia. Sin el complemento, el tipo de dato está bloqueado en el editor. Puedes seguir editando las características existentes, pero al publicar configento.app te remite al complemento.
- Si el complemento termina, un componente ya publicado sigue funcionando sin cambios en tu tienda.
Solución de problemas
- El editor no muestra ninguna imagen para la zona de diseño: el componente aún no tiene imagen en la imagen de producto combinada. Añade primero una imagen a un valor.
- «Sube una imagen PNG o JPG.»: no se aceptan otros formatos como PDF, SVG o HEIC. Tu cliente guarda antes la imagen como PNG o JPG.
- «La imagen supera 20 MB.» o «La imagen tiene demasiados píxeles.»: tu cliente sube una versión más pequeña.
- El aviso de resolución aparece enseguida: la zona es grande en mm y la imagen tiene pocos píxeles para ella. Revisa Ancho (mm) y Alto (mm), baja Avisar por debajo de (dpi) o pide a tus clientes imágenes más grandes.
- La imagen no aparece en la imagen del producto: comprueba que en la vista previa haya una imagen base seleccionada y que el Motor esté en V3.
- La publicación falla con un aviso sobre el complemento: contrata el complemento Designer en el portal de servicio y vuelve a publicar.