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.

Una versión actualizada de la pantalla de pagos estará disponible en febrero de 2019. Esta actualización contiene una serie de mejoras visuales que afectarán la apariencia y percepción de tus pagos.

Tendrás hasta el 4 de marzo de 2019 para realizar los cambios requeridos en tu archivo checkout.liquid y probar (hacer una vista previa) los cambios con respecto a la nueva pantalla de pagos de Shopify. Si no actualizaste la pantalla de pagos antes del 4 de marzo de 2019, tu tienda se actualizará automáticamente a la nueva versión de la pantalla de pagos de Shopify.

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

  1. Haz 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 el archivo checkout.liquid antes de actualizar.

  2. Una vez que 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. Es decir, simula que eres un cliente y haz pruebas en tu proceso de pago. Si encuentras errores durante tus pruebas, esto quiere decir que algunas de tus personalizaciones de pago entran en conflicto con otras mejoras en la nueva versión. Si este es el caso, entonces necesitas realizar cambios en tu archivo checkout.liquid antes de actualizar.

Pasos

  1. Duplica tu tema actual:

    1. Desde tu Tienda en línea, haz clic en Temas.
    2. Haz clic en Acciones y luego en Duplicar:
      El archivo de tema duplicado
      se creará una versión duplicada (e inédita) de tu tema actual.
  2. 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. Aplica una vista previa del archivo checkout.liquid de tu tema duplicado, utilizando la nueva versión de la pantalla de pagos de Shopify:

    1. Regresa a la página de Actualización de la pantalla de pagos, haz clic en Vista previa de la pantalla de pagos y, luego, selecciona el tema duplicado:
      Vista previa de la pantalla de pagos
    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 tus archivos checkout.liquid para corregirlos.

Si no encuentras ningún error durante tus pruebas, significa que tu pantalla de pagos es compatible con la nueva versión de la pantalla de pagos de Shopify. Puedes actualizar a la nueva versión de la pantalla de pagos de Shopify y actualizar tu tema.

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. Publica tu tema duplicado (y ahora 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.

Descuentos

Se realizaron cambios visuales (HTML y CSS) en la forma en que aparecen los descuentos automáticos y los scripts de descuentos en el resumen del pedido. Por ejemplo, aparece un ícono junto a los artículos de línea a los que se aplica el descuento automático:

Cambios en los descuentos automáticos

También se realizaron cambios visuales menores (HTML y CSS) en los íconos que indican que se aplica un código de descuento a un artículo de línea.

Compatibilidad internacional para los campos de direcciones

Se hicieron cambios en los archivos countries.js. para facilitar a tus clientes completar sus direcciones. El archivo countries.js controla el formato de los campos de dirección y los campos que aparecen dependiendo del país del cliente.

Los cambios en el archivo countries.js incluyen:

  • Actualización de la lista de provincias y estados de los países admitidos.

  • Ajuste del ancho de algunos campos de dirección.

Si tienes personalizaciones que utilicen countries.js, verifica que dichas personalizaciones funcionen en la vista previa de la pantalla de pagos. Si tienes personalizaciones que agreguen u oculten el campo de dirección, entonces puede que necesites actualizarlas.

Relleno automático de los campos de dirección

Ahora la función para completar automáticamente utiliza un servicio de Shopify para enviar los datos a Google. Como resultado, el enlace para completar el pago automáticamente pasó de utilizar data=”google_autocomplete_*” a usar data=”autocomplete_*”.

Si realizaste personalizaciones en la función de relleno automático, es posible que debas cambiar el nombre de las referencias de google_autocomplete_* a autocomplete_*.

Si has agregado tu propia función de relleno automático (es decir, agregaste un código personalizado que reemplaza a la función de completar automáticamente de Shopify), entonces se seguirá usando en tu tienda (por lo tanto, estos cambios de relleno automático no deberían afectar a tu tienda).

El relleno automático de direcciones es compatible con los siguientes países:

  • Australia (AU)
  • Bélgica (BE)
  • Brasil (BR)
  • Canada (CA)
  • Suiza (CH)
  • Alemania (DE)
  • Dinamarca (DK)
  • España (ES)
  • Francia (FR)
  • Hong Kong (HK)
  • India (IN)
  • Italia (IT)
  • Japón (JP)
  • Luxemburgo (LU)
  • Países Bajos (NL)
  • Nueva Zelanda (NZ)
  • Estados Unidos (US)
  • Singapur (SG)

Mejoras de accesibilidad para los campos de dirección.

Se realizaron cambios visuales (HTML, SVG y CSS) en los campos de dirección que usan menús desplegables (por ejemplo, el campo País). Estos cambios mejoran la experiencia de los clientes que usan un software de accesibilidad:

Cambios en los campos desplegables

Íconos de las tarjetas de crédito

Se realizaron cambios visuales (HTML y CSS) en los íconos de las tarjetas de crédito que aparecen cuando un comerciante introduce la información de su tarjeta de crédito. Cuando Shopify detecta el tipo de tarjeta de crédito, resalta el ícono de la tarjeta de crédito.

Cambios en Shopify Pay

Se realizaron cambios visuales (HTML y CSS) en la ventana emergente de verificación de Shopify Pay que solicita a tu cliente que introduzca su código de Shopify Pay:

Cambios en el cuadro de diálogo de Shopify Pay

Página de estado del pedido

Se realizaron cambios visuales (HTML y CSS) y de contenido en la página Estado del pedido. Estos cambios incluyen reordenar el contenido y actualizar el contenido. Además, tus clientes vía móvil ahora pueden elegir usar la aplicación móvil Arrive para hacer el seguimiento del envío de sus paquetes:

Hay un nuevo botón que les permite a tus clientes usar la aplicación Arrive para hacer el seguimiento de la llegada de sus paquetes

Botones de pago express

Se realizaron cambios visuales (HTML y CSS) que afectan la forma en la que aparecen las opciones de pago express. Por ejemplo, estas opciones ahora están agrupadas dentro de un cuadro y algunos de los botones (como el de Google Pay) usan IFrames.

La nueva pantalla de pago revisa el navegador de tu cliente en búsqueda de las preferencias de pago y de la información de inicio de sesión y luego utiliza esta información para ordenar los botones y, cuando sea posible, iniciar la sesión de tu cliente:

Cambios en el formato de las opciones de pago express

Política y Términos del servicio:

El contenido de la Política de reembolsos, Política de devolución y Términos del servicio ahora aparece en un iFrame dentro de la ventana modal:

Nuevo iFrame para políticas

Enlaces relacionados

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

Pruébala gratis