Cuando un cliente personaliza uno de tus productos, rellena un pequeño formulario junto a la vista previa en vivo. Esta guía explica todos los tipos de campo que puede mostrar ese formulario, para que sepas qué ven tus clientes y cómo se comporta cada uno. Está escrita para comerciantes que quieren entender el personalizador desde el lado del comprador.
Tú decides qué campos aparecen cuando construyes el producto en el Design Studio. Después el personalizador muestra el control adecuado para cada uno. Esto es lo que hace cada campo.
Se dividen en tres grupos: las entradas generales (texto, opciones, números y fechas), los selectores (color y fuente) y los campos que pertenecen a un elemento concreto del diseño.
Texto y área de texto
Un campo de texto es de una sola línea. El cliente escribe un nombre, una fecha o una frase corta, y pasa directamente al texto correspondiente del diseño.
Un área de texto es la versión de varias líneas. Crece a medida que el cliente añade líneas, así que sirve para mensajes más largos, como una nota o un verso corto.
Cuando fijas una longitud máxima en un campo de texto, el personalizador muestra un contador de caracteres en vivo bajo el campo. Se actualiza mientras el cliente escribe, por ejemplo 12/30, de modo que siempre sabe cuánto espacio le queda. El contador solo aparece cuando hay un límite.
Los campos de texto y de área de texto también pueden llevar opciones de fuente y de color. Cuando las permites, aparecen pequeñas fichas de fuentes y muestras de color justo bajo el campo. El cliente elige una y el texto del diseño se actualiza. Esa parte de estos campos se explica en elegir colores y fuentes.
En un campo de texto de una sola línea, una regla de formato configurada puede mostrar un error en línea del tipo “El formato de Nombre no es válido”. Las áreas de texto no ofrecen esa misma comprobación de formato en vivo. Lee los mensajes de validación que queden al enviar el diseño.
Opciones: lista desplegable, radio, casilla
Estos tres tipos de campo dejan que el cliente elija entre opciones que tú defines en lugar de escribir libremente.
Una lista desplegable muestra una lista de opciones. Si le das diez opciones o menos, sigue siendo una lista simple. Si tiene más de diez, el personalizador la convierte en una lista con búsqueda y filtrado al escribir. El cliente empieza a escribir y la lista se reduce a las opciones que coinciden, lo que mantiene fácil de recorrer una lista larga.
Las opciones de radio muestran cada opción como una cápsula. El cliente toca una para seleccionarla. Puedes asociar una imagen pequeña o una muestra de color a cada opción, de modo que la cápsula muestre una vista previa junto a la etiqueta. Funciona bien para cosas como el estilo de un marco o el color de un hilo.
Una casilla es un interruptor de sí o no. Activa o desactiva una capa del diseño, de modo que el cliente puede añadir o quitar una parte del diseño, como un gráfico en la espalda de una camiseta o una línea de texto adicional.
Si una lista de opciones está vacía, el personalizador oculta ese campo al cliente. El campo permanece oculto hasta que añades al menos una opción en el Design Studio.
Número y fecha
Un campo numérico tiene botones de menos y de más a los lados de un valor editable. El botón de menos se detiene en el mínimo configurado y el de más en el máximo; ambos usan el paso configurado. Los clientes también pueden escribir un valor, así que revisa los mensajes de validación del campo antes de continuar.
Un campo de fecha usa el selector de fecha del propio dispositivo. En un móvil es la rueda de fecha nativa, y en un ordenador es el control de fecha del navegador. Un campo de mes de calendario funciona igual, pero usa el selector de mes del dispositivo, así que el cliente elige un mes en lugar de una fecha completa.
Lo que elija el cliente pasa al texto correspondiente del diseño, igual que en un campo de texto.
Selectores de color y de fuente
Un campo de color es una fila de muestras bajo el encabezado Elige un color. Las muestras son los colores que permitiste al construir el producto, así que un cliente no puede elegir algo que tu proceso de impresión no pueda producir. La muestra elegida recibe un borde de acento.
Un campo de fuente abre una lista Elige una fuente. Empieza en Elegir tipografía… y, cuando la lista es larga, incluye un cuadro Buscar tipografías… que se reduce mientras el cliente escribe. Solo aparecen las fuentes que permitiste.
Ambos funcionan igual que una lista desplegable desde el punto de vista del cliente: elige una y el diseño se actualiza detrás del formulario.
Campos que pertenecen a un elemento
Algunos campos no son una entrada general. Pertenecen a un elemento concreto del diseño, y el personalizador muestra el control que ese elemento necesita:
- Un campo de foto es una zona de subida. Consulta subir una foto.
- Un campo de gráfico es un selector de tus propias ilustraciones. Consulta deja que los clientes elijan un gráfico.
- Un campo de mapa, ruta o viaje ofrece una búsqueda de ubicación, una subida de archivo o una lista de paradas.
- Un campo de mapa estelar, de luna o de calendario ofrece una fecha y, a veces, una hora y un lugar.
- Un campo de avatar abre el creador de personajes.
Estos siguen las reglas que fijas en ese elemento y no las de un tipo de campo genérico. Cada uno se explica en elementos inteligentes.
Otros dos vienen del producto y no del diseño: un selector de variante para la versión que se compra y un selector de complementos para los extras. Consulta complementos.
Campos obligatorios y validación
Puedes marcar cualquier campo como obligatorio. Un campo obligatorio muestra un asterisco junto a su etiqueta, para que el cliente sepa que debe rellenarlo.
Si un campo obligatorio está vacío cuando el cliente pulsa Añadir al carrito, el personalizador bloquea la acción y nombra el campo que hay que completar. Rellenarlo resuelve ese error de campo que faltaba; puede que otras validaciones o comprobaciones de disponibilidad aún requieran atención.
Dónde aparece ese mensaje depende del diseño que elegiste. Un personalizador de una sola página no tiene nada que rechazar hasta Añadir al carrito, y dice “Completa” con el nombre del campo. Uno paso a paso rechaza antes, en el límite del paso, y dice “Por favor completa:” con el nombre del campo; el producto no se añade al carrito muestra este último.
Los límites de longitud de los campos de texto y de área de texto muestran un contador en vivo. Un campo de texto de una sola línea también puede mostrar un error de formato en línea mientras el cliente escribe. Revisa los mensajes que queden al enviar el diseño.
¿Por qué mi lista desplegable no muestra un cuadro de búsqueda?
El cuadro de búsqueda aparece solo cuando la lista desplegable tiene más de diez opciones. Con diez o menos, sigue siendo una lista simple.
¿Dónde elijo qué campos son obligatorios?
Los campos obligatorios los defines en el Design Studio al construir el producto, no en el personalizador.
¿Puede un cliente escribir más allá del límite de caracteres?
No. La longitud máxima que fijas impide seguir escribiendo, y el contador muestra lo cerca que está del límite.
Para configurar estos campos y decidir cuáles pueden editar los clientes, consulta haz que los campos sean editables por el cliente.
Siguiente: cómo personaliza un cliente un producto.