> ## 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. # Adicionar ou atualizar um ícone de cadeado no botão de checkout do Upcart
# Introdução
Adicionar um ícone de cadeado ao seu botão de checkout é uma maneira simples, mas eficaz, de aumentar a confiança dos clientes, mostrando que as informações de pagamento deles estão seguras. Esse símbolo familiar tranquiliza os clientes quanto à proteção dos seus dados, deixando-os mais confortáveis durante o processo de checkout. Neste tutorial, vou mostrar como adicionar um ícone de cadeado ao seu botão de checkout usando CSS, o que vai reforçar a segurança e melhorar a experiência geral do usuário. Estes passos são perfeitos para lojistas ou desenvolvedores com conhecimento básico de CSS. Ao adicionar esse pequeno mas impactante elemento visual, você pode alinhar o botão de checkout do Upcart ao design do seu site, ajudando a construir confiança e incentivando os clientes a concluir suas compras. Vamos começar!
## Primeiros passos: escolha um ícone de cadeado
Primeiro, você precisa escolher um ícone de cadeado para adicionar à sua loja. Temos alguns disponíveis abaixo para você usar, mas fique à vontade para usar o seu próprio. Para usar o seu, faça upload dele na seção Files da sua loja Shopify em **Settings > Files** e copie a URL. Não existe um campo de ícone no Upcart para o botão de checkout. Em vez disso, você cola uma tag de imagem HTML no campo **Checkout button text**, que renderiza HTML — pegue um dos snippets abaixo e troque o `src` pela sua própria URL.
### Aqui estão os ícones de cadeado que temos disponíveis para você escolher:
HTML para adicionar: Ícone de cadeado branco sólido ao lado do texto Checkout em um botão escuro ```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}} ``` HTML para adicionar: Ícone de cadeado branco contornado ao lado do texto Checkout em um botão escuro ```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}} ``` HTML para adicionar: Cadeado branco contornado com fechadura ao lado de Checkout em um botão escuro ```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}} ``` HTML para adicionar: Ícone de cadeado preto sólido ao lado do texto Checkout em um botão azul-claro ```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}} ``` HTML para adicionar: Cadeado preto com fechadura ao lado de Checkout em um botão azul-claro ```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}} ```
## Posicionar o ícone de cadeado:
Depois de escolher o ícone de cadeado, vá em Manage All Carts > Edit > Settings > Edit copy e encontre o campo **Checkout button text**. Você pode colá-lo antes da palavra "Checkout" ou depois. Além disso, é aqui que você pode trocar a palavra "Checkout" por outra coisa, como "Checkout Seguro" ou algo semelhante. Editando o texto do botão de checkout no Upcart para posicionar o ícone de cadeado
## **Acessar as configurações de CSS personalizado**
Para começar a personalizar o CSS do seu Upcart, siga estes passos: 1. Abra o **app Upcart** no seu painel. 2. Navegue até o **Cart Editor**. 3. Abra **Settings** e selecione a aba **Custom CSS**. Settings é uma fileira de abas, não uma página longa — se você não encontrar Custom CSS, ela fica em **More settings**.
### **Aplicar CSS personalizado para exibir o ícone de cadeado:**
Quando estiver na seção Custom CSS, copie e cole o código abaixo para exibir e posicionar seu ícone de cadeado. Observe que quanto maior o número do padding, menor o ícone ficará. 1. Localize a área de entrada de CSS. 2. Copie e cole o seguinte código na área de entrada de CSS: 3. Ajuste `height` em `.upcart-custom-lock-icon` para um tamanho diferente do ícone. Recomendamos `16px` ou `20px` para um ícone de cadeado maior ```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; } ```
## **Conclusão**
Seguindo estes passos, você adicionou com sucesso um ícone de cadeado ao seu botão de checkout, fazendo com que seus clientes se sintam mais seguros e confiantes durante a compra. Essa pequena mudança pode fazer uma grande diferença em como sua loja é percebida, ajudando a construir confiança e a melhorar a experiência de compra como um todo.
## Ainda precisa de ajuda?
Se você precisar de ajuda com personalizações, recomendamos consultar um Shopify Expert sobre como adicionar HTML, CSS e até JavaScript ao seu cart drawer. [Ver Shopify Experts](https://www.shopify.com/partners/directory)