Extensibilidad de pago de Shopify en 2026: plazos, extensiones de interfaz y guía de actualización
Por Eoin Villarin, 2026-02-05, actualizado el 2026-11-14
La extensibilidad de checkout de Shopify reemplazó checkout.liquid y Shopify Scripts. Consulte cada fecha límite, qué sucede si no actualizó y cómo crear extensiones de UI de checkout con Preact.
¿Qué es la extensibilidad de pago de Shopify y cuál era el plazo límite?
La extensibilidad de pago de Shopify es la forma basada en aplicaciones de Shopify para personalizar el pago, utilizando extensiones de interfaz de pago, Shopify Functions, píxeles web y configuraciones de marca en lugar de checkout.liquid, scripts adicionales y Shopify Scripts. Las tiendas Plus perdieron checkout.liquid el 13 de agosto de 2024 (pasos de pago) y el 28 de agosto de 2025 (páginas de agradecimiento y estado del pedido), los Scripts dejaron de ejecutarse el 30 de junio de 2026, y las tiendas que no son Plus tuvieron que actualizar antes del 26 de agosto de 2026.
Aspectos clave
- checkout.liquid dejó de funcionar en los pasos de Información, Envío y Pago el 13 de agosto de 2024, y en las páginas de Plus Gracias y Estado del pedido el 28 de agosto de 2025.
- Los scripts de Shopify se congelaron el 15 de abril de 2026 y dejaron de ejecutarse el 30 de junio de 2026; la lógica de descuento, envío y pago ahora pertenece a Funciones de Shopify.
- Las tiendas no Plus tenían hasta el 26 de agosto de 2026 para actualizar sus páginas de agradecimiento y estado de pedido, y las etiquetas de script en esas páginas ahora están obsoletas.
- Las extensiones de la interfaz de pago ahora utilizan @shopify/ui-extensions con componentes web de Preact y Polaris, reemplazando el paquete antiguo @shopify/checkout-ui-extensions-react, con un límite de paquete de 64 KB.
- Las extensiones en los pasos de Información, Envío y Pago y las aplicaciones personalizadas con Funciones necesitan Shopify Plus; Las extensiones de estado de pedido y agradecimiento funcionan en todos los planes.
Extensibilidad de checkout de Shopify es la única forma admitida de personalizar el checkout de Shopify en 2026. Reemplazó checkout.liquid, scripts adicionales, etiquetas de script y Shopify Scripts con cuatro bloques de construcción basados en aplicaciones: extensiones de UI de checkout, Shopify Functions, píxeles web y configuraciones de marca. Todos los plazos han pasado. checkout.liquid dejó de funcionar en los pasos de Información, Envío y Pago el 13 de agosto de 2024, las tiendas Plus lo perdieron en las páginas de Gracias y Estado del pedido el 28 de agosto de 2025, Shopify Scripts dejaron de ejecutarse el 30 de junio de 2026, y las tiendas no Plus alcanzaron su plazo para Gracias y Estado del pedido el 26 de agosto de 2026.
Si tu tienda se perdió una de esas fechas, el código antiguo no está "pausado", simplemente ya no se ejecuta. Esta guía explica qué es la extensibilidad de checkout, la línea de tiempo completa, qué reemplazó a qué, cómo actualizar paso a paso y cómo construir una extensión de interfaz de usuario de checkout con los componentes web actuales de Preact y Polaris. Construyo y migro checkouts de Shopify para vivir, así que lo he mantenido práctico y solo he declarado hechos que pude verificar en contra de los propios documentos de Shopify, que están enumerados al final.
¿Qué es la extensibilidad de checkout de Shopify?
La extensibilidad de checkout de Shopify es el conjunto de herramientas que permite a las aplicaciones y a los comerciantes cambiar cómo se ve y se comporta el checkout sin editar directamente el código de checkout. En lugar de una plantilla Liquid grande que se podía reescribir libremente, el checkout ahora es una página propiedad de Shopify con lugares definidos donde el código aprobado puede conectarse. Shopify describe las piezas principales en su visión general de aplicaciones de checkout:
- Extensiones de la interfaz de pago agregar elementos de interfaz como campos, banners, ofertas y casillas de verificación. Los comerciantes los colocan en el editor de pago.
- Funciones de Shopify cambiar la lógica de negocio en los servidores de Shopify: descuentos, opciones de entrega, opciones de pago, validación del carrito y del checkout, paquetes, recogida local y restricciones de cumplimiento.
- Píxeles web maneja análisis y seguimiento de conversiones suscribiéndote a eventos estándar de cliente dentro de un sandbox, en lugar de inyectar scripts.
- Marca controla colores, fuentes, logotipos, radio de esquina y diseño a través del editor de checkout y, para cambios más profundos, la API de Administración de GraphQL.
- Extensiones de pagos permite que los proveedores de pago integren sus métodos en el checkout.
El intercambio es simple. Renuncias a la libertad de reescribir cualquier parte de la página y, a cambio, tus personalizaciones sobreviven a las actualizaciones propias de Shopify, el checkout se mantiene rápido y seguro, y características como Shop Pay, checkout de una página y nuevos métodos de pago siguen funcionando sin que tú toques nada.
Plazo límite y cronograma de extensibilidad de pago
El alejamiento de checkout.liquid sucedió en etapas. La tabla siguiente enumera cada fecha que importa, quién se vio afectado y qué sucedió. Las fechas provienen del registro de cambios de Shopify, el centro de ayuda y los documentos para desarrolladores.
| Fecha | Qué pasó | Quién se vio afectado |
|---|---|---|
| 13 de febrero de 2023 | Shopify anunció que el archivo de tema checkout.liquid se estaba deprecando | Shopify Plus |
| 15 de febrero de 2024 | Informe de personalizaciones impulsadas por IA publicado para ayudar a las tiendas Plus a planificar su actualización | Shopify Plus |
| 13 de agosto de 2024 | checkout.liquid dejó de funcionar en los pasos de Información, Envío y Pago | Shopify Plus |
| 28 de agosto de 2025 | checkout.liquid, scripts adicionales y etiquetas de script se dejaron de usar en las páginas de Gracias y Estado del pedido; el cuadro de scripts adicionales se convirtió en solo lectura | Shopify Plus (cuadro de solo visualización para todas las tiendas) |
| 15 de abril de 2026 | Los scripts de Shopify ya no se podían editar ni publicar | Tiendas Plus que utilizan scripts |
| 30 de junio de 2026 | Scripts de Shopify y la aplicación del editor de scripts retirada; los scripts ya no se ejecutan en ninguna tienda | Tiendas Plus que utilizan scripts |
| 26 de agosto de 2026 | Plazo límite para actualizar las páginas de Gracias y estado del pedido; se eliminan las etiquetas de script | Tiendas no Plus |
En resumen, la actualización de extensibilidad de checkout ya no es opcional para nadie. A partir de noviembre de 2026 no hay plan ni ajuste que traiga de vuelta checkout.liquid, scripts adicionales ni Shopify Scripts.
Qué sucede si una tienda no actualiza?
El código heredado deja de ejecutarse y la tienda vuelve a las páginas estándar de Shopify. En la práctica, eso significa:
- ediciones de checkout.liquid ya no renderiza. De Shopify documentación de checkout.liquid indica que no es compatible con los pasos de Información, Envío y Pago y se puso en obsoleto en las páginas de Gracias y Estado del pedido el 28 de agosto de 2025.
- Scripts adicionales no se puede editar, porque el cuadro ha estado en solo lectura desde el 28 de agosto de 2025, y el código que contiene ya no se ejecuta en páginas actualizadas. Las víctimas típicas son las etiquetas de conversión, el seguimiento de afiliados, las encuestas posteriores a la compra y las solicitudes de reseñas.
- Etiquetas de script de aplicaciones en las páginas de Gracias y Estado del pedido están obsoletas (Plus el 28 de agosto de 2025, no Plus el 26 de agosto de 2026).
- Scripts de Shopify no aplicar descuentos, ocultar tarifas de envío ni reordenar métodos de pago. De Shopify Página de transición de scripts dice llanamente que los scripts ya no se ejecutan en ninguna tienda.
La guía de actualización no Plus de Shopify confirma que la actualización reemplaza las páginas de agradecimiento y estado de pedido existentes y cualquier personalización en ellas, y que las tiendas en el plan Pausa y Construye se actualizan automáticamente de forma permanente. Para checkouts Plus que aún utilicen checkout.liquid, Shopify indicó que los actualizaría automáticamente con 30 días de aviso por correo electrónico. Las páginas de ayuda actuales de Shopify no publican una fecha exacta de actualización automática para cada tipo de tienda, por lo que la comprobación más segura es abrir Configuración, Checkout en tu administración y mira qué versión tiene cada página.
checkout.liquid vs extensibilidad de checkout
Esta es la comparación que les presento a los clientes cuando preguntan por qué sus personalizaciones antiguas no pueden simplemente copiarse.
| Área | checkout.liquid (legado) | Extensibilidad de pago (actual) |
|---|---|---|
| Cómo personalizas | Editar una plantilla Liquid, CSS y JavaScript directamente | Las aplicaciones añaden extensiones de interfaz de usuario, funciones y píxeles en lugares definidos |
| Quién podría usarlo | Solo Shopify Plus | Todos los planes en las páginas de estado de agradecimiento y pedido; Plus para los pasos de información, envío y pago |
| Mejorar la seguridad | Las actualizaciones de Shopify podrían romper el código personalizado | Las extensiones tienen versiones y siguen funcionando a través de las actualizaciones de checkout |
| Lógica de descuento y envío | Scripts de Shopify escritos en Ruby | Funciones de Shopify compiladas a WebAssembly (Rust o JavaScript) |
| Seguimiento | Scripts adicionales y etiquetas de script en la página | Píxeles de aplicaciones y píxeles personalizados en un entorno de pruebas |
| Estilo | Cualquier CSS | Marca del editor de pago más la API de marca de GraphQL en Plus |
| Rendimiento y seguridad | Los scripts de terceros se ejecutaban en la página de pago | Las extensiones se ejecutan en un entorno de trabajo web con acceso sin DOM |
| Shop Pay y checkout de una página | No compatible con plantillas personalizadas | Totalmente compatible |
| Estado en 2026 | Eliminado | La única opción compatible |
¿Qué partes del pago de Shopify puedes personalizar?
Las extensiones de la interfaz de pago se renderizan en objetivos. Un objetivo es un lugar nombrado en el checkout, y Shopify agrupa objetivos en tres tipos.
- Objetivos de bloqueo, como
purchase.checkout.block.renderypurchase.thank-you.block.render, que los comerciantes pueden arrastrar a cualquier ubicación compatible en el editor de checkout. - Objetivos estáticos, que se renderizan en un punto fijo, por ejemplo, después de los campos de contacto, después de los elementos de la línea de carrito o antes de los botones de acción.
- Objetivos ejecutables, que devuelven datos o lógica sin renderizar nada.
La página de agradecimiento utiliza purchase.thank-you objetivos, y la página de estado del pedido ahora vive en cuentas de cliente, utilizando customer-account.order-status objetivos.
Qué puede hacer cada plan de Shopify
| Característica | Planes no Plus | Shopify Plus |
|---|---|---|
| Extensiones de UI en las páginas de agradecimiento y estado de pedido | Sí | Sí |
| Extensiones de UI en los pasos de Información, Envío y Pago | No | Sí |
| Aplicaciones públicas que contienen funciones de Shopify | Sí | Sí |
| Aplicaciones personalizadas que contienen funciones de Shopify | No | Sí |
| Marca básica en el editor de pago | Sí | Sí |
| Marca avanzada a través de la API de administración GraphQL | No | Sí (también en tiendas de desarrollo) |
| Píxeles de aplicaciones y píxeles personalizados | Sí | Sí |
El límite Plus en los pasos de Información, Envío y Pago proviene directamente de referencia de extensiones de UI de checkout, y la regla de la aplicación personalizada para Functions está en el Documentación de Funciones de Shopify.
Extensiones de UI de checkout de Shopify en 2026: React, Preact y componentes web
Si buscas @shopify/checkout-ui-extensions-react, estás mirando la primera generación de las herramientas. Los nombres de los paquetes cambiaron dos veces, y muchos tutoriales antiguos aún muestran las importaciones originales.
| Paquete | Era | Estado en noviembre de 2026 |
|---|---|---|
| @shopify/checkout-ui-extensions-react y @shopify/checkout-ui-extensions | 2022 a 2023 | Legacy; última publicación en agosto de 2023 (versión 0.27.3) |
| @shopify/ui-extensions-react | Versiones de API desde 2023-04 hasta 2025-07 | Reemplazado; la línea de lanzamiento final es 2025.7.x |
| @shopify/ui-extensions con Preact | Versión de API 2025-10 y posteriores | Actual; la última es 2026.10.0 para la versión de la API 2026-10 |
A partir de la versión de API 2025-10, las nuevas extensiones usan Componentes web Polaris por defecto. Los componentes son elementos personalizados como <s-stack>, <s-checkbox>, <s-text>, <s-button> y <s-banner>, renderizado con Preact. Los datos y acciones de Checkout se movieron de los hooks de React a un global shopify objeto, por ejemplo shopify.cost, shopify.buyerIdentity y shopify.applyAttributeChange(). Shopify CLI genera un shopify.d.ts archivo con los tipos cuando ejecutas shopify app dev.
La razón principal para el cambio es el tamaño. Un paquete de extensión de UI compilado no puede exceder 64 KB (las extensiones de cuenta de cliente de página completa obtienen 128 KB), y Shopify lo aplica en el momento del despliegue. El pequeño tiempo de ejecución de Preact deja mucho más de ese presupuesto para tu propio código. Dos cambios más que vale la pena conocer: desde la versión de la API 2026-04 el metafields propiedad está en desuso en favor de shopify.appMetafields y cambios de metacampo de carrito, y el nuevo @shopify/ui-extensions-tester paquete agrega pruebas unitarias.
De Shopify guía de migración a componentes web no lista una fecha de eliminación para extensiones basadas en React vinculadas a versiones de API más antiguas. Sin embargo, las nuevas características solo aterrizan en versiones actuales, así que planea el movimiento durante tu próxima actualización real.
Cómo actualizar a la extensibilidad de checkout de Shopify paso a paso
Ya sea que estés limpiando después de una actualización automática o todavía tengas lógica de la era de Scripts que reconstruir, el proceso es el mismo.
- Audita lo que tenías. En Configuración, Checkout, abre la guía de actualización o el informe de personalizaciones. Enumera tus ediciones antiguas de checkout.liquid y ordena scripts adicionales por propósito, como seguimiento de pedidos o autenticación. También exporta tu código antiguo de Shopify Scripts si aún lo tienes.
- Asigna cada personalización a su reemplazo. Los cambios de UI se convierten en extensiones de UI de checkout, la lógica de descuento y envío se convierte en Shopify Functions, el seguimiento se convierte en píxeles de aplicaciones o píxeles personalizados, y los cambios visuales se convierten en configuraciones de marca.
- Primero revisa la App Store. Muchas necesidades comunes, como mensajes de regalo, fechas de entrega, encuestas posteriores a la compra y descuentos escalonados, ya existen como aplicaciones de extensibilidad de pago. Desarrollar algo personalizado solo tiene sentido cuando no hay una aplicación que se adapte o la lógica es específica de tu negocio.
- Construye o instala los reemplazos en una tienda de desarrollo o una caja de pago duplicada. Además, las tiendas pueden crear una caja de pago de borrador en el editor y dejar la caja de pago en vivo intacta.
- Recrear seguimiento. Instala las aplicaciones oficiales para Google, Meta y TikTok, que envían píxeles de aplicaciones, y mueve cualquier etiqueta restante a Configuración, Eventos de cliente como píxeles personalizados.
- Prueba pedidos reales. Usa el modo de prueba para realizar pedidos a través de todos los métodos de pago, tanto las disposiciones de pago como todos los mercados en los que vendes, y luego confirma que las conversiones lleguen a tus análisis.
- Publicar y monitorizar. Publica el nuevo checkout, luego compara la tasa de conversión, el valor promedio del pedido y los ingresos rastreados con las semanas anteriores al cambio.
Si tu tienda necesita que esto se haga correctamente, es una parte central de mi Servicio de desarrollo de Shopify.
Cómo construir una extensión de interfaz de usuario de checkout de Shopify
Necesitas una cuenta de socio de Shopify, la última CLI de Shopify y una tienda de desarrollo. Para apuntar a los pasos de Información, Envío o Pago, la tienda de desarrollo debe tener características de Shopify Plus habilitadas.
- Ejecutar
shopify app initpara crear una aplicación o abrir una existente. - Ejecutar
shopify app generate extension --template checkout_uiy darle a la extensión un nombre claro. - Editar
shopify.extension.tomlpara establecer la versión de la API, las capacidades y el objetivo. - Escribe la interfaz de usuario en Preact con componentes web de Polaris.
- Ejecutar
shopify app devpara obtener una vista previa contra una caja de pago real en su tienda de desarrollo. - Ejecutar
shopify app deploypara lanzar una nueva versión de la aplicación, luego agregue el bloque en el editor de caja de pago.
Aquí está la configuración para una opción de envoltura de regalo. Se renderiza en un objetivo de bloque y expone un ajuste de comerciante para la etiqueta de casilla de verificación:
api_version = "2026-10"
[[extensions]]
name = "Gift wrap option"
handle = "gift-wrap-option"
type = "ui_extension"
[extensions.capabilities]
api_access = true
network_access = false
block_progress = false
[[extensions.targeting]]
module = "./src/Checkout.jsx"
target = "purchase.checkout.block.render"
[settings]
[[settings.fields]]
key = "label_text"
type = "single_line_text_field"
name = "Checkbox label"
Y aquí está la extensión en sí, guardada como src/Checkout.jsx. Verifica que el checkout actual permita cambios de atributo, guarda la elección como un atributo de carrito que el comerciante ve en el pedido y muestra un error amigable si el guardado falla:
import '@shopify/ui-extensions/preact';
import { render } from 'preact';
import { useState } from 'preact/hooks';
export default function extension() {
render(<Extension />, document.body);
}
function Extension() {
const [error, setError] = useState('');
const label = shopify.settings.value.label_text || 'Gift wrap this order';
if (!shopify.instructions.value.attributes.canUpdateAttributes) {
return null;
}
async function onCheckboxChange(event) {
const isChecked = event.target.checked;
const result = await shopify.applyAttributeChange({
type: 'updateAttribute',
key: 'gift_wrap',
value: isChecked ? 'yes' : 'no',
});
if (result.type === 'error') {
setError('We could not save your gift wrap choice. Please try again.');
return;
}
setError('');
}
return (
<s-stack gap="base">
<s-checkbox label={label} onChange={onCheckboxChange} />
{error && <s-banner tone="critical">{error}</s-banner>}
</s-stack>
);
}
El shopify.instructions revisa los asuntos. Algunos checkouts, como los checkouts de pedidos borrador, no permiten ciertos cambios en el carrito, y tu extensión debería funcionar en silencio en lugar de lanzar un error al comprador.
Lista de verificación de pruebas
- Los objetivos estáticos se renderizan automáticamente en su posición fija mientras
shopify app devse ejecuta. - Los objetivos de bloqueo se pueden previsualizar en un lugar específico con una referencia de ubicación en la URL de pago, como
WALLETS1. Shopify's guía de pruebas los lista todos. - En Configuración, Checkout, Personalizar, agrega el bloque de la aplicación y muévelo entre ubicaciones.
- Prueba tanto diseños de una página como de tres páginas, porque los comerciantes pueden cambiar.
- Realiza pedidos de prueba completos, incluyendo Shop Pay, con pagos en modo de prueba.
Funciones de Shopify, píxeles web y marca
Las extensiones de UI son solo una parte de la extensibilidad de checkout de Shopify. La mayor parte de lo que hacían los Scripts de Shopify ahora pertenece a Funciones de Shopify, que se ejecutan en los servidores de Shopify cuando el checkout los llama. Están escritos en cualquier lenguaje que se compile a WebAssembly, con plantillas de Rust y JavaScript proporcionadas; Shopify recomienda Rust para carritos grandes.
| Script antiguo de Shopify | Reemplazo de función |
|---|---|
| Scripts de artículos individuales (escalonados, paquete y descuentos para clientes) | Funciones de descuento |
| Scripts de envío (ocultar, renombrar, reordenar tarifas) | Funciones de personalización de entrega |
| Scripts de pago (ocultar o reordenar métodos) | Funciones de personalización de pagos |
| Límites de cantidad y regiones bloqueadas | Funciones de validación del carrito y pago |
| Paquetes creados con trucos de elementos de línea | Funciones de transformación del carrito |
Píxeles web reemplazar el seguimiento que solía vivir en scripts adicionales. Los píxeles de la aplicación se ejecutan en un sandbox de Web Worker estricto, mientras que los píxeles personalizados agregados por los comerciantes se ejecutan en un sandbox iframe más flexible que aún no puede alcanzar la página superior. Ambos respetan el consentimiento del cliente. Un píxel de aplicación mínimo que informa sobre las cajas de pago completadas se ve así:
import { register } from '@shopify/web-pixels-extension';
register(({ analytics }) => {
analytics.subscribe('checkout_completed', (event) => {
const checkout = event.data && event.data.checkout;
if (!checkout) {
return;
}
fetch('https://analytics.example.com/collect', {
method: 'POST',
keepalive: true,
body: JSON.stringify({
orderId: checkout.order ? checkout.order.id : null,
total: checkout.totalPrice ? checkout.totalPrice.amount : null,
currency: checkout.currencyCode,
}),
});
});
});
Marca cubre colores, tipografía, logotipos y estilo de sección. Todos los planes obtienen los controles básicos en el editor de checkout. Las tiendas Plus y las tiendas de desarrollo pueden ir más allá a través de la API de Administración de GraphQL. Ten en cuenta que en la versión de API 2026-10 Shopify marca checkoutBrandingUpsert como obsoleto en favor de checkoutAndAccountsConfigurationUpdate, por lo que el nuevo código de marca debe apuntar a la mutación más reciente.
Extensibilidad de pago para comerciantes
Si ejecutas una tienda y no escribes código, aquí está lo que realmente necesitas hacer ahora:
- Abierto Configuración, Checkout y confirma tu pago, Gracias y Estado del pedido están en la nueva versión.
- Lee el cuadro de scripts adicionales de solo lectura y enumera cada herramienta que solía depender de él.
- Reinstalar o actualizar esas aplicaciones para que utilicen píxeles de aplicaciones o bloques de aplicaciones, y confirmar en el panel de cada herramienta que los pedidos todavía se están registrando.
- Si dependías de Shopify Scripts para descuentos o reglas de envío, verifica que cada regla exista ahora como una aplicación o función personalizada. Un carrito que debería activar la regla y otro que no debería son la prueba más rápida.
- Usa el editor de pago para agregar insignias de confianza, notas de pedido, ofertas o encuestas de aplicaciones instaladas, y luego previsualiza en dispositivos móviles, donde ocurren la mayoría de los pedidos.
La mayoría de las tiendas pueden terminar esto con aplicaciones existentes. El trabajo personalizado solo vale la pena para una lógica única, como reglas mayoristas, campos B2B o integraciones de fidelidad.
Extensibilidad de pago para desarrolladores
Si construyes para Shopify, el modelo mental es diferente al trabajo de tema:
- Las extensiones se ejecutan en un entorno de trabajo web sin
windowo DOM. Las bibliotecas que tocan cualquiera de ellas fallarán. - Cada llamada a tu backend no es de confianza. Autentícala con un token de sesión de
shopify.sessionTokeny volver a verificar precios y elegibilidad en el servidor. - Anclar un
api_versiony actualizar según un calendario. Shopify lanza una nueva versión cada trimestre, y la documentación más reciente asume Preact y componentes web. - Las aplicaciones públicas que incluyen llamadas de red necesitan
network_accessen el TOML y aprobación para acceso a la red en el Panel de socios. Tu servidor también debe responder a solicitudes CORS. - Las aplicaciones públicas que acceden a datos protegidos ahora se enfrentan a reglas de plataforma más estrictas. Mi publicación en el Requisito de lista blanca de IP de Shopify para aplicaciones públicas cubre un cambio reciente.
Cuando un proyecto necesita un backend personalizado, un panel de administración o una integración alrededor de la extensión, eso cae bajo mi desarrollo web personalizado trabajo
Errores comunes de extensibilidad de pago
- Asumiendo que la extensión aparece automáticamente. Implementar solo hace que el bloque esté disponible. Un comerciante todavía tiene que agregarlo en el editor de pago, lo que causa muchos boletos "funciona en mi tienda".
- Superar el presupuesto de 64 KB. Las bibliotecas de fecha, los paquetes de iconos y los SDK de análisis se suman rápidamente. Importa solo lo que necesitas y observa el tamaño del paquete.
- Copiar tutoriales antiguos. Código que importa
@shopify/checkout-ui-extensions-reacto utiliza ganchos de React comouseApplyAttributeChangepertenece a versiones de API más antiguas. Comienza un nuevo trabajo en@shopify/ui-extensionscon Preact. - Utilizando
block_progresssin cuidado. Esta capacidad permite que una extensión detenga al comprador de continuar. Utilízala solo para validación real y siempre explica por qué. - Olvidar el seguimiento después de una actualización automática. Los ingresos pueden parecer que han disminuido cuando solo dejó de activarse la etiqueta. Compara los pedidos en Shopify con tus plataformas publicitarias.
- Reconstruir un script como una extensión de UI. Las reglas de descuento y envío pertenecen a las funciones en el servidor, no en el código del lado del cliente que un comprador puede manipular.
- Probar solo un diseño o mercado. Los checkouts de una y tres páginas, las diferentes monedas y los diferentes métodos de pago se comportan de manera diferente.
La velocidad del pago es tan importante como las características, por lo que es parte de mi Lista de verificación de optimización de velocidad de Shopify. Si tenías seguimiento en las páginas antiguas, mi guía para migrando píxeles después de la deprecación de la etiqueta de script se profundiza, y si vendes a través de asistentes de IA, mira comercio agéntrico en Shopify.
Preguntas frecuentes
¿Qué es la extensibilidad de checkout de Shopify?
La extensibilidad de pago de Shopify es el sistema basado en aplicaciones de Shopify para personalizar el pago. Utiliza extensiones de interfaz de pago para cambios de interfaz, Shopify Functions para lógica de negocio, píxeles web para seguimiento y configuraciones de marca para diseño. Reemplazó a checkout.liquid, scripts adicionales, etiquetas de script y Shopify Scripts, todos los cuales se han retirado.
¿Cuál fue el plazo límite para la extensibilidad de checkout?
Hubo varias. Las tiendas Plus perdieron checkout.liquid en los pasos de Información, Envío y Pago el 13 de agosto de 2024 y en las páginas de agradecimiento y estado del pedido el 28 de agosto de 2025. Los scripts de Shopify dejaron de funcionar el 30 de junio de 2026. Las tiendas no Plus tuvieron que actualizar sus páginas de agradecimiento y estado del pedido antes del 26 de agosto de 2026.
¿Está obsoleto checkout.liquid?
Sí. La documentación de Shopify dice que checkout.liquid no es compatible en los pasos de Información, Envío y Pago y se eliminó en las páginas de agradecimiento y estado del pedido el 28 de agosto de 2025. No hay forma de activarlo de nuevo en 2026, por lo que cualquier personalización restante debe reconstruirse con extensibilidad de checkout.
¿Qué son las extensiones de interfaz de usuario de checkout de Shopify?
Las extensiones de la interfaz de pago son pequeñas aplicaciones en sandbox que agregan elementos de interfaz, como campos, banners o ofertas, a objetivos definidos en el pago, la página de Gracias y la página de estado del pedido. Desde la versión de la API 2025-10, se crean con componentes web de Preact y Polaris utilizando el @shopify/ui-extensions paquete, con un límite de paquete de 64 KB.
¿Se sigue utilizando @shopify/checkout-ui-extensions-react?
No. Era el paquete original de 2022 a 2023 y se publicó por última vez en agosto de 2023. Fue seguido por @shopify/ui-extensions-react, cuya última línea de lanzamiento apunta a la versión de la API 2025-07, y luego por @shopify/ui-extensions con Preact, que es lo que usan los documentos actuales de Shopify.
¿Pueden las tiendas que no son Plus utilizar extensiones de pago?
Sí, en las páginas de agradecimiento y estado del pedido. Las tiendas no Plus también pueden usar aplicaciones públicas que contengan Funciones de Shopify, píxeles de aplicaciones y marca básica de checkout. Las extensiones de interfaz de usuario en los pasos de Información, Envío y Pago, aplicaciones personalizadas con Funciones y marca basada en API requieren Shopify Plus.
¿Qué son las aplicaciones de extensibilidad de checkout?
Son aplicaciones de la tienda de aplicaciones de Shopify creadas con extensibilidad de checkout, como aplicaciones para encuestas posteriores a la compra, fechas de entrega, opciones de regalo, ofertas, fidelidad y descuentos escalonados. Busca aplicaciones que mencionen extensiones de interfaz de usuario de checkout, Funciones de Shopify o píxeles de aplicaciones, y evita aquellas que aún te pidan pegar código en scripts adicionales.
¿Qué sucede si mi tienda no se actualizó?
Las personalizaciones antiguas dejan de ejecutarse. Las ediciones de checkout.liquid, los scripts adicionales, las etiquetas de script de la página de agradecimiento y los scripts de Shopify dejan de ejecutarse y las páginas vuelven a las versiones estándar de Shopify. Revisa Configuración, Checkout para confirmar la versión de cada página, luego reconstruya lo que perdió con aplicaciones, extensiones, Funciones o píxeles.
Siguientes pasos
Audita tu pago, confirma que el seguimiento aún se activa y mueve cualquier lógica perdida a funciones o aplicaciones. Para un ejemplo del trabajo de Shopify Plus que hago, consulta el Estudio de caso de Real Mad Honey, o busca más Casos de estudio de Shopify y WordPress. ¿Necesitas una extensión de checkout construida o migrada a Preact? Envíame los detalles a través de mi formulario de contacto.
Fuentes
- checkout.liquid de Shopify (fechas de deprecación y eliminación)
- Registro de cambios de Shopify: El archivo de tema checkout.liquid se está deprecando (13 de febrero de 2023)
- Registro de cambios de Shopify: Informe de personalizaciones para tiendas Plus (plazo del 13 de agosto de 2024)
- Centro de ayuda de Shopify: Actualización de páginas de agradecimiento y estado de pedido (no Plus)
- Registro de cambios de Shopify Dev: Shopify Scripts en desuso el 30 de junio de 2026
- Centro de ayuda de Shopify: Transición de Shopify Scripts a Funciones de Shopify
- Desarrollo de Shopify: crear aplicaciones de checkout
- Referencia de la API de extensiones de UI de Checkout de Shopify
- Desarrollo de Shopify: configuración de la extensión de UI de checkout
- Desarrollador de Shopify: Migrar a componentes web Polaris
- Funciones de Shopify
- Píxeles web de Shopify
- Mutación de checkoutBrandingUpsert de Shopify
- npm: @shopify/checkout-ui-extensions-react y npm: @shopify/ui-extensions