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.
Quer aprender a alterar as cores dos botões de compra que aparecem em todo o fluxo de compra (vitrine, página do produto, carrinho e checkout)?
Basta seguir as etapas abaixo:
- Entre no CMS.
- Vá em Layout > Inserir código, conforme indicado na próxima imagem:
- No campo CSS customizado, que é o último campo da tela, cole o código abaixo, conforme a imagem de exemplo:
.address-form button,
.cart__btn-checkout,
.checkout__account button,
.login__email-btn,
.minicart__btn-checkout,
.minicart__empty a,
.payment__method .btn-success,
.product-card__buy button,
.product__buy .btn-primary,
.product__sticky-buy a {
background-color: #007F02 !important;
border-color: #007F02 !important;
}
Obs.: troque #007F02 pelo código hexadecimal da cor que desejar.
Opcional: efeito ao passar o mouse. Com o código acima, o botão fica com a mesma cor quando o mouse passa por cima. Se quiser que ele escureça um pouco, cole também:
.address-form button:hover,
.cart__btn-checkout:hover,
.checkout__account button:hover,
.login__email-btn:hover,
.minicart__btn-checkout:hover,
.minicart__empty a:hover,
.payment__method .btn-success:hover,
.product-card__buy button:hover,
.product__buy .btn-primary:hover,
.product__sticky-buy a:hover {
filter: brightness(90%);
}
- 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.
Quer mudar só o botão da página do produto? Veja Como alterar a cor e tamanho do botão comprar?.
Se depois de publicar e testar em uma guia anônima algum botão não mudar, abra um ticket informando em qual página está o botão (endereço) e o código que você colou.