Ajustes checkout

Bom dia!

Tudo certo equipe @ecom?

Estamos tentando melhorar a experiência do nosso cliente ao finalizar a compra, para isso teria alguns ajustes no design, cores, tamanhos de fonte, que precisamos aplicar na página de Checkout.

Poderiam nos ajudar com esses detalhes?

Segue uma lista com tudo que tem para melhorar no momento:

  1. Cor do botão Cancelar pedido (mudar cor) Pode mudar a cor do botão ali?

  2. Contraste das fontes com os botões (mudar cor) - As fontes ali no checkout estão todas em azul, dificultando a leitura, como ajustar isso?

  3. Prazo e frete grátis (cor escura) - Essa cor do prazo não está boa e o tamanho da fonte do texto frete grátis, para completar e ter frete grátis está muito pequeno, como ajustar?

  4. Logo no e-mail transacional (ícone não carrega) - O ícone da loja não está carregando no email que o cliente recebe quando fecha o pedido. Onde ajustamos isso para aparecer o ícone ali no corpo do email?

Grato desde já!

Abs!

Bom dia, tudo bem?
Me indique por favor quais cores quer em cada seção que aplico para você e deixo o código, caso alguém mais queira fazer isso.

Blz @Matheus!

  1. Aqui pode ser uma das Cores padrão do site mesmo, no nosso caso um DarkBlue resolveria.
  1. Neste caso abaixo, se só mudar a cor das fontes para o padrão Branco, já melhora bastante a visualização e leitura dos textos nos botões todos.
  1. A cor de fundo no botão do prazo de frete está bem escura, para melhorar ali o fundo pode ser um Branco, mantendo as fontes assim como está. Na faixa ali abaixo que mostra do frete grátis pode aumentar um pouco a fonte, ou talvez por em caixa alta, e em branco se possível tb.
  1. Esse logo da loja que vai ali no e-mail puxa de onde?

abs

// Deixar branco os textos da forma de envio escolhida
.shipping-calculator__services .active .shipping-calculator__option small, .shipping-calculator__services .active .shipping-calculator__option span, .shipping-calculator__services .active .shipping-calculator__option strong {
  color: #fff;
}
// Cor de fundo da forma de envio escolhida
.shipping-calculator__services .active {
  background-color: #222831;
}
// Modificar texto da barra de progresso para frente grátis
.shipping-calculator__free-from-value .progress span, .shipping-calculator__free-from-value .progress strong {
  font-size: 11px;
  text-transform: uppercase;
  color: #fff
}
// Modificar cor de fundo da barra de progresso
.shipping-calculator__free-from-value .progress-bar {
  background-color: #222831;
}
// Modificar cor da fonte do botão de login
.login .input-group span, .login .input-group i {
  color: #fff;
}
// Esconder botão de cancelamento de pedido
.order-info__toggle {
    display: none !important;
}
1 curtida

Ajustei o que foi solicitado, a cor de fundo da forma de envio escolhida, precisa ser diferente das demais, se não, não identifica o escolhido, logo deixei a fonte em branco e fundo darkblue, o mesmo fiz com a barra de frete grátis. O botão de cancelamento, eu escondi mesmo, pois não tem muito efeito. Ele no caso é pra avisar pra loja cancelar um pagamento de cartão por exemplo, então retirei.

1 curtida

Do painel administrativo, na aba Settings, lá está já, fiz um pedido e recebi.

1 curtida

Os ajustes todos ficaram ótimos @Matheus, vai ser ótimo tb ter esses códigos disponíveis para toda a comunidade @ecomplus poder usar em suas lojas :smiley:

Valeu! Abraço!

3 curtidas

De nada!