Dos formas de capturar personalización
Shopify es dueño del storefront y del checkout, así que el input se añade a través de mecanismos nativos de Shopify. Elige una ruta.
- Propiedad de línea de pedido — un campo personalizado en la página de producto. Funciona en cualquier plan de Shopify. Requiere una pequeña edición de tema.
- Checkout UI extension — un bloque personalizado renderizado dentro del checkout. Solo Shopify Plus. Sin edición de tema, pero un desarrollador despliega una app personalizada.
Ambos métodos producen el mismo resultado: una propiedad vinculada a la línea de pedido. Mientras se llame Customization Request, Alva extrae el valor automáticamente.
Método 1 — Propiedad de línea de pedido
1. Abre la plantilla del producto
En el panel de Shopify, ve a Tienda online → Temas, haz clic en Editar código y abre sections/main-product.liquid (o product-template.liquid en temas más antiguos).
Editor de código de tema de Shopify. Muestra el árbol de archivos a la izquierda con main-product.liquid resaltado, y el archivo Liquid abierto a la derecha desplazado al bloque de formulario de producto. Sin datos reales de tienda visibles.
2. Añade el input dentro del formulario de producto
Dentro del bloque {% form 'product' %}, añade una etiqueta y un input de texto. El atributo name debe usar la sintaxis con corchetes properties[Customization Request] — esto le dice a Shopify que vincule el valor a la línea de pedido.
<label for="customization">Personalisation request</label>
<input type="text"
id="customization"
name="properties[Customization Request]"
maxlength="200"
required>3. Define restricciones de obligatoriedad y longitud
Añade required para que los clientes no puedan dejarlo en blanco, y maxlength="200" para que no puedan pegar un párrafo. Mantén la etiqueta concreta — Nombre a bordar es mejor que Personalización.
4. Guarda y coloca un pedido de prueba
Guarda la plantilla, mira el producto en el storefront, rellena el input y coloca un pedido de prueba. El valor aparece en Shopify en Pedido → Líneas de pedido y dentro de Alva en la página de detalle del pedido personalizado.
Una página de producto en el storefront con el input de personalización renderizado encima del botón Añadir al carrito. Campo etiquetado "Nombre a bordar" con un ejemplo de marcador. No se requiere marca real de tienda.
Método 2 — Checkout UI extension
Los comerciantes de Plus pueden renderizar el input dentro del propio checkout. Alva Digital Downloads no entrega esta extensión — construirla es una tarea de desarrollador de Shopify. Consulta la referencia de checkout UI extensions de Shopify para la API actual.
1. Genera una extensión
Desde una app de Shopify personalizada, ejecuta shopify app generate extension y elige Checkout UI extension. Elige el target purchase.checkout.block.render.
2. Escribe la propiedad de línea de pedido
Usa la API de propiedades de línea de pedido de @shopify/ui-extensions-react/checkout para vincular el valor a la línea de pedido bajo la clave Customization Request.
3. Despliega y coloca el bloque
Ejecuta shopify app deploy, luego en Ajustes → Checkout → Personalizar, suelta el nuevo bloque en el layout y coloca un pedido de prueba.
Dónde aparece el valor en Alva
Cuando Shopify dispara el webhook orders/paid, Alva lee cualquier propiedad de línea de pedido llamada exactamente Customization Request y la guarda contra la compra. La página de detalle del pedido personalizado renderiza el valor encima del cargador de archivo, y el mismo texto se incluye en el email de notificación al comerciante.
Preguntas frecuentes
¿Puedo hacer obligatorio el campo de personalización?
Sí. Añade el atributo HTML required. Shopify bloquea Añadir al carrito hasta que el campo tenga un valor. El método de checkout UI extension expone una opción required en los ajustes de la extensión.
¿Puedo capturar más de un input por producto?
Sí, pero Alva solo extrae automáticamente la propiedad llamada Customization Request. Otras propiedades de línea de pedido siguen apareciendo en el pedido de Shopify y son visibles dentro de Alva en la página de detalle del pedido.
¿Puede el cliente editar el input después de pagar el pedido?
No. Las propiedades de línea de pedido son inmutables una vez colocado el pedido. Si se necesita una corrección, pide al cliente que la envíe por email y actualiza las notas del pedido manualmente antes de subir el archivo.
Ver también
¿Te ha resultado útil?
Última actualización 2026-05-06