Como alterar a cor e tamanho do botão comprar?

[thais]

Vale para lojas com o editor antigo, em que o editor (botão Editar frente de loja na página inicial do painel) mostra as coleções Configurações, Layout, Páginas, Posts do blog, Páginas extra e Widgets. Lojas na versão Cloud Commerce usam outro editor.

Para alterar a cor do botão Comprar da página do produto, conforme imagem abaixo, basta seguir as etapas:

1. Entre no CMS.
2. Vá em Layout > Inserir código, conforme indicado na próxima imagem:

3. No campo CSS customizado, que é o último campo da tela, cole o código abaixo, conforme a imagem de exemplo:

.product__buy .btn-primary {
  color: #ffffff;
  background-color: #5f9903;
  border-color: #5f9903;
  width: 100%;
}
.product__buy .btn-primary:hover {
  background-color: #4e7d02;
  border-color: #4e7d02;
}

• Troque #5f9903 pela cor do botão e #4e7d02 pela cor quando o mouse passa por cima (em geral, um tom mais escuro).
• width: 100%; deixa o botão com a largura toda. Se quiser manter o tamanho original, apague essa linha.

4. Agora é só clicar em Publicar e aguardar alguns minutos para a alteração aparecer. Se não aparecer, veja Alterei banner, menu ou produto e o site não mudou.

Para mudar a cor dos botões de compra em toda a loja (vitrine, carrinho e checkout), veja Como alterar cor do botão de compra em todo fluxo do checkout?.

---

Se depois de publicar e testar em uma guia anônima o botão não mudar, abra um ticket informando o endereço de uma página de produto e o código que você colou.