Skip to main content

​
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
HTML para adicionar: Ícone de cadeado branco contornado ao lado do texto Checkout em um botão escuro
HTML para adicionar: Cadeado branco contornado com fechadura ao lado de Checkout em um botão escuro
HTML para adicionar: Ícone de cadeado preto sólido ao lado do texto Checkout em um botão azul-claro
HTML para adicionar: Cadeado preto com fechadura ao lado de Checkout em um botão azul-claro

​
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

​
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