Actualiza tu pantalla de pago online
Puedes personalizar tu pago en línea para expandir tu marca, cambiar los mensajes, distribuir ofertas y aportar otras mejoras a la experiencia de tus clientes. Para asegurarte de que tus personalizaciones sean compatibles con los cambios que Shopify está llevando a cabo, debes actualizar tu pago periódicamente.
Haz lo siguiente a fin de prepararte para este cambio:
- Revisa una vista previa de la nueva pantalla de pago y prueba la experiencia de pago de tus clientes. Dependiendo de las personalizaciones que hayas realizado a tu pantalla de pago, es posible que debas realizar cambios en tu archivo
checkout.liquid
antes de actualizarla. - Cuando estés conforme con los cambios, contrata un plan superior para tu tienda a fin de poder usar la nueva plataforma Shopify Checkout.
En esta página
Vista previa de tu pantalla de pago y prueba de errores
Antes de actualizar tu tienda para usar la nueva versión de la pantalla de pago, asegúrate de obtener una vista previa de los cambios.
Pasos
- Desde tu panel de control de Shopify, ve a la página de Actualización de la pantalla de pago y haz clic en Vista previa de la pantalla de pago.
- Selecciona tu tema actual de la lista y haz clic en Vista previa.
- Crea una pantalla de pago de prueba efectuando el proceso de pago como un cliente.
Si encuentras errores durante estas pruebas, es posible que algunas de tus personalizaciones de la pantalla de pago entren en conflicto con otras mejoras en la nueva versión. Si ese es el caso, debes hacer cambios en tu archivo checkout.liquid
antes de actualizar.
Resolver errores
Pasos
- Desde el Panel de control de Shopify, ve a Tienda online > Temas.
- Haz clic en el botón ... y luego en Duplicar.
- Encuentra el tema duplicado en Más temas y luego haz clic en el botón ... > Editar código. Realiza las ediciones y utiliza esta versión duplicada y no publicada del tema para probarlas.
- Abre el archivo
checkout.liquid
. - Crea una vista previa del archivo
checkout.liquid
desde tu tema duplicado usando la nueva pantalla de pago de Shopify:- Desde tu panel de control de Shopify, ve a la página de Actualización de la pantalla de pago, haz clic en Vista previa de la pantalla de pago y selecciona el tema duplicado.
- Completa los pedidos de prueba en la vista previa.
Si tienes errores o notas problemas con el aspecto visual de la pantalla de pago, debes editar tu checkout.liquid
para corregirlos.
Cambiar a la nueva plataforma Shopify Checkout
Para cambiar la pantalla de pago, debes realizar un proceso de dos pasos con el que actualizarás Shopify Checkout y reemplazarás el tema publicado actual con la copia duplicada que contiene los cambios.
Selecciona una hora del día menos concurrida para hacer la actualización (por ejemplo, temprano en la mañana, tarde en la noche o durante el fin de semana), para minimizar cualquier posible interrupción.
Pasos
- Desde la página de Actualización de pantalla de pago, haz clic en Actualizar pantalla de pago (este botón se encuentra en la parte inferior de la página).
- Si encontraste errores la primera vez que revisaste la vista previa de tu tema, primero asegúrate de que se resolvieron (consulta Resolver errores). Luego, publica tu tema duplicado actualizado:
- Desde tu Tienda en línea, haz clic en Temas.
- Encuentra el tema duplicado y haz clic en el botón ... > Publicar.
Tu pantalla de pago se actualizó y el tema duplicado ahora es tu tema actual.
Novedades en Shopify Checkout
La nueva versión de Shopify Checkout contiene los siguientes cambios y nuevas características:
- Suscripciones
- Ventas adicionales
- Propinas en la pantalla de pago
- Retiro en tienda y entrega local
- Campos internacionales adicionales
- Hacer seguimiento del pedido con el botón Shop
- Actualizaciones de la página de estado del pedido
- Cambios generales de archivo
- Esqueletos/Estados de carga
- Mensaje de error
- Cambios en atributos de datos
- Mejoras de accesibilidad
Suscripciones
Se agregaron varias secciones a la pantalla de pago de Shopify para que puedas ofrecer productos por suscripción mientras mantienes las personalizaciones de tu pantalla de pago. Estas secciones te permitirán vender productos por suscripción y procesar pagos recurrentes directamente dentro de Shopify Checkout.
Después de completar la actualización de la pantalla de pago, puedes ofrecer suscripciones agregando una aplicación de suscripción desde la Shopify App Store o creando una aplicación personalizada con nuevas API de suscripción.
Obtén más información sobre las suscripciones en el Centro de ayuda de Shopify:
- Cuando las suscripciones están activadas, los métodos de envío utilizados para las suscripciones se muestran separados de los de compras únicas.
-
.product_description_variant Span.product_description_selling_plan
se muestra como una propiedad de línea de artículo adicional si hay una suscripción asociada al producto. - Un total recurrente con una descripción emergente adjunta se muestra debajo del total en el resumen del pedido.
- Las opciones de envío por suscripción se muestran cuando el pedido incluye un producto por suscripción.
Ventas adicionales
Las nuevas aplicaciones de ventas adicionales posteriores a la compra están disponibles en la Shopify App Store. Estas aplicaciones presentan ofertas después de la compra a tus clientes directamente dentro de Shopify Checkout, y modifican su pedido completado para incluir el producto de venta adicional sin volver a introducir ninguna información de facturación o de envío.
Esta actualización de la pantalla de pago incluye cambios en tus archivos de pantalla de pago que permiten que las ventas adicionales posteriores a la compra funcionen con tu pantalla de pago personalizada.
Más información sobre ventas adicionales posteriores a la compra.
Cuando se instala una aplicación poscompra válida en el panel de control de Shopify, los clientes recibirán este tipo de ofertas.
Propinas en la pantalla de pago
Las opciones de propinas se pueden usar para permitir que los clientes incluyan una propina a su pedido online o para recaudar donaciones. Cuando la opción de propinas está activada, se muestra la sección Agregar propina en el paso de la forma de pago de la pantalla de pago. La sección Agregar propina incluye tres opciones de propina preseleccionadas además de un campo para introducir un monto de propina personalizado.
Cuando la opción de propinas está activada, se muestra la sección Agregar propina en el paso de la forma de pago de la pantalla de pago.
Más información sobre cómo ofrecer opciones de propinas.
Retiro en tienda y entrega local
El retiro en tienda y la entrega local son nuevas formas de entrega que permiten a los clientes recibir sus pedidos localmente. Cuando están activadas, los clientes pueden seleccionar Retiro en tienda o Entrega local en el paso de envío de la pantalla de pago.
Obtén información sobre cómo activar el retiro en tienda y la entrega local.
- Los campos adicionales para la entrega local se muestran cuando el cliente activa y selecciona dicha opción.
- Si la opción de retiro en tienda está activada, se muestra al cliente una sección de forma de entrega en la página Información de la pantalla de pago. Si el envío no está disponible, solo se muestra la información de retiro.
-
Los métodos de entrega aparecen como pestañas separadas.
- Al seleccionar Enviar se solicita a los clientes que introduzcan su información de envío y se muestran los métodos de envío disponibles cuando se hace clic en Continuar a la sección de envío.
- Al seleccionar Retiro se muestra una lista de sucursales de retiro. Los clientes hacen clic en el botón de radio de la sucursal de retiro de su preferencia y luego hacen clic en Continuar con el pago.
Si los clientes seleccionan Retiro en el paso de envío de la pantalla de pago, no se recopilará la información de envío. Los clientes deben introducir los datos de facturación en el paso de pago de la pantalla de pago.
Las instrucciones de la entrega local se muestran en la página de estado del pedido. Estas se pueden editar en el panel de control de Shopify, en Configuración > Envío y entrega. En la sección Retiro en tienda, busca la sucursal que desees editar y haz clic en Gestionar.
-
Se modificó la página de estado del pedido para mostrar el progreso de las entregas y los retiros. Los mensajes se muestran cuando sucede lo siguiente:
- Se ha preparado un pedido y está listo para la entrega.
- Se completó una entrega. Este mensaje también contiene un enlace para solicitar nuevamente los mismos artículos.
- Se confirmó un pedido de retiro, lo que indica que el cliente recibirá un correo electrónico cuando esté listo para retirar.
- Un pedido de retiro está listo para retirar.
- Se ha retirado un pedido de retiro.
Campos internacionales adicionales
Algunos países tienen regulaciones exclusivas de envío que debes cumplir para que los envíos lleguen a los clientes. Los campos adicionales ya están disponibles para los países con dichas regulaciones. Estos nuevos campos se muestran en el paso de forma de pago de la pantalla de pago.
Más información sobre campos internacionales adicionales.
- Los campos adicionales en la pantalla de pago aparecen solo para clientes en Brasil, Corea del Sur, Italia y China.
Hacer seguimiento del pedido con el botón Shop
El botón Hacer seguimiento del pedido con Shop en el estado del pedido y las páginas de agradecimiento se ha actualizado con un nuevo diseño.
Más información sobre la aplicación Shop.
- Se ha agregado un botón de texto que invita a los clientes a hacer seguimiento de su compra en la aplicación Shop.
- Se han agregado parámetros para mostrar el seguimiento de Shop Pay.
- Renderizado para el botón Hacer seguimiento del pedido con Shop para los siguientes casos:
- Intento de entrega
- confirmación
- Entregado
- Fallido
- En tránsito
- No se puede enviar
- En proceso de entrega
Actualizaciones de la página de estado del pedido
Se han realizado varias actualizaciones a la página de estado del pedido.
- Se creó una sección específica para la información de tarjetas de regalo donde se indica cuando se compra una tarjeta de regalo.
- Se agregó la información de suscripciones.
- Se eliminó la clase
icon-svg--align-text-bottom
. -
data-step="thank-you"
cambió adata-step="thank_you"
. Si usas este atributo para identificar en qué página del proceso de pago se encuentra el cliente, usa el objeto JavaScript Shopify.Checkout.page en su lugar. - Se ha agregado una tarjeta de estado del pedido.
Cambios generales de archivo
-
div.content-box__row
ahora tienerole="table"
. - Si el cliente está en el paso de agradecimiento y tiene el paquete QR, se agrega
show_qr.js
. - Se agregó una verificación para garantizar que el cliente tenga acceso a la pantalla de pago.
- Las tarjetas de regalo ahora se muestran con
checkouts/order_status/gift_cards
. - La dirección de la información de contacto se ha fijado con
enforce_content_directionality
. - La información de envío se trasladó a
checkouts/web/checkouts/contact_information/pickup
. - Ahora se admite la visualización de varias líneas de envío en la barra lateral del resumen del pedido.
-
tr.total-line
se mostrará solo si hay totales actualizados. - Ahora se admiten líneas de pago genéricas.
- Ahora se admite el cambio de moneda en la pantalla de pago.
-
#payment-gateway-subfields
ahora tiene clases:-
.radio-wrapper content-box__row .content-box__row--secondary
-
.card-fields-container
-
Se ha ajustado la descripción emergente de tarjetas de crédito y ahora está en
div.field__icon
.Se eliminó la etiqueta Aria de la descripción completa de las tarifas de envío.
Los campos de formularios de tarifas de envío se han trasladado a
checkouts/web/checkouts/shipping_method/shipping_rate_additional_fields
.
Esqueletos/Estados de carga
Se han actualizado los estados de carga de las páginas de pago, agregando esqueletos visibles mientras se carga la página u ocultando selectivamente algunos elementos hasta que se haya completado la carga. Estos cambios optimizan el tiempo de carga.
-
Objetos ocultos mientras se carga:
-
del.total-recap__original-price
-
.total-line__price span.payment-due__currency
-
span.order-summary__emphasis
-
-
Objetos que aparecen como un esqueleto mientras se cargan:
-
Span.total-recap__final-price
-
.product__price del.order-summary__small-text
-
.product__price del.order-summary__emphasis
-
.total-line__price span.payment-due__price
-
.total-line__price span.order-summary__emphasis
-
.total-line__price span.visually-hidden
-
.total-line__price.total-line--subtotal span.order-summary__emphasis
-
Mensaje de error
Se agregó un nuevo mensaje de error en la pantalla de pago:
- Se ha agregado una advertencia de número cívico al campo de dirección.
- La advertencia que indica que no hay tarifas de envío disponibles para un carrito, destino o país se ha separado en dos mensajes de advertencia diferentes: un mensaje de advertencia que indica que no hay tarifas disponibles para un carrito o destino, y otra advertencia que indica que no hay tarifas disponibles para un país.
- Se ha agregado un banner de advertencia a la pantalla de pago que aparece cuando se intenta completar una compra en una tienda en desarrollo.
- Se agregó un aviso que se muestra cuando no se le cobrará al cliente durante el proceso de pago.
- Se ha agregado un banner de advertencia para indicar un error de cambio de autenticación.
- Se ha agregado un mensaje de error para indicar cuando los métodos de envío no están disponibles en el paso de envío del proceso de pago.
Cambios en atributos de datos
Se eliminó el Trekkie de los siguientes objetos:
-
Continue_shipping_button
-
Get_shipping_updates_button
-
Shipping_updates_handle_field
-
Shipping_updates_submit_button
-
Change_shipping_address_link
-
breadcrumb_cart_link
-
apply_discount_button
-
Have_an_account_login_link
-
Email_or_phone_field
-
Email_field
-
buyer_accepts_marketing_field
-
Change_billing_address_link
-
Change_contact_method_link
-
Change_payment_method_link
-
Change_pickup_method_link
-
Change_shipping_address_link
- Campos de entrada de la pantalla de pago:
-
{type}_address_field
-
{type}_firstname_field
-
{type}_lastname_field
-
{type}_company_field
-
{type}_address1_google_autocomplete_field
-
{type}_address1_field
-
{type}_address2_field
-
{type}_city_field
-
{type}_country_field
-
{type}_province_field
-
{type}_zip_google_autocomplete_field
-
{type}_phone_field
-
Mejoras de accesibilidad
Se introdujeron varios cambios en la pantalla de pago para garantizar el cumplimiento de los estándares de accesibilidad web. Esto hace que sea más fácil navegar por el proceso de pago para los clientes que usan tecnología de accesibilidad, como lectores de pantalla.
-
Se agregó
role="list"
enul
para lo siguiente:-
u.breadcrumb
-
ul.payment-method-list
-
ul.os-timeline
-
ul.policy-list
-
Se eliminó la descripción emergente de
aria-labelledby
entelephone_field
.En Shop, se modificó la etiqueta de entrada para referirse al teléfono.
Se agregaron títulos
h3
mientras se espera por los impuestos.Se agregaron títulos
h3
al redirigir.Cuando se cargan los métodos de envío, la etiqueta
p
se ha cambiado a una etiquetah3
.Autocompletar ahora se refiere a
mobile tel
en lugar dephone
.Se actualizó
div[data-processing-order]
agregandorole="region"
.-
Se actualizó
div[data-announce-change]
con lo siguiente:- Se agregó
role="region"
- Se configuró
aria-labelledby
para que coincida con la identificación del elemento del encabezado - Se configuró
aria-describedby
para que coincida con la identificación del elemento contenedor de contenido
- Se agregó
-
Se actualizó
div.content-box blank-slate
con lo siguiente:- Se agregó
role="region"
- Se configuró
aria-labelledby
para que coincida con la identificación del elemento del encabezado
- Se agregó
Se ha mejorado la cuadrícula de Express Checkout para usar elementos de
ul
yli
en lugar dediv
.-
Se actualizó el resumen del pedido con lo siguiente:
- Mejor claridad sobre el precio de oferta y el precio normal
- Se cambio el alcance de la etiqueta
dl
- Se cambió la etiqueta
del
a las etiquetasdt
ydd
.
-
Se actualizaron los métodos de detalle de pago con lo siguiente:
-
span.radio__label__accessory
cambió adiv.radio__label__accessory
-
span.visually-hidden
cambió ah3.visually-hidden
-
span.payment-icon-list__more
cambió ali.payment-icon-list__more
-
span.content-box__small-text
cambió asmall.content-box__small-text
-