El checkout es el último paso antes de una venta y, durante años, fue la parte de una tienda Shopify más difícil de cambiar. Las tiendas Shopify Plus editaban un archivo llamado checkout.liquid, y el resto tenía que aceptar el checkout tal como venía.
Eso ha cambiado. Hoy cualquier tienda Shopify puede personalizar el checkout en cierta medida, con herramientas que siguen funcionando cuando Shopify actualiza su checkout. Esta guía explica qué puedes cambiar en cualquier plan, qué requiere Shopify Plus y cómo se crean las personalizaciones de checkout más habituales.
Qué ha cambiado: Checkout Extensibility
Shopify sustituyó checkout.liquid por un conjunto de herramientas al que llama Checkout Extensibility. En lugar de editar el código del checkout, lo personalizas con cuatro piezas:
- El editor del checkout, para la imagen de marca: tu logo, tus colores y tus tipografías.
- Las Checkout UI Extensions, que añaden bloques como banners, campos personalizados y upsells a las páginas del checkout.
- Shopify Functions, pequeñas piezas de lógica personalizada que se ejecutan dentro del checkout de Shopify, para descuentos y reglas de pago y envío. También sustituyen a Shopify Scripts, los scripts en Ruby que las tiendas Plus usaban para esas mismas tareas.
- Eventos de clientes, donde ahora se configuran los píxeles de seguimiento, en lugar del antiguo cuadro de «scripts adicionales».
La gran ventaja es que estas personalizaciones son seguras ante las actualizaciones. Cuando Shopify añade un método de pago o mejora su checkout, tus personalizaciones siguen funcionando.
Qué puedes personalizar en cualquier plan de Shopify
La imagen de marca en el editor del checkout
En tu panel de control de Shopify, ve a Configuración → Pantalla de pago y haz clic en Personalizar. El editor del checkout te permite añadir tu logo y definir tus colores y tipografías, para que el checkout se vea como el resto de tu tienda.
La configuración del checkout
En esa misma página de configuración eliges cómo se contacta con los clientes, qué campos rellenan (como el nombre de la empresa, la línea de dirección 2 y el teléfono), si pueden dejar propina y cómo se recoge el consentimiento de marketing.
Reglas de pago y envío
Las apps de la Shopify App Store creadas con Shopify Functions pueden ocultar, renombrar y reordenar métodos de pago y envío en cualquier plan. Por ejemplo, puedes ocultar el pago contra reembolso por encima de cierto importe de pedido o renombrar un método de envío para mostrar su plazo de entrega.
Descuentos personalizados
Los descuentos propios de Shopify cubren lo básico. Las apps creadas con Shopify Functions añaden descuentos que van más allá, como descuentos por volumen, descuentos escalonados por pedido y descuentos que solo se aplican en determinadas condiciones.
Las páginas de agradecimiento y de estado del pedido
Las Checkout UI Extensions pueden añadir bloques a las páginas de agradecimiento y de estado del pedido en todos los planes, como una encuesta, un mensaje o una recomendación de producto.
Qué requiere Shopify Plus
Hay dos cosas que solo están disponibles para las tiendas Shopify Plus:
- Bloques dentro de los pasos del checkout. Las Checkout UI Extensions en los pasos de información, envío y pago, como campos personalizados, sellos de confianza, banners y bloques de upsell, requieren Shopify Plus. Esto se aplica a los bloques de cualquier app.
- Apps a medida con Shopify Functions. Cualquier tienda puede usar apps de la App Store creadas con Functions, pero solo las tiendas Plus pueden usar una app a medida creada expresamente para ellas, con una lógica propia de su negocio.
| Qué quieres cambiar | Cualquier plan | Shopify Plus |
|---|---|---|
| Logo, colores y tipografías | Sí | Sí |
| Campos del formulario, propinas y ajustes de consentimiento | Sí | Sí |
| Reglas de pago y envío (apps de la App Store) | Sí | Sí |
| Descuentos personalizados (apps de la App Store) | Sí | Sí |
| Bloques en las páginas de agradecimiento y de estado del pedido | Sí | Sí |
| Bloques y campos personalizados en los pasos del checkout | No | Sí |
| Apps a medida con Shopify Functions | No | Sí |
Cómo personalizar el checkout de Shopify, paso a paso
- Anota qué quieres cambiar y por qué. Cada cambio debe resolver un problema real, como los pedidos contra reembolso fallidos o un valor medio del pedido bajo.
- Empieza por la configuración y el editor del checkout. Muchos cambios, como la imagen de marca y los campos del formulario, no necesitan ninguna app.
- Usa una app de la App Store para reglas y descuentos. Busca apps creadas con Shopify Functions, para que las reglas se ejecuten de forma nativa dentro del checkout.
- En Shopify Plus, añade bloques donde aporten. Añade bloques de apps en el editor del checkout o pide a un desarrollador que cree Checkout UI Extensions y Functions a medida.
- Prueba antes de que lo vean los clientes. Haz pedidos de prueba en el móvil y en el ordenador, con tus descuentos, zonas de envío y métodos de pago. Nuestra lista de comprobación del BFCM incluye una prueba completa del checkout.
Personalizaciones habituales del checkout y cómo crearlas
| Personalización | Cómo se crea | Plan |
|---|---|---|
| Ocultar el pago contra reembolso por encima de un importe | Regla de pago (Function) | Cualquiera |
| Mostrar plazos de entrega en los nombres de los métodos de envío | Regla de envío (Function) | Cualquiera |
| Compra 3 y ahorra un 10 % | Descuento (Function) | Cualquiera |
| Barra de progreso de envío gratis o upsell en el checkout | Checkout UI Extension | Plus |
| Campo de mensaje de regalo o de instrucciones de entrega | Checkout UI Extension | Plus |
En los planes sin Shopify Plus, puedes recoger datos adicionales, como un mensaje de regalo, en la página del carrito, antes de que los compradores lleguen al checkout.
Checkout Engine, nuestra app de reglas de checkout, cubre las tres primeras filas sin código, además de bloques de upsell y de confianza para tiendas Shopify Plus. Está construida por completo sobre Shopify Functions y Checkout UI Extensions.
Cómo migrar desde checkout.liquid o Shopify Scripts
Si tu tienda usaba checkout.liquid, scripts adicionales o Shopify Scripts, cada personalización necesita un nuevo sitio:
- Los descuentos y las reglas de pago y envío de Scripts pasan a ser Shopify Functions.
- El contenido y los campos añadidos a checkout.liquid pasan a ser Checkout UI Extensions.
- El código de seguimiento de los scripts adicionales pasa a Eventos de clientes.
Empieza con una auditoría de lo que tienes en marcha hoy; después, reconstruye cada pieza y pruébala antes del cambio. Nuestro servicio de desarrollo en Shopify Plus hace exactamente esto, de la mano del equipo que creó Checkout Engine con Shopify Functions.
Cuándo recurrir a un desarrollador
Una app es la vía más rápida cuando hace lo que necesitas. Un desarrollador compensa cuando:
- tus reglas dependen de datos que solo tiene tu negocio, como los niveles de cliente de un ERP;
- varias reglas interactúan entre sí y necesitas probarlas juntas;
- estás en Shopify Plus y quieres una app a medida con Functions creada expresamente para tu tienda.
Nuestro equipo de desarrollo de apps de Shopify a medida crea lógica de checkout, descuentos e integraciones como estas. Reserva una llamada estratégica gratis para hablar de lo que necesita tu checkout.
Preguntas frecuentes
¿Puedo personalizar el checkout de Shopify sin Shopify Plus?
Sí, con límites. En cualquier plan puedes adaptar el checkout a tu marca en el editor del checkout, cambiar su configuración, usar apps de la App Store creadas con Shopify Functions para reglas de pago, envío y descuentos, y añadir bloques a las páginas de agradecimiento y de estado del pedido. Los bloques dentro de los pasos del checkout requieren Shopify Plus.
¿Puedo seguir usando checkout.liquid?
No. Shopify ha sustituido checkout.liquid por Checkout Extensibility: el editor del checkout, las Checkout UI Extensions y Shopify Functions. Las personalizaciones que usaban checkout.liquid deben reconstruirse con estas herramientas.
¿Qué son las Shopify Functions?
Pequeñas piezas de lógica personalizada que se ejecutan dentro del propio carrito y checkout de Shopify, para tareas como descuentos y reglas de pago y envío. Sustituyen a Shopify Scripts y siguen funcionando cuando Shopify actualiza su checkout.
¿Puedo añadir campos personalizados al checkout de Shopify?
En Shopify Plus, sí, con Checkout UI Extensions. En otros planes, puedes recoger datos adicionales, como un mensaje de regalo, en la página del carrito antes de que los compradores lleguen al checkout.