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.

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

1. Revisa una vista previa de lanueva pantalla de pagoy 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 archivocheckout.liquidantes de actualizarla.
2. Cuando estés satisfecho(a) con tus cambios,actualiza tu tienda para usar la nueva pantalla de pago de Shopify.

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. Desdetu panel de control de Shopify, ve a la página deActualización de la pantalla de pagoy haz clic enVista previa de la pantalla de pago.
2. Selecciona tu tema actual de la lista y haz clic enVista 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 otrasmejorasen la nueva versión. Si ese es el caso, debes hacer cambios en tu archivocheckout.liquidantes de actualizar.

Resolver errores

Pasos

1. Desdetu panel de control de Shopify, ve aTienda online>Temas.
2. Haz clic en el botón...y luego enDuplicar.
3. Encuentra el tema duplicado enMás temasy 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 archivocheckout.liquid.

2. Crea una vista previa del archivocheckout.liquiddesde 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 tucheckout.liquidpara 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. Desdela página deActualización de pantalla de pago, haz clic enActualizar 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 (consultaResolver errores). Luego, publica tu tema duplicado actualizado:

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

新闻en la pantalla de Shopify德帕果-帕果

La nueva versión de la pantalla de pago de Shopify 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 latienda de aplicaciones de Shopifyo creando una aplicación personalizada con nuevasAPI de suscripción.

Obtén más información sobre las suscripciones en elCentro 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_planaparece 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 latienda de aplicaciones de Shopify. 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 deagregar propinaen el paso de método de pago del proceso de pago. La secciónAgregar propinaincluye 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 deagregar propinaen 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 elretiro en tienday laentrega 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 deinformaciónen 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 seleccionarEnviarse 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 enContinuar a la sección de envío.
  • Al seleccionarRetirose 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 enContinuar con el pago.

• Si los clientes seleccionanRetiroen 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.

• 拉斯维加斯instrucciones de entrega地区aparecen en la página de estado del pedido. Estas se pueden editar en tu panel de control de Shopify, enConfiguración>Envío y entrega. En la secciónRetiro en tienda, ubica la sucursal que deseas editar y haz clic enGestionar.

• 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 sobrecampos 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ónHacer seguimiento del pedido con Shopen el estado del pedido y las páginas de agradecimiento se ha actualizado con un nuevo diseño.

Más información sobrela 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ónHacer seguimiento del pedido con Shoppara 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 lapá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 claseicon-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 JavaScriptShopify.Checkout.pageen su lugar.
• Se ha agregado una tarjeta de estado del pedido.

Cambios generales de archivo

• div.content-box__rowahora tienerole="table".
• 如果cliente胆固醇en el paso de agradecimiento ytiene el paquete QR, se agregashow_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 concheckouts/order_status/gift_cards.
• La dirección de la información de contacto se ha fijado conenforce_content_directionality.
• La información de envío se trasladó acheckouts/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-linese 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-subfieldsahora 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á endiv.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 acheckouts/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"enulpara lo siguiente:

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

• Se eliminó la descripción emergente dearia-labelledbyentelephone_field.

• En Shop, se modificó la etiqueta de entrada para referirse al teléfono.

• Se agregaron títulosh3mientras se espera por los impuestos.

• Se agregaron títulosh3al redirigir.

• Cuando se cargan los métodos de envío, la etiquetapse ha cambiado a una etiquetah3.

• Autocompletar ahora se refiere amobile telen 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-labelledbypara que coincida con la identificación del elemento del encabezado
  • Se configuróaria-describedbypara que coincida con la identificación del elemento contenedor de contenido

• Se actualizódiv.content-box blank-slatecon lo siguiente:

  • Se agregórole="region"
  • Se configuróaria-labelledbypara que coincida con la identificación del elemento del encabezado

• Se ha mejorado la cuadrícula de Express Checkout para usar elementos deulylien 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 etiquetadl
  • Se cambió la etiquetadela las etiquetasdtydd.

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

  • span.radio__label__accessorycambió adiv.radio__label__accessory
  • span.visually-hiddencambió ah3.visually-hidden
  • span.payment-icon-list__morecambió ali.payment-icon-list__more
  • span.content-box__small-textcambió asmall.content-box__small-text

Enlaces relacionados

• Mejores prácticas para editar checkout.liquid
• checkout.liquid
• CSS en checkout.liquid