El checkout de Shopify siempre ha sido uno de sus puntos fuertes — y una de sus mayores limitaciones. Históricamente, solo los merchants de Shopify Plus podían personalizar el checkout con Scripts y checkout.liquid. En 2026, Shopify ha completado la transición hacia Checkout Extensibility, un nuevo modelo basado en componentes que reemplaza completamente al antiguo sistema.
¿Qué es Checkout Extensibility?
Checkout Extensibility es el framework de Shopify para personalizar el checkout usando:
- Checkout UI Extensions: Componentes React que se insertan en puntos específicos del checkout (banners, campos custom, upsells, mensajes).
- Shopify Functions: Lógica backend para descuentos, validaciones de envío y personalización de pagos (sustituyen a Scripts).
- Post-Purchase Extensions: Oferta upsell después del pago, antes de la página de confirmación.
- Web Pixels: Tracking personalizado con sandbox de seguridad.
El fin de checkout.liquid y Scripts
Timeline crítico para merchants Shopify Plus:
- 15 abril 2026: Scripts ya no se pueden editar ni crear.
- 30 junio 2026: Scripts se desactivan completamente.
- checkout.liquid: Ya deprecado. Las tiendas deben migrar a Checkout Extensibility.
Si tu tienda Shopify Plus aún usa Scripts o checkout.liquid, la migración es urgente.
Checkout UI Extensions: qué puedes hacer
Puntos de extensión disponibles
- purchase.checkout.header: Banner o mensaje en el header del checkout.
- purchase.checkout.contact.render-after: Después del formulario de contacto.
- purchase.checkout.shipping-option-list.render-after: Después de las opciones de envío.
- purchase.checkout.payment-method-list.render-before: Antes de los métodos de pago.
- purchase.checkout.actions.render-before: Antes del botón de pagar.
- purchase.thank-you.block: En la página de confirmación.
Casos de uso comunes
- Upsell en checkout: Ofrecer productos complementarios antes de pagar.
- Campos personalizados: Fecha de entrega preferida, NIF/CIF, nota de regalo.
- Mensajes de envío gratuito: «Añade X € más para envío gratis».
- Trust badges: Sellos de confianza, garantías, políticas de devolución.
- Programas de fidelización: Mostrar y canjear puntos en checkout.
- Validaciones custom: Verificar NIF, código postal, restricciones de edad.
Shopify Functions: lógica backend
Functions ejecutan lógica en el edge de Shopify con WebAssembly (Rust o JavaScript):
- Discount Functions: Descuentos complejos (BOGO, descuento por volumen, por combinación de productos).
- Shipping Functions: Ocultar/renombrar/reordenar métodos de envío según carrito.
- Payment Functions: Ocultar/reordenar métodos de pago según condiciones.
- Cart Transform Functions: Modificar el carrito (bundles, merge line items).
- Delivery Customization: Personalizar fechas de entrega estimadas.
Migración de Scripts a Functions
| Script anterior | Function equivalente |
|---|---|
| Line Item Script (descuentos) | Discount Function |
| Shipping Script (envío) | Delivery Customization / Shipping Discount |
| Payment Script (pagos) | Payment Customization Function |
Desarrollo con Checkout Extensibility
El stack de desarrollo:
- Shopify CLI: Scaffolding, desarrollo local y deploy.
- React: UI Extensions usan componentes React con el UI Kit de Shopify.
- Rust o JavaScript: Functions se compilan a WASM.
- GraphQL: Admin API y Storefront API para datos.
¿Necesitas personalizar tu checkout?
En Keliam desarrollamos extensiones de checkout para Shopify: UI Extensions, Functions y Post-Purchase. Contacta con nosotros para migrar tus Scripts o personalizar tu checkout.
