Actualiza tu pantalla de pagos 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.

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

  1. Revisa una vista previa de la nueva pantalla de pagos y prueba la experiencia de pago de tus clientes. Dependiendo de las personalizaciones que hayas realizado a tu pantalla de pagos, es posible que debas realizar cambios en tu archivo checkout.liquid antes de actualizar.
  2. Cuando estés satisfecho(a) con tus cambios, actualiza tu tienda para usar la nueva pantalla de pagos de Shopify.

Vista previa de tu pantalla de pagos y prueba de errores

Antes de actualizar tu tienda para usar la nueva versión de la pantalla de pagos, asegúrate de obtener una vista previa de los cambios.

Vista previa de la pantalla de pagos

Simula que eres un cliente y haz pagos de prueba. Si encuentras errores durante tus pruebas, quiere decir que algunas de tus personalizaciones de pago entran en conflicto con otras mejoras en la nueva versión. Si ese es el caso, entonces necesitas 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 Acciones y luego haz clic en Duplicar.
  3. Encuentra tu tema duplicado en Más temas, y luego haz clic en Acciones > Editar código. Haz tus ediciones y pruébalas utilizando esta versión duplicada y no publicada de tu tema.
  1. Abre el archivo checkout.liquid.

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

    1. Ve a la página de Actualización de la pantalla de pago de tu panel de control de Shopify, haz clic en Vista previa de la pantalla de pago y luego selecciona el tema duplicado.
    2. Completa los pedidos de prueba en la vista previa.

Si tienes errores o notas problemas en la forma en que la que se presenta la pantalla de pagos visualmente, debes editar tu checkout.liquid para corregirlos.

Actualiza a la nueva pantalla de pagos de Shopify

