Change the color of the Buy Now button in the Debut theme by css

[MarcosSantos]

Hey guys! I'm trying to change the color of the buy button in my store, today I set it to black but I want to leave it in green but I don't want to change it by the theme settings because when I change the color of the button by the settings, other functions also change the color, but I want to change only by the button, I believe it is possible for css, if someone can help me I will be grateful! Thanks

[Paula]

Olá @MarcosSantos!

Entendo que você está buscando saber como fazer a alteração da cor do botão "Comprar Agora" através da codificação do tema, correto? 

Temos um post na comunidade em inglês que tem todas as instruções para implementar alteração da cor dos botões na página do produto - Tutorial: Alterar os botões Adicionar ao carrinho e Comprar agora

Antes de prosseguir com os ajustes no código, recomendo duplicar o tema e trabalhar na cópia, pois se algo der errado não irá danificar o seu atual tema.

1. Vá em Loja Virtual> Temas> Ações> Editar Código

2. Em Assets> abra o theme.scss.liquid

3. Cole o código abaixo no final do arquivo 

.shopify-payment-button__button.shopify-payment-button__button--unbranded {
  background-color: green !important;
  border: 2px solid red !important;
  color: white !important;
}

/* Hover */
.shopify-payment-button__button.shopify-payment-button__button--unbranded:hover {
  background-color: blue !important;
  border: 2px solid orange !important;
  color: green !important;
}

Copy

4. Editar os valores de cor de acordo com sua preferência e não esqueça de salvar.

Confira essas instruções e nos avise se conseguiu mudar a cor do botão. Além dessa questão, gostaria de saber se há algo mais em que podemos ajudar. Você está iniciando a configuração ou já está fazendo vendas? Como está indo o desenvolvimento da sua loja?

[MarcosSantos]

​Hello how are you? Obrigado pelo tutorial, consegui e funcionou, mas a cor do botão de checkout no carrinho de compras não mudou. Você pode me ajudar com um tutorial?

E também sobre a adição dos selos de pagamento e segurança no rodapé do site, você obteve algum tutorial?

## - Por favor, digite sua resposta acima desta linha - ##

[Paula]

Prazer em ajudar, @MarcosSantos! Ótimo saber que conseguiu fazer as alterações!

Entendo que agora você precisa de um tutorial para alterar a cor do botão "Check out" na página do carrinho, como esse abaixo?

Quero esclarecer que eu não sou especialista em codificação, mas encontrei este post na comunidade em inglês onde um especialista fornece instruções para customizar o botão da página do carrinho. Acredito que essas instruções o ajudará! Caso tiver alguma dúvida sobre as etapas e linha de código, recomendo perguntar diretamente no post que o especialista ou algum outro membro poderá ajudá-lo. 

Sobre a adição de selos de pagamento e segurança no rodapé do site, temos esse tutorial aqui: Adicione um selo de segurança em sua loja. 

Por desejar adicionar os seus próprios selos, será necessário substituir o URL da imagem indicado na instrução pelo URL da sua própria imagem. Conseguirá pegar o URL da imagem adicionando o arquivo no admin da sua loja indo em Configurações> Arquivos> Carregar arquivos. Veja esse documento que explica como adicionar imagens na seção Arquivos. 

Além disso, volto a recomendar a trabalhar em uma cópia do tema para evitar qualquer problema com a sua versão atual. 

Se você preferir utilizar um app, temos diversos aplicativos que oferecem o recurso de adicionar selos na loja. Confira aqui a lista com todos esses apps.

Adicionar selos de segurança é uma ótima forma de passar confiança em sua marca, por então estar trabalhando nessa etapa, quero aproveitar e recomendar a leitura de dois artigos sobre prova social que abordam vários outros métodos para ajudá-lo a montar uma loja que passa credibilidade ao cliente. 

• Como utilizar a prova social em seu e-commerce
• Como aproveitar a satisfação de seu cliente para vender mais

Espero ter ajudado! Até mais!