Esta guía te muestra cómo controlar el personalizador que ve el cliente en un producto. Elegirás el diseño del formulario, definirás el orden en que aparecen tus campos y verás una vista previa del personalizador real dentro del Design Studio. Es para comerciantes que ya han hecho editables algunos campos por el cliente y quieren dar forma a cómo se siente el formulario para los clientes.
Si todavía no has hecho editable ningún campo, empieza por haz que los campos sean editables por el cliente. El formulario solo muestra los campos que has abierto a los clientes.
Elige un diseño de formulario
Abre el panel Customizer desde la barra izquierda para definir cómo avanzan los clientes por los campos. Bajo Diseño, alterna entre Una página y Pasos. Pasos muestra entonces cómo pueden verse los pasos, cada uno como una pequeña imagen: Indicador de pasos, Acordeón o Pestañas, con las opciones más finas, como el estilo del progreso y dónde se muestra el precio, bajo Más. La vista previa del panel de la derecha sigue lo que elijas.
Esto es lo que hace cada uno:
- Una página mantiene los campos en un solo formulario.
- Pasos / Indicador de pasos organiza los campos en pasos sucesivos.
- Pasos / Acordeón agrupa los campos en secciones desplegables.
- Pasos / Pestañas muestra un paso cada vez, con los pasos como pestañas encima.
Abre los ajustes del formulario
En el Design Studio, haz clic en Customizer en la barra izquierda. Los ajustes del formulario se abren en el panel.
Elige tu diseño
Bajo Diseño, elige Una página o Pasos, y elige la estructura si hace falta. Guarda los cambios y actualiza la publicación prevista antes de comprobar el flujo del cliente.
Reordena los campos y ve la vista previa
El panel de la derecha usa componentes de formulario compartidos con los ajustes actuales del editor. Sirve para comprobar los campos y el aspecto, pero la página publicada que ve el cliente aún necesita una comprobación aparte. Alterna el panel entre Editar y Vista previa cerca de la parte superior.
En Editar organizas el formulario. Apunta a un campo y aparecen un pequeño tirador y un lápiz: arrastra el tirador para cambiar el orden del campo y haz clic en el lápiz para saltar directamente a los ajustes de ese campo en el editor. El panel Customizer de la barra izquierda lista los mismos campos, y también puedes reordenarlos allí.
En el modo Vista previa actúas como un cliente. Escribes en los campos y ves cómo se actualiza el lienzo en vivo, para comprobar que el diseño responde como esperas.
Abre el panel del personalizador
Haz clic en el panel del personalizador, en el borde derecho del Design Studio. Se abre con el interruptor Editar / Vista previa cerca de la parte superior.
Reordena los campos en Editar
Con el interruptor en Editar, apunta a un campo y arrástralo hacia arriba o hacia abajo por su tirador para cambiar su posición. El orden que fijas aquí es el orden que ven los clientes. Esto reescribe el orden de los campos de todo el producto, no solo de esta vista.
Salta al elemento de un campo
Sin salir de Editar, apunta a un campo y haz clic en su lápiz. Composerie selecciona el elemento de ese campo y abre sus propiedades, para que puedas ajustar el texto, la imagen u otros ajustes que hay detrás.
Cambia a Vista previa y escribe
Haz clic en Vista previa en el interruptor. Escribe en los campos como lo haría un cliente. El lienzo se actualiza en vivo mientras escribes, así que puedes confirmar que el diseño reacciona bien antes de publicar.
Con Pasos, la lista de campos muestra cada paso con sus campos debajo. Añadir paso añade uno vacío; un paso sin campos se omite para los clientes. Los campos que aún no están en ningún paso quedan al final bajo Opciones, el último paso que ven los clientes. Arrastra un campo a un paso, o usa Mover a en él para ponerlo al final de un paso.
Si el producto tiene varias caras, como una frontal y una trasera, recuerda que el formulario abarca los campos de todas ellas. Consulta gestionar las caras de un producto para configurarlas.
Preguntas frecuentes
¿Cambia reordenar en el panel el orden para los clientes?
Cambia el orden de los campos del editor. Guarda y actualiza la publicación prevista, y luego comprueba la página real del cliente.
¿Por qué los botones Añadir al carrito y Compartir aparecen atenuados?
El panel es una vista previa, no un carrito real. Esos botones permanecen desactivados para que no puedas hacer un pedido de prueba desde él.
¿Coincidirá la vista previa con lo que ven realmente los clientes?
Usa componentes de formulario compartidos y los ajustes actuales del editor. Comprueba por separado la página publicada para ver su configuración guardada, las funciones disponibles, el diseño según el dispositivo y el comportamiento del carrito.
¿Puedo cambiar de diseño más tarde?
Sí. Cambia el diseño en la vista Formulario del panel, guarda el cambio y actualiza la publicación prevista. Verifica el nuevo flujo en la tienda antes de depender de él.
Siguiente
Para comprobar la experiencia de principio a fin, lee cómo personaliza un cliente un producto.