Extensibilidad de Shopify Checkout: guía completa para 2026

Shopify procesa más de 235 mil millones de dólares en GMV anual a través de su caja. Con la obsolescencia de checkout.liquid y la implementación completa de Checkout Extensibility, cada comerciante de Shopify debe comprender cómo funciona el nuevo sistema, qué permite y cómo migrar sin perder conversiones.

Esta guía cubre todos los componentes principales de Shopify Checkout Extensibility: extensiones de interfaz de usuario, Shopify Functions, Branding API, bloques de pago, personalización de pagos y envíos, y las estrategias que convierten el pago en una ventaja competitiva.

Conclusiones clave

• Checkout Extensibility reemplaza checkout.liquid con una arquitectura segura y con capacidad de actualización basada en extensiones de interfaz de usuario y funciones de Shopify.
• Las extensiones de la interfaz de usuario de pago se ejecutan en un entorno de espacio aislado utilizando componentes basados en React representados a través de objetivos de pago
• Las funciones de Shopify te permiten personalizar la lógica de descuentos, el filtrado de métodos de pago y la manipulación de tarifas de envío en el lado del servidor sin llamadas API externas.
• La API Checkout Branding proporciona control granular sobre colores, tipografía, espaciado y diseño sin tocar el código de extensión.
• La migración desde checkout.liquid es obligatoria para los comerciantes de Shopify Plus y debe planificarse sistemáticamente para evitar caídas en la conversión.
• Los flujos de pago personalizados pueden aumentar las tasas de conversión entre un 8% y un 15% cuando se implementan con pruebas de UX adecuadas.

¿Qué es la extensibilidad del pago?

Checkout Extensibility es el marco de Shopify para personalizar la experiencia de pago. Reemplaza el enfoque heredado de checkout.liquid con un sistema diseñado en torno a tres pilares:

1. Extensiones de UI de pago --- Componentes basados en React que se representan en ubicaciones específicas dentro del flujo de pago
2. Funciones de Shopify --- Lógica del lado del servidor que se ejecuta dentro de la infraestructura de Shopify para personalizar las reglas comerciales
3. API de marca de pago --- Una API GraphQL para controlar la apariencia visual del pago

A diferencia de checkout.liquid, que les dio a los comerciantes control total de HTML/CSS/JS pero creó riesgos de actualización y seguridad, Checkout Extensibility brinda personalización dentro de un entorno controlado que Shopify puede continuar optimizando.

Extensiones de interfaz de usuario de pago

Cómo funcionan

Las extensiones de la interfaz de usuario de pago se crean utilizando el marco de extensión de la interfaz de usuario de Shopify. Se representan dentro de objetivos de extensión predefinidos (también llamados puntos de extensión) dentro del flujo de pago. Cada destino corresponde a una ubicación específica: antes del selector de método de envío, después del resumen del pedido, dentro de la sección de pago, etc.

Las extensiones utilizan un conjunto limitado de componentes de interfaz de usuario proporcionados por Shopify:

| Componente | Propósito | Casos de uso comunes | |-----------|-----------------|-----------------| | Estandarte | Mostrar alertas o promociones | Umbrales de envío gratuito, ofertas por tiempo limitado | | BlockStack/InlineStack | Contenedores de diseño | Organización de campos y contenido personalizados | | Campo de texto | Colección de entrada de texto | Mensajes de regalo, instrucciones personalizadas | | Casilla de verificación | Selecciones booleanas | Suscripción al boletín, aceptación de términos | | Seleccionar | Selecciones desplegables | Preferencias de fecha de entrega | | Título/Texto | Tipografía | Encabezados de sección, texto auxiliar | | Imagen | Contenido visual | Insignias de confianza, elementos de marca | | Divisor | Separación visual | Saltos de sección |

Objetivos de extensión en el flujo de pago

El flujo de pago ofrece docenas de objetivos de extensión agrupados por sección:

Antes y después de todo el proceso de pago --- Purchase.checkout.header.render-after y buy.checkout.footer.render-after le permiten agregar contenido durante todo el proceso de pago.

Sección de dirección de envío --- Represente el contenido antes o después del formulario de dirección de envío con objetivos de compra.checkout.shipping-address.render-before y render-after.

