Skip to main content

​
Introducción

Añadir un ícono de candado a tu botón de pago es una forma sencilla pero eficaz de aumentar la confianza de los clientes al mostrar que su información de pago está segura. Este símbolo familiar tranquiliza a los clientes sobre la protección de sus datos, haciéndolos sentir más cómodos durante el proceso de pago. En este tutorial, te guiaré sobre cómo añadir un ícono de candado a tu botón de pago usando CSS, lo que mejorará la seguridad y la experiencia de usuario en general. Estos pasos son perfectos para dueños de tiendas o desarrolladores con conocimientos básicos de CSS. Al añadir esta pequeña pero impactante señal visual, puedes alinear el botón de pago de Upcart con el diseño de tu sitio, ayudando a generar confianza y animando a los clientes a completar sus compras. ¡Comencemos!

​
Primeros pasos: elige un ícono de candado

Primero, necesitarás elegir un ícono de candado para añadir a tu tienda. Tenemos algunos disponibles a continuación para que los uses, pero también puedes usar el tuyo propio. Para usar el tuyo, súbelo a la sección Files de tu tienda de Shopify en Settings > Files y copia su URL. No hay un campo de ícono en Upcart para el botón de checkout. En su lugar, pegas una etiqueta de imagen HTML en el campo Checkout button text, que interpreta HTML — toma uno de los fragmentos de abajo y cambia su src por tu propia URL.

​
Aquí tienes los íconos de candado que tenemos disponibles para que selecciones:

HTML a añadir: Ícono de candado blanco sólido junto al texto Checkout en un botón oscuro
HTML a añadir: Ícono de candado blanco de contorno junto al texto Checkout en un botón oscuro
HTML a añadir: Candado blanco de contorno con ojo de cerradura junto a Checkout en un botón oscuro
HTML a añadir: Ícono de candado negro sólido junto al texto Checkout en un botón azul claro
HTML a añadir: Candado negro con ojo de cerradura junto a Checkout en un botón azul claro

​
Colocar el ícono de candado:

Después de elegir el ícono de candado, ve a Manage All Carts > Edit > Settings > Edit copy y busca el campo Checkout button text. Puedes pegarlo antes de la palabra “Checkout” o después. Además, aquí es donde puedes cambiar la palabra “Checkout” por otra cosa, como “Secure Checkout” o similar. Editando el texto del botón de pago en Upcart para colocar el ícono de candado

​
Acceder a la configuración de CSS personalizado

Para comenzar a personalizar el CSS de tu Upcart, sigue estos pasos:
  1. Abre la aplicación Upcart desde tu panel.
  2. Ve al Cart Editor.
  3. Abre Settings y selecciona la pestaña Custom CSS. Settings es una fila de pestañas en lugar de una sola página larga — si no ves Custom CSS, está detrás de More settings.

​
Aplicar CSS personalizado para mostrar el ícono de candado:

Una vez que estés en la sección Custom CSS, copia y pega el código de abajo para mostrar y colocar tu ícono de candado. Ten en cuenta que cuanto mayor sea el número de padding, más pequeño será el ícono.
  1. Localiza el área de entrada de CSS.
  2. Copia y pega el siguiente código en el área de entrada de CSS:
  3. Ajusta height en .upcart-custom-lock-icon para un tamaño diferente del ícono. Se recomienda 16px o 20px para un ícono de candado más grande

​
Conclusión

Siguiendo estos pasos, has añadido con éxito un ícono de candado a tu botón de pago, haciendo que tus clientes se sientan más seguros y confiados durante su compra. Este pequeño cambio puede marcar una gran diferencia en cómo se percibe tu tienda, ayudando a generar confianza y a mejorar la experiencia de compra en general.

​
¿Aún necesitas ayuda?

Si necesitas ayuda con personalizaciones, te recomendamos consultar con un Shopify Expert sobre cómo añadir HTML, CSS e incluso JavaScript a tu cajón del carrito. Ver Shopify Experts