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.

FechaQué pasóQuién se vio afectado
13 de febrero de 2023Shopify anunció que el archivo de tema checkout.liquid se estaba deprecandoShopify Plus
15 de febrero de 2024Informe de personalizaciones impulsadas por IA publicado para ayudar a las tiendas Plus a planificar su actualizaciónShopify Plus
13 de agosto de 2024checkout.liquid dejó de funcionar en los pasos de Información, Envío y PagoShopify Plus
28 de agosto de 2025checkout.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 lecturaShopify Plus (cuadro de solo visualización para todas las tiendas)
15 de abril de 2026Los scripts de Shopify ya no se podían editar ni publicarTiendas Plus que utilizan scripts
30 de junio de 2026Scripts de Shopify y la aplicación del editor de scripts retirada; los scripts ya no se ejecutan en ninguna tiendaTiendas Plus que utilizan scripts
26 de agosto de 2026Plazo límite para actualizar las páginas de Gracias y estado del pedido; se eliminan las etiquetas de scriptTiendas 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.

Áreacheckout.liquid (legado)Extensibilidad de pago (actual)
Cómo personalizasEditar una plantilla Liquid, CSS y JavaScript directamenteLas aplicaciones añaden extensiones de interfaz de usuario, funciones y píxeles en lugares definidos
Quién podría usarloSolo Shopify PlusTodos 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 seguridadLas actualizaciones de Shopify podrían romper el código personalizadoLas extensiones tienen versiones y siguen funcionando a través de las actualizaciones de checkout
Lógica de descuento y envíoScripts de Shopify escritos en RubyFunciones de Shopify compiladas a WebAssembly (Rust o JavaScript)
SeguimientoScripts adicionales y etiquetas de script en la páginaPíxeles de aplicaciones y píxeles personalizados en un entorno de pruebas
EstiloCualquier CSSMarca del editor de pago más la API de marca de GraphQL en Plus
Rendimiento y seguridadLos scripts de terceros se ejecutaban en la página de pagoLas extensiones se ejecutan en un entorno de trabajo web con acceso sin DOM
Shop Pay y checkout de una páginaNo compatible con plantillas personalizadasTotalmente compatible
Estado en 2026EliminadoLa ú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.

Dibujo de plano de piso arquitectónico, como un diseño de pago con objetivos de extensión definidos
Las extensiones solo se renderizan en objetivos definidos. Foto: rawpixel, CC0
  • Objetivos de bloqueo, como purchase.checkout.block.render y purchase.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ísticaPlanes no PlusShopify Plus
Extensiones de UI en las páginas de agradecimiento y estado de pedidoSíSí
Extensiones de UI en los pasos de Información, Envío y PagoNoSí
Aplicaciones públicas que contienen funciones de ShopifySíSí
Aplicaciones personalizadas que contienen funciones de ShopifyNoSí
Marca básica en el editor de pagoSíSí
Marca avanzada a través de la API de administración GraphQLNoSí (también en tiendas de desarrollo)
Píxeles de aplicaciones y píxeles personalizadosSí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.

PaqueteEraEstado en noviembre de 2026
@shopify/checkout-ui-extensions-react y @shopify/checkout-ui-extensions2022 a 2023Legacy; última publicación en agosto de 2023 (versión 0.27.3)
@shopify/ui-extensions-reactVersiones de API desde 2023-04 hasta 2025-07Reemplazado; la línea de lanzamiento final es 2025.7.x
@shopify/ui-extensions con PreactVersión de API 2025-10 y posterioresActual; 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.

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.

Teléfono inteligente sobre un escritorio de madera junto a un portátil para probar una extensión de checkout en móvil
Una extensión de Preact probada frente a una compra real. Foto: rawpixel, CC0
  1. Ejecutar shopify app init para crear una aplicación o abrir una existente.
  2. Ejecutar shopify app generate extension --template checkout_ui y darle a la extensión un nombre claro.
  3. Editar shopify.extension.toml para establecer la versión de la API, las capacidades y el objetivo.
  4. Escribe la interfaz de usuario en Preact con componentes web de Polaris.
  5. Ejecutar shopify app dev para obtener una vista previa contra una caja de pago real en su tienda de desarrollo.
  6. Ejecutar shopify app deploy para 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 dev se 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 ShopifyReemplazo 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 bloqueadasFunciones de validación del carrito y pago
Paquetes creados con trucos de elementos de líneaFunciones 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 window o 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.sessionToken y volver a verificar precios y elegibilidad en el servidor.
  • Anclar un api_version y 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_access en 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

Pesas de latón ajustadas en una caja de madera, como un paquete de extensión con un límite de tamaño
Con sandbox, tamaño limitado y seguro por diseño. Foto: Colecciones del Museo de Auckland, CC BY 2.0
  • 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-react o utiliza ganchos de React como useApplyAttributeChange pertenece a versiones de API más antiguas. Comienza un nuevo trabajo en @shopify/ui-extensions con Preact.
  • Utilizando block_progress sin 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

Lectura relacionada