Sección de método de envío --- Agregue pancartas, información o interfaz de usuario personalizada antes o después de la lista de opciones de envío.

Sección de método de pago --- Inserte insignias de confianza, información de pago o campos personalizados alrededor del selector de método de pago.

Resumen del pedido --- Agregue ventas adicionales, ventas cruzadas o contenido informativo junto con las líneas de pedido del carrito y el total del pedido.

Creación de una extensión de interfaz de usuario de pago

Un proyecto típico de extensión de interfaz de usuario de pago se estructura utilizando la CLI de Shopify con el tipo de extensión checkout_ui. El punto de entrada de la extensión utiliza la función reactExtension para registrar un componente en una ubicación de destino específica en el flujo de pago.

Por ejemplo, una extensión de banner de envío gratuito usaría el gancho useCartLines para calcular el subtotal del carrito, compararlo con su umbral de envío gratuito y generar un componente de banner que muestre un mensaje de éxito o cuánto más necesita agregar el cliente. Esta única extensión normalmente aumenta el valor promedio del pedido entre un 5% y un 12%.

Ganchos API de extensión

Shopify proporciona un amplio conjunto de ganchos para acceder al estado de pago:

• useCartLines() --- Acceda a todos los artículos del carrito con precios, cantidades y metadatos del producto
• useBuyerJourney() --- Interceptar y validar el progreso del pago, bloquear envíos no válidos
• useShippingAddress() --- Lea la dirección de envío para obtener lógica condicional
• useApplyDiscountCodeChange() --- Aplicar códigos de descuento mediante programación según las condiciones
• useApplyMetafieldChange() --- Almacena datos personalizados en el pedido para flujos de trabajo de cumplimiento
• useExtensionApi() --- Acceda a la API de extensión completa, incluidos los tokens de sesión y localización

Ejemplos prácticos de extensión

Colección de mensajes de regalo: coloque un componente TextField en el destino de envío-address.render-after. Utilice useApplyMetafieldChange para almacenar el mensaje como un metacampo de pedido. El equipo de cumplimiento lee el metacampo durante el embalaje.

Selector de fecha de entrega: utilice un componente Seleccionar con fechas disponibles calculadas a partir de los datos del SLA de su transportista. Almacene la fecha seleccionada como un metacampo y utilícela para la programación de cumplimiento.

Visualización de puntos de fidelidad: muestre a los clientes que regresan sus puntos de fidelidad disponibles y permítales aplicar puntos como descuento usando useApplyDiscountCodeChange.

Funciones de Shopify

Qué funciones de Shopify reemplazan

Antes de Shopify Functions, la lógica empresarial personalizada requería llamadas API externas que agregaban latencia y puntos de falla al proceso de pago. Las funciones se ejecutan directamente dentro de la infraestructura de Shopify y se ejecutan en menos de 5 milisegundos sin sobrecarga de red.

Tipos de funciones

| Tipo de función | Qué personaliza | Ejemplo | |---------------|-------------------|---------| | Descuento de producto | Descuentos automáticos en productos | Compre 2 y obtenga 1 gratis con lógica de niveles compleja | | Descuento de pedido | Descuentos en todo el pedido | Gaste por encima del umbral y ahorre un 15 % con exclusiones | | Descuento de envío | Descuentos en tarifas de envío | Envío gratuito para miembros fidelizados | | Personalización de pagos | Visibilidad y pedidos de métodos de pago | Ocultar COD para pedidos de alto valor | | Personalización de entrega | Nombres de métodos de envío y clasificación | Cambiar el nombre de los transportistas, reordenar por prioridad | | Transformación del carrito | Modificar el contenido del carrito | Paquete automático de productos, kits de ampliación | | Restricciones de cumplimiento | Restringir las opciones de cumplimiento | Requerir firma para artículos de alto valor |

Cómo funcionan las funciones

Las funciones están escritas en Rust (compiladas en WebAssembly) o JavaScript. Cada función recibe un objeto de entrada que contiene datos de pago relevantes y devuelve una matriz de operaciones que describe los cambios a aplicar.

Para la personalización del pago, la función recibe todos los métodos de pago disponibles y los datos del carrito, luego devuelve operaciones de ocultar o reordenar para métodos específicos según sus reglas comerciales. Para personalizar la entrega, las funciones pueden cambiar el nombre de las opciones de envío, reordenarlas por prioridad u ocultarlas según el contenido del carrito o la dirección de entrega.

