> ## Documentation Index > Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt > Use this file to discover all available pages before exploring further. # Añadir o actualizar un ícono de candado en tu botón de pago de Upcart
# 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: Ícono de candado blanco sólido junto al texto Checkout en un botón oscuro ```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}} ``` HTML a añadir: Ícono de candado blanco de contorno junto al texto Checkout en un botón oscuro ```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}} ``` HTML a añadir: Candado blanco de contorno con ojo de cerradura junto a Checkout en un botón oscuro ```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}} ``` HTML a añadir: Ícono de candado negro sólido junto al texto Checkout en un botón azul claro ```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}} ``` HTML a añadir: Candado negro con ojo de cerradura junto a Checkout en un botón azul claro ```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}} ```
## 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. 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. 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 ```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}} .upcart-custom-lock-icon { height: 12px; margin-right: 6px; } .upcart-checkout-button { display: flex !important; align-items: center; justify-content: center; } ```
## **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](https://www.shopify.com/partners/directory)