Para actualizar tu pantalla de pagos debes realizar un proceso de dos pasos con el que actualizarás la pantalla de pagos 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 pagos, haz clic en Actualizar pantalla de pagos (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:

    1. Desde tu Tienda en línea, haz clic en Temas.
    2. Encuentra tu tema duplicado y haz clic en Acción > Publicar.

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

¿Qué novedades presenta la pantalla de pagos de Shopify?

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

  • Variables de descuento de liquid
  • Suscripción a Shop
  • Edición de pedidos
  • Mejoras de accesibilidad
  • Relleno eliminado
  • Pantalla de método de pago
  • Se eliminaron las cadenas de marcadores de posición
  • Visualización de la dirección del cliente guardada
  • Autenticación 3D Secure
  • Cambios adicionales en el campo JavaScript de Google Analytics
  • Cambios de CSS
  • Mensaje de error

Variables de descuento de liquid

A lo largo del proceso de pago se introdujeron varias variables de liquid nuevas relacionadas con la pantalla de descuentos. Estos cambios ayudan a representar los descuentos automáticos y basados en scripts de una manera que tenga sentido para tus clientes.

Tabla con nuevas variables de liquid
Variable Definición
checkout.cart_level_discount_applications Muestra una serie de aplicaciones de descuento específicas del carrito para la pantalla de pagos.
line_item.discount_allocations Muestra una lista de todas las asignaciones de descuento que contienen el monto rebajado y la referencia a la aplicación de descuento origen. line_item.discount_allocations está disponible artículos en carritos de compra, pagos, pedidos y pedidos preliminares.
line_item.final_line_price Muestra el precio total de todos los artículos en la línea. Esto es igual a line_item.final_price multiplicado por line_item.quantity .
line_item.final_price Muestra el precio del artículo, incluidas todas los montos de descuento de nivel de línea.
line_item.line_level_discount_allocations Muestra una lista de asignaciones de descuento específicas de cada línea que contiene el monto del descuento y la referencia a la aplicación de descuento de origen. line_item.line_level_discount_allocations está disponible en los artículos individuales en carritos de compra, pagos, pedidos y pedidos preliminares.
line_item.total_discount Muestra el monto total de todos los descuentos aplicados a la línea de artículo. Este atributo solo tiene un valor si estás usando la aplicación Script Editor.

Suscripción a Shop

Se ha agregado un campo de número de teléfono dedicado a la página de estado del pedido. Se solicita a los clientes que introduzcan un número de teléfono móvil para recibir las actualizaciones de envío por mensaje de texto. Estos mensajes de texto también incluyen un enlace a la aplicación Shop.

Edición de pedidos

Cuando la edición del pedido está disponible para los comerciantes de Shopify Plus, esta acción permitirá capturar pagos pendientes adicionales en pedidos editados usando la pantalla de pagos de Shopify. Hay algunos cambios en la página de pago para garantizar que funcione como corresponde:

  • El cliente no puede cambiar la información de contacto, la dirección de envío o el método de envío.
  • Líneas de artículo adicionales que indican el total del pedido y el monto ya pagado.
  • El botón de Completar compra cambia a Pagar ahora. Total cambia a Monto por pagar.
  • En lugar de la información de ruta que muestra dónde está el cliente en el proceso de pago, el cliente verá un banner plegable con información adicional sobre el pedido: - El monto adicional de pago.
    • Productos agregados o eliminados del pedido.
    • El número del pedido.

Imagen que muestra la pantalla de pago cuando se necesitan pagos adicionales

Estos cambios se aplicarán solo cuando se edite un pedido y requiera un pago adicional de tu cliente.

Si tus personalizaciones de pago utilizan la ruta para identificar el paso actual de la pantalla de pago, debes usar el objeto Shopify.Checkout.step. Consulta la Identificación del paso para más información.

Mejoras de accesibilidad

Se introdujeron varios cambios en la pantalla de pagos 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.

  • La ruta está en un elemento nav en todos los pasos de pago. El atributo aria-current se trasladó al elemento li desde el elemento span.
  • Los resúmenes de pedidos ahora están en un elemento aside.
  • La ID de campo del código de descuento para los clientes móviles se ha cambiado de checkout_reduction_code a checkout_reduction_code_mobile en todos los pasos de pago.
  • Los atributos de accesibilidad se han agregado al mapa para las páginas de Agradecimiento y Estado del pedido. Ahora el mapa tiene role=region y aria-label con la dirección de envío.
  • step y step__section divs de envoltorios se han agregado al Estado del pedido, agotadoy páginas de agradecimiento.
  • Se introdujeron elementos semánticos HTML5 en el proceso de pago y se han actualizado los atributos role. - El resumen del pedido ahora está dentro de un elemento de aside.
    • El div de .main__header ahora es un elemento de encabezado con role=banner.
    • El div para .main__content ahora es un elemento principal con role=main.
    • El div para .main__footer ahora es un elemento de pie de página con role=contentinfo.
    • El div de banner ahora es un encabezado con role=banner.

Relleno eliminado

A las páginas Estado del pedido, Agotadoy Agradecimiento se le han eliminado espacios en blanco entre el nombre de la tienda y el número de pedido. Este relleno adicional se eliminó de la sección de div.section.section--page-title.

Pantalla de método de pago

El monto total de un pedido ahora se muestra a los clientes en la página de estado del pedido en la sección Método de pago.

Imagen de la página de estado del pedido que muestra el monto total del pedido

Se eliminaron las cadenas de marcadores de posición

Los campos de Marcador de posición de correo electrónico y Marcador de posición de correo electrónico o teléfono se han eliminado de las opciones de idioma en la configuración de tu tema. Cualquier cambio necesario se puede hacer en los campos Etiqueta de correo electrónico y Etiqueta de teléfono o correo electrónico, respectivamente. Para acceder a estos campos, ve a Tienda Online > Temas y luego haz clic en Acciones > Editar idiomas > Pantalla de pago y sistema.

Visualización de la dirección del cliente guardada

La forma en que se muestran las direcciones guardadas durante el proceso de pago para los clientes que han iniciado sesión ha cambiado.

Imagen que muestra una lista de direcciones guardadas

Las opciones de dirección se muestran en el siguiente orden:

  1. La dirección guardada predeterminada.
  2. Las direcciones agregadas más recientemente, de la más a la menos reciente.
  3. La opción de usar una nueva dirección.

El menú desplegable muestra un máximo de cinco direcciones.

Autenticación 3D Secure

La tecnología 3D Secure proporciona una capa de seguridad adicional que los clientes deben completar antes de que puedan terminar de hacer su compra, y permite usar servicios como Verified by Visa, MasterCard Identity Check o Amex SafeKey. Durante el proceso de pago, algunos clientes podrían ser redirigidos al portal de su banco para obtener autenticación adicional. Para más información, consulta Todo sobre PSD2 y Strong Customer Authentication.

Los comerciantes ubicados en el Espacio Económico Europeo (EEE) y el Reino Unido pueden usar Cardinal para ofrecer pagos con 3D Secure. Consulta 3D Secure con Cardinal para ver más información.

La decisión sobre qué pagos requieren verificación adicional la determina el banco, y no se puede controlar a través del panel de control de Shopify. No se requiere ninguna acción para habilitar este cambio.

Cambios adicionales en el campo JavaScript de Google Analytics

JavaScript agregado a la sección JavaScript adicional de Google Analytics en tu panel de control de Shopify en Tienda online > Preferencias se agrega a la pantalla de pagos como un iFrame no visible. Esto no afecta el JavaScript usado para fines analíticos, sino que evita que se realicen otros cambios en la pantalla de pagos. Si deseas agregar un JavaScript personalizado a tu pantalla de pago por otros motivos, agrégalo al archivo checkout.liquid directamente.

Cambios de CSS

heading-* y text-container clases CSS se agregaron a todos los pasos de pago.

Mensaje de error

Se ha agregado un banner de error que informa a los clientes cuando su método de pago expreso seleccionado no está disponible. Este banner aparece en la parte superior del paso de Información de contacto de la pantalla de pago.

Imagen

El banner de error que informa a los clientes de que la tarifa de envío anterior ya no es válida se ha trasladado. Este banner aparece justo encima de las opciones de envío disponibles.

Imagen

Enlaces relacionados

¿Estas listo(a) para comenzar a vender con Shopify?

Pruébala gratis