Limitaciones de funciones

• Tiempo de ejecución: 5 ms máximo
• Memoria: 10 MB máximo
• Tamaño de entrada: Limitado por la consulta de entrada de función
• Sin llamadas de red: las funciones no pueden realizar solicitudes HTTP
• Sin estado persistente: cada invocación no tiene estado

Estas restricciones son intencionales. Garantizan que el rendimiento del proceso de pago se mantenga constante incluso con docenas de funciones activas.

API de marca de pago

La API Checkout Branding proporciona personalización visual sin crear extensiones. Controla:

Colores --- Colores de marca primarios y secundarios, colores de fondo, colores de texto y enlaces, y colores de estado para errores, éxito y advertencias.

Tipografía --- Familia de fuentes de la biblioteca de fuentes de Shopify o fuentes personalizadas, tamaños de fuente para títulos, cuerpo y etiquetas, además de pesos de fuente y alturas de línea.

Diseño y espaciado --- Radio de esquina para botones, entradas y contenedores, espaciado entre secciones y estilos de borde.

Logotipo y favicon --- Logotipo del encabezado de pago con controles de posición y tamaño.

Se accede a la API de marca a través de la mutación checkoutBrandingUpsert GraphQL. Pasa un objeto de entrada de perfil y marca que especifica su sistema de diseño: combinaciones de colores, configuraciones de tipografía y valores de radio de esquina. Esto separa la marca visual de la personalización funcional para que pueda actualizar la apariencia de su pago sin modificar el código de extensión.

Migración desde checkout.liquid

Por qué la migración es obligatoria

Shopify ha establecido plazos firmes de desactivación para checkout.liquid. Todos los comerciantes de Shopify Plus deben migrar a Checkout Extensibility.

1. Seguridad: checkout.liquid permite la ejecución arbitraria de JavaScript en el proceso de pago, lo que crea riesgos de filtración de datos y XSS
2. Rendimiento: Las personalizaciones de checkout.liquid no optimizadas ralentizan la carga de la página
3. Ruta de actualización: Shopify no puede implementar mejoras en el proceso de pago cuando los comerciantes anulan toda la plantilla de pago

Lista de verificación de migración

| característica checkout.liquid | Equivalente de extensibilidad de pago | |--------------------------------|----------------------------------| | Estilo CSS personalizado | API de marca de pago | | Imágenes de insignias de confianza | Extensión de interfaz de usuario de pago con componente de imagen | | Gift message field | Extensión de interfaz de usuario de pago con TextField | | Lógica de descuento personalizada | Función Shopify (tipo de descuento) | | Ocultar método de pago | Función Shopify (personalización de pagos) | | Cambio de nombre del método de envío | Función Shopify (personalización de entrega) | | Campo de nota de pedido | Extensión de interfaz de usuario de pago con TextField + metacampo | | Guiones de análisis | Píxeles web (eventos de clientes) | | Validación personalizada | gancho useBuyerJourney con lógica de validación |

Proceso de migración paso a paso

1. Audite su checkout.liquid actual --- Documente cada personalización, script y cambio visual
2. Categorizar cada personalización --- Asignar a extensiones de interfaz de usuario, funciones, API de marca o píxeles web
3. Crea y prueba en desarrollo --- Usa Shopify CLI para probar extensiones localmente en una tienda en desarrollo
4. Implementar de forma incremental --- Habilite primero la extensibilidad del proceso de pago en una tienda de prueba y luego implemente la implementación en producción.
5. Supervise las tasas de conversión --- Compare las tasas de finalización del proceso de pago antes y después de la migración durante al menos dos semanas
6. Iterar --- Utilice pruebas A/B para optimizar la ubicación de las extensiones y los mensajes

Personalización de pagos y envíos

Estrategias de personalización de pagos

• Métodos de pago basados en la región: muestra los métodos de pago locales (iDEAL en Países Bajos, PIX en Brasil) según la dirección de envío
• Umbrales de valor de pedido: Ocultar comprar ahora y pagar después para pedidos de valor bajo o muy alto
• Filtrado de etiquetas de clientes: muestra las condiciones de pago mayoristas solo para clientes B2B etiquetados
• Restricciones basadas en productos: deshabilite ciertos métodos de pago para suscripciones o productos digitales

Estrategias de personalización de envíos

• Cambio de nombre del operador: reemplace los nombres técnicos del operador con nombres de marca como "Entrega rápida (3-5 días hábiles)"
• Clasificación de tarifas: coloque los métodos de envío preferidos en la parte superior de la lista
• Disponibilidad condicional: Ocultar envío exprés para artículos de gran tamaño o direcciones rurales
• Estimación de la fecha de entrega: use funciones de personalización de entrega para mostrar las fechas de entrega estimadas junto con cada opción de envío

Consejos para la optimización de la conversión

Reducir la fricción en el proceso de pago

• Utilice el autocompletado de direcciones (integrado en el proceso de pago de Shopify) y asegúrese de que funcione para todos los mercados objetivo
• Habilite Shop Pay para los clientes que regresan: reduce el tiempo de pago hasta 4 veces
• Minimizar el número de campos personalizados; each additional field reduces completion rates by 3-5%

Genere confianza al finalizar la compra

• Coloque insignias de seguridad y señales de confianza en el área del pie de página de pago
• Mostrar resúmenes claros de la política de devoluciones cerca de la sección de pago
• Mostrar recuentos de reseñas de clientes o calificaciones de satisfacción

Aproveche las extensiones posteriores a la compra

• Utilice el objetivo de representación de la página de agradecimiento para ofertas adicionales de ventas.
• Mostrar mensajes de registro de suscripción en la página de confirmación del pedido
• Recopile comentarios de NPS inmediatamente después de la compra

Preguntas frecuentes

¿La extensibilidad del pago está disponible en todos los planes de Shopify?

Las extensiones de la interfaz de usuario de pago y las funciones de Shopify están disponibles en todos los planes de Shopify. Sin embargo, algunas funciones avanzadas, como la personalización completa de la marca en el proceso de pago, están limitadas a Shopify Plus. La marca básica (colores y fuentes) está disponible en todos los planes a través del editor de temas.

¿Dejarán de funcionar mis personalizaciones de checkout.liquid?

Sí. Shopify ha establecido plazos de desactivación para checkout.liquid. Los comerciantes de Shopify Plus que no hayan migrado pasarán automáticamente a la experiencia de pago predeterminada. Planifique su migración ahora para mantener el control sobre su pago.

¿Puedo utilizar JavaScript de terceros en la extensibilidad del proceso de pago?

No. Las extensiones de la interfaz de usuario de Checkout se ejecutan en un entorno aislado y no pueden cargar scripts externos. Esta es una medida de seguridad. Si necesitas integración de servicios externos, usa Shopify Functions para la lógica del lado del servidor o Web Pixels para el seguimiento analítico.

¿Cómo afectan las funciones de Shopify a la velocidad de pago?

Las funciones de Shopify se ejecutan en menos de 5 milisegundos dentro de la infraestructura de Shopify. Son significativamente más rápidos que las llamadas API externas que reemplazan. La mayoría de los comerciantes ven mejoras en el rendimiento del proceso de pago después de migrar de scripts a Functions.

¿Puedo volver a checkout.liquid después de migrar?

Durante el período de migración, puede cambiar entre checkout.liquid y Checkout Extensibility en la configuración de su tienda. Sin embargo, una vez que Shopify desapruebe completamente checkout.liquid para su tienda, ya no será posible revertirlo.

Transforma tu pago en Shopify

La extensibilidad del pago representa el futuro del comercio de Shopify. Ya sea que necesite migrar desde checkout.liquid, crear flujos de pago personalizados u optimizar sus tasas de conversión, el nuevo marco proporciona las herramientas para crear una experiencia de pago que coincida con su marca y sus requisitos comerciales.

ECOSIRE se especializa en configuración de la tienda Shopify, desarrollo de temas personalizados y optimización de conversión. Para una personalización avanzada del proceso de pago en Shopify Plus, explora nuestros servicios de Shopify Plus.

¿Listo para mejorar su experiencia de pago? Comuníquese con nuestros especialistas de Shopify para analizar su proyecto de extensibilidad del proceso de pago.