Actualiza tu pantalla de pago online

Esta página fue impresa el May 14, 2024. Para acceder a la versión actual, por favor visita https://help.shopify.com/es/manual/checkout-settings/checkout-upgrade.

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.

Para prepararte para esta actualización debes hacer lo siguiente:

  1. 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.
  2. Cuando estés satisfecho(a) con tus cambios, actualiza tu tienda para usar la nueva pantalla de pago de Shopify.

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

  1. 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.
  2. Selecciona tu tema actual de la lista y haz clic en Vista previa.
  3. 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

  1. Desde el Panel de control de Shopify, ve a Tienda online > Temas.
  2. Haz clic en el botón ... y luego en Duplicar.
  3. 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.

  1. Abre el archivo checkout.liquid.

  2. Crea una vista previa del archivo checkout.liquid desde tu tema duplicado usando la nueva pantalla de pago de Shopify:

Si tienes errores o notas problemas con el aspecto visual de la pantalla de pago, debes editar tu checkout.liquid para corregirlos.

Actualiza a la nueva pantalla de pago de Shopify

Para actualizar tu pantalla de pago debes realizar un proceso de dos pasos con el que actualizarás la pantalla de pago de Shopify 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

  1. 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).

  2. 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:

Tu pantalla de pago se actualizó y el tema duplicado ahora es tu tema actual.

Novedades en la pantalla de pago de Shopify

La nueva versión de la pantalla de pago de Shopify contiene los siguientes cambios y nuevas características:

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 aparece 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 aparece 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, aparecerá una sección de agregar propina en el paso de método de pago del proceso 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.

Más información sobre cómo ofrecer opciones de propinas.

  • Cuando la opción de propinas está activada, aparecerá una sección de agregar propina en el paso de método de pago del proceso de pago.

Retiro en tienda y entrega local

El retiro en tienda y la entrega local son nuevos métodos de entrega que permiten a los clientes recibir sus pedidos localmente. Cuando estos métodos de entrega están activados, los clientes pueden seleccionar retiro en tienda o entrega local en el paso de envío del proceso de pago.

Aprende cómo activar el retiro en tienda y la entrega local.

  • Los campos adicionales para la entrega local aparecen cuando el cliente activa y selecciona la entrega local.
  • Si la opción de retiro en tienda está activada, al cliente le aparece una sección de método de entrega en la página de información en la pantalla de pago. Si el envío no está disponible, solo aparece 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 del proceso de pago.

  • Las instrucciones de entrega locales aparecen en la página de estado del pedido. Estas se pueden editar en tu panel de control de Shopify, en Configuración > Envío y entrega. En la sección Retiro en tienda, ubica la sucursal que deseas editar y haz clic en Gestionar.

  • Se actualizó la página de estado del pedido para mostrar el progreso de las entregas y los retiros. Los mensajes se muestran cuando:

    • 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 tus envíos lleguen a tus clientes. Los campos adicionales ya están disponibles para países con regulaciones de envío exclusivas. Estos nuevos campos aparecen en el paso de método de pago del proceso 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ó a data-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 tiene role="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 ha agregado un aviso que aparece 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" en ul para lo siguiente:

    • u.breadcrumb
    • ul.payment-method-list
    • ul.os-timeline
    • ul.policy-list

  • Se eliminó la descripción emergente de aria-labelledby en telephone_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 etiqueta h3.

  • Autocompletar ahora se refiere a mobile tel en lugar de phone.

  • Se actualizó div[data-processing-order] agregando role="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 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 ha mejorado la cuadrícula de Express Checkout para usar elementos de ul y li en lugar de div.

  • 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 etiquetas dt y dd.

  • Se actualizaron los métodos de detalle de pago con lo siguiente:

    • span.radio__label__accessory cambió a div.radio__label__accessory
    • span.visually-hidden cambió a h3.visually-hidden
    • span.payment-icon-list__more cambió a li.payment-icon-list__more
    • span.content-box__small-text cambió a small.content-box__small-text

Enlaces relacionados

¿Estás listo/a para comenzar a vender con Shopify?

Prueba gratis