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 añadir un ícono personalizado, súbelo a la sección Files de tu tienda de Shopify en Settings > Files, luego copia la URL y pégala en el campo del ícono en Upcart.

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

HTML a añadir:
HTML a añadir:
HTML a añadir:
HTML a añadir:
HTML a añadir:

​
Colocar el ícono de candado:

Después de elegir el ícono de candado, ve a Manage All Carts > Edit > Settings > More Settings > Edit Copy. 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.

​
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. Haz clic en Settings y desplázate hasta el final de la página hasta encontrar la sección llamada “Custom CSS”.

​
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