Shopify ahora utiliza un Checkout receptivo. Un gran paso adelante... pero, ¿Qué necesitas saber que no está cubierto en su lanzamiento post? Sigue leyendo para averiguarlo.
Los beneficios
Capacidad de respuesta, más fácil de editar y control de algunos campos en el checkout
- Obviamente, la capacidad de respuesta es mucho más suave. Funcionará más suavemente en varios dispositivos que el anterior, Checkout estándar. Esa es la grande. Vea las capturas de pantalla en su publicación de lanzamiento (vinculada arriba) para ver ejemplos.
- Viene con nuevos ajustes que se instalan automáticamente en la configuración del tema. Este es un buen toque, y un descanso muy necesario de tener que editar manualmente un archivo de estilo separado, Checkout. CSS. Ver más abajo para capturas de pantalla.
- También puede controlar algunos campos importantes, como si se requiere o no el número de teléfono. Ver más abajo para capturas de pantalla.
Vea a continuación algunas capturas de pantalla de lo que obtendrá si actualiza a la caja de comprobación adaptable de Shopify.
Los Downsides
- La desventaja principal que hemos encontrado hasta ahora es que el logotipo tiende a ser demasiado pequeño en algunos casos. Sólo le da una posición para colocarlo en. Vea a continuación una solución a eso.
- También perderá las personalizaciones de CSS anteriores que haya realizado en el proceso de pago, como colores, fuentes y así sucesivamente. Eso se ejecutará el nuevo sistema de estilo de Checkout. Esto puede ser una lástima si has pagado un Shopify Expert para desarrollarlo para ti, ya que perderás todo el trabajo que han hecho... PERO, puede pagar a largo plazo y valer la pena volver a hacer. Es tu decisión 🙂
- Si está utilizando sus propias traducciones personalizadas al momento de la compra, incluida la Tema de Shopify bilingüe — tendrá que volver a hacer las traducciones. Este no es el fin del mundo, pero sólo toma un poco de tiempo. Puedes hacerlo yendo a admin > settings > Checkout > crear nueva traducción.
¿Qué sucede si lo instalo?
Puedes actualizar yendo a admin > Checkout. Verás un mensaje en la parte superior.
También puede degradar más tarde si no le gusta.
¿Cómo puedo hacer que mi logotipo sea más ancho?
La nueva hoja de estilos para el checkout está en los servidores de Shopify, usando un archivo CSS que tienen allí. Así que a menos que declaremos explícitamente estilos de nuestro lado, los suyos se echarán a patadas. El nuevo Checkout necesita un nuevo archivo CSS, llamado Checkout. SCSS. Liquid (no solo ' CSS ', sino ' SCSS ', un nuevo formato). Hay dos opciones para anular esto:
Opción #1: utilice nuestro archivo preformateado (gratis)
Ya que hemos estado recibiendo esta pregunta mucho, creamos una solución gratuita para resolverlo. Basta con descargar este archivo (sólo tiene 3 líneas de código en ella), luego ir a admin > temas > editor de plantillas > Assets, y subirlo. Su logotipo se aplicará más grande. El archivo se llama Checkout. SCSS. Liquid. Si tiene otros cambios de CSS que desea sobremontar los valores predeterminados de Shopify, puede agregarlos a este archivo también.
Haga clic aquí para descargar el nuevo archivo CSS.
Para su referencia, en él se encuentra este código:
.shop__logo {
Max-width: 100%;
}
Opción #2: Hágalo usted mismo (mismo resultado que el anterior).
Abra un editor de texto como TextEdit, y cree un nuevo archivo CSS llamado Checkout. SCSS. Liquid (no solo ' CSS ', sino ' SCSS ', un nuevo formato).
En él, agregue esto:
.shop__logo {
Max-width: 100%;
}
Salvar.
Por último, vaya a admin > themes > editor de plantillas y cárguelo bajo activos.
***
Capturas de pantalla de la configuración de Checkout adaptable en el administrador de Shopify
***
Gracias por mostrar interés en nuestra Shopify Insider blog @ Blackbelt Commerce. Por favor, asegúrese de revisar nuestra Productos. También tenemos algunas recomendaciones principales del blog para que usted Compruebe hacia fuera; Total Products In A Shopify Store, how much does it cost to hire a shopify expert?, how to reduce shopping cart abandonmentY Página del proveedor en Shopify. Como siempre, vigila las nuevas publicaciones del blog.
¿Preguntas? ¿Quieres añadir algo? Siéntase libre de publicar en los comentarios.
Gracias por su guía!
Tengo una pregunta, mi sitio web está en español y me di cuenta de que algunas traducciones no son correctas, pero no puedo encontrar la manera de cambiarlas, ¿alguna sugerencia?
Hola Sandra, claro, por favor, vea este post, le mostrará exactamente dónde actualizar 🙂
https://www.blackbeltcommerce.com/shopify-checkout-how-to-change-checkout-text/
¡Gracias!
Gran actualización, gracias Tristan.
Cuando me actualizé a la nueva caja, tuve que ir a personalizar el tema > Checkout > logo y seleccionar la imagen del logotipo que quería aparecer en la página de pago desde el menú desplegable para obtener mi logotipo para aparecer. Antes de hacerlo, no había ningún logotipo en la nueva página de pago.
Hola Jenn,
¡ Gracias por leer! Es bueno saberlo. Parece que necesitan que selecciones el logotipo primero, en lugar de que simplemente se incumpla con el logotipo de tu tienda. Es bueno saberlo 🙂
Hola, ¿cómo puedo eliminar el logotipo y la descripción de la tienda de aparecer. Tengo toda esa información en la imagen de fondo del banner de la tienda?
Hola Julie,
Por favor, intente esto: siga las pautas anteriores para agregar un nuevo archivo Checkout. SCSS a su tienda, luego agréguelo a él:
.shop__logo {
Display: None;
}
¡ Espero que ayude!
¡ Hola Tristan, gran post! Nuestra tienda es para Centroamérica, donde las direcciones no son tan claras. Algunos campos clave que necesitamos agregar al Checkout son 2 números de teléfono y referencias. ¿Hay alguna manera de agregar estos campos o reemplazar los existentes por estos, sin afectar a las pasarelas de pago como 2Checkout? Gracias de antemano!!
Hola Augusto, gracias por leer. Desafortunadamente no hay manera de ' Agregar ' campos. Tendría que reemplazar otro campo. Sugeriría ver si hay algo que no necesita (por ejemplo, el segundo campo de dirección) y reemplazar el texto para que en su lugar. ¡ Espero que ayude!
Hola Tristan,
No sé por qué no estoy encontrando ninguna información sobre esto en ningún otro lugar, pero, para aquellos que necesitan un Checkout multilingüe en una sola tienda, hay un simple conmutador de idioma incorporado a la URL de pago responsivo. Simplemente agregue "locale = en" o "locale = fr" o "locale = XX" como un parámetro de URL y su idioma de pago usará automáticamente el idioma asociado de la configuración del idioma del tema. Cualquier persona con el checkout receptivo puede probar esto. Así que tu tema solo tiene que añadir ese parámetro al enlace de Checkout. No se requiere aplicación especial. No sé por qué no es un conocimiento común, pero debería serlo.
Gracias por el Consejo Pierre, es uno genial!
Hola Tristan,
¿Cómo cambio el texto en el segundo campo de dirección.
Creo que solía decir segunda dirección, pero ahora dice apt, Bldg, etc.
Gracias de antemano
Hi there! This should help 🙂 https://docs.shopify.com/manual/settings/checkout/checkout-language
Hola
Estoy usando el checkout receptivo. Existe la opción de introducir una dirección, ciudad y país... pero necesito un campo de "condado" añadido a la sección de dirección de envío. ¿Hay alguna manera de Agregar esto? Gracias.
¡Hola! También deberías tener un campo de "estado/provincia", que es el que te sugiero que uses. No hay manera de ' Agregar ' campos a la caja a menos que esté en el plan Enterprise de Shopify llamado "Shopify Plus", pero podría cambiar la etiqueta de estado/provincia a país si es necesario, en configuración > Checkout > Language. ¡ Espero que ayude!
Quiero añadir el encabezado y el pie de página en la pagina de pago igual que las otras páginas...
Cómo puedo hacer esto, ¿puedes ayudarme???????
Hola KJ – el checkout de Shopify no se puede editar a menos que esté en el plan de empresa de nivel superior de Shopify "Plus". Como tal, no creo que esto pueda ser factible. En cualquier caso, normalmente no es la mejor idea tener el encabezado y pie de página en la caja, ya que puede distraer a los usuarios y llevarlos lejos del proceso de pago justo cuando están a punto de pagar 🙂 Hope que ayuda a aclarar!