Ir para
  • 0

Personalizar checkout Yampi

pprs

Perguntado por pprs,

Seguir 0

Pergunta

9 respostass a esta questão

Posts Recomendados

  • 0
rafhamas Level 2

rafhamas Um Ano no Fórum Conversador Colaborador

Postado
Postado

Ta na mão 

 

<style>
  /** custom css **/
  .btn-primary, .btn-primary:hover {background: #000000 }
  .holder-countdown {background: #000000}
  <style>
  /** custom css **/


  .payments .payment.pix,
.payments .payment.credit-card {
}


}
li.checkout-step:nth-child(1) > div:nth-child(2):after {
    content: url("https://cdn.shopify.com/s/files/1/0294/0374/2339/files/user.png?v=1618002515");
    text-indent: -1px;
    display: block;
    color: #000;
    line-height: 0px;
    margin-top: -12px;
}

.checkout-step .holder-icon {
    width: 40px;
    height: 40px;
    background: #FFF;
    border:2px solid #0086ff;
    color:#0086ff;
    margin-bottom: 6px;
    text-indent:-9999px;
}

.checkout-step .connect {
    background-color: #e1e1e1;
    top:22px;
}
li.checkout-step:nth-child(2) > div:nth-child(2):after {
    content: url("https://cdn.shopify.com/s/files/1/0294/0374/2339/files/bag.png?v=1618002556");
    text-indent: -1px;
    display: block;
    color: #000;
    line-height: 0px;
    margin-top: -12px;
    margin-left: 2px;
}

li.checkout-step.enabled:nth-child(2) > div:nth-child(2):after {
    content: url("https://cdn.shopify.com/s/files/1/0294/0374/2339/files/bag_white.png?v=1618002549");
}

li.checkout-step.enabled:nth-child(3) > div:nth-child(2):after {
    content: url("https://cdn.shopify.com/s/files/1/0294/0374/2339/files/dolar_white.png?v=1618002592");
}

li.checkout-step:nth-child(3) > div:nth-child(2):after {
    content: url("https://cdn.shopify.com/s/files/1/0294/0374/2339/files/dolar.png?v=1618002577");
    text-indent: -1px;
    display: block;
    color: #000;
    line-height: 0px;
    margin-top: -10px;
    margin-left: 2px;
}

.holder-cols-checkout .box-checkout.box-resume .cart_total {

  color:#00a801;

}

 

.holder-cols-checkout .cart-resume .detail.total{

  color:#00a801;

}

li.checkout-step:nth-child(1) > div:nth-child(2):after {
    content: url("https://cdn.shopify.com/s/files/1/0294/0374/2339/files/user.png?v=1618002515");
    text-indent: -1px;
    display: block;
    color: #000;
    line-height: 0px;
    margin-top: -12px;
}
 
/* Emissão Nota Fiscal */

label[for=cpf]::after {
  content: ' (Emissão Nota Fiscal)';
}

.payments .payment > label {
    position: relative;
    display: flex;
}

.payments .payment > label[for="payment-billet"]:after {
    background: #a2a2a2;
    display: block;
    line-height: inherit;
    color: #FFF;
    padding: 4px 5px;
    border-radius: 3px;
    position: absolute;
    font-weight: bold;
    font-size: 9px;
    right: 10px;
    letter-spacing: 0.03em;
    top: 26%;
    content: 'APROVAÇÃO EM 3 DIAS';
}

.holder-cols-checkout .payments .payment-header .discount-flag {
    position: absolute;
    display: none;
}

.payments .payment > label[for="payment-pix"]:after,
.payments .payment > label[for="payment-credit-card"]:after
{
    background: #51ac08;
    display: block;
    line-height: inherit;
    color: #FFF;
    padding: 4px 5px;
    border-radius: 3px;
    position: absolute;
    font-weight: bold;
    font-size: 10px;
    right: 10px;
    letter-spacing: 0.03em;
    top: 26%;
    content: 'APROVAÇÃO IMEDIATA';
}

.payments .payment > label[for="payment-credit-card"]:after {
    top: 13%;
}
</style>

.holder-cols-checkout .payments .payment-header .discount-flag {
    position: absolute;
    padding: 4px 4px 3px;
    right: 12px;
    background: #f1b616;
    color: #f4f6f8;
    border-radius: 40px;
}

footer .security-label {
    display: none;
    margin-bottom: 25px;
}
.holder-cols-checkout .payments .payment.selected {
    background: #deceff54;
    border-color: #000000;
}

.holder-countdown::after {
    content: "";
    display: block;
    background: linear-gradient(to right, #ffff4a 0, #fcd000 4%, #ffc112 5%, #a3d3fd 50%, #dbeeff 84%, #00d62e 119%);
    height: 5px;
    width: 100%;
    position: relative;
    top: 10px;
}

.holder-countdown {
    padding: 9px 0 !important;
}

.logo {
    position: absolute;
    top: 40px;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

.item-security {
    visibility: hidden;
}

.holder-cols-checkout .cart-resume .detail.total {
    color: #59b2ea;
    padding-top: 12px;
    padding-bottom: 6px;
}

.holder-cols-checkout .box-checkout.box-resume .cart_total {
    color: #f1b616;
}

.form-horizontal .holder-input.valid:after {
    position: absolute;
    top: 14px;
    right: 15px;
    font-family: FontAwesome;
    color: #00a801;
    content: "\f00c";
}

.holder-cols-checkout .box-checkout.active .box-title .holder-number {
    background: 509fe4;
    border-color: #f1b616!important;
    color: #fff;
    border-radius: 40px;
}

.holder-cols-checkout .cart-resume .detail.total {
    color: #00a801;
    padding-top: 12
px
;
    padding-bottom: 6
px
;
}
#form-promocode button, #form-promocode input {
    
    BORDER-RADIUS: 40PX;
}
.holder-cols-checkout .box-checkout:not(.active):not(.disabled):not(.box-resume):not(.box-payment) .holder-number {
    background-color: #51ac08;
}

.form-horizontal .form-group .error, .form-horizontal .form-group.group-error .holder-selectskin:not([readonly]), .form-horizontal .form-group.group-error .input:not([readonly]), .form-horizontal .form-group.group-error .textarea:not([readonly]) {
    border-color: #E50F38;
    background: #FEECEF;
    BORDER-RADIUS: 40PX;
}

.holder-cols-checkout .box-checkout input {
    max-height: 40px;
    BORDER-RADIUS: 40PX;
}


}

.input-group .input-group-addon {
    display: table-cell;
    width: 64px;
    font-size: 13px;
    line-height: 14px;
    color: #333;
    border-collapse: separate;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    border-radius: 40px;
    font-weight: 500;
}
/* ULTIMO DIA DE PROMOÇÃO */

.holder-cols-checkout .holder-container-resume .item-holder-quantity-price::after {
    content: "ESQUENTA BLACK FRIDAY";
    font-size: 11px;
    padding: 3px 5px;
    color: #fff;
    font-weight: 600;
    background: #000000;
    border-radius: 5px;
    display: inline-block;
    align-self: end;
}

/* Tamanho do Preço */
.holder-cols-checkout .cart-resume .detail.total .value {
    font-size: 22px;
}
/* 12x no Cartão */
.holder-cols-checkout .cart-resume .detail.total .value:after {
    content: 'em até 12x no cartão';
    color: #4b4b4b !important;
    display: block;
    font-weight: bold;
    font-size: 12px;
}

.btn-text.btn-purple /* COR DO BOTÃO DE CUPOM - ALTERAR SE PREFEIR */ {
    color: #000000;
      border-radius: 40PX;
}

.btn-primary, .btn-primary:hover {
    background: #00b1ea;
    border-radius: 40PX;
}

  /* Adicionar Icone dos Correios */

.option.clearfix {
    background-image: url(https://www.propeg.com.br/ad-viewer/Correios/Integrada/macbook.png)!important;
    background-size: 27px!important;
    content: ""!important;
    background-repeat: no-repeat!important;
    background-position-x: 145px!important;
    background-position-y: 90%!important;
}
/* Adicionar Icone dos Correios */

.option.clearfix {
    background-image: url(https://www.propeg.com.br/ad-viewer/Correios/Integrada/macbook.png)!important;
    background-size: 27px!important;
    content: ""!important;
    background-repeat: no-repeat!important;
    background-position-x: 145px!important;
    background-position-y: 90%!important;
}

.yellow /* COR CRONOMETRO - ALTERAR SE PREFEIR */ {
    color: #FFC926!important;
}
body {
    overflow-x: hidden;
    font-size: 13px;
    background: #59b2ea26;
    text-shadow: 0 0 1px rgb(0 0 0 / 1%);
    -webkit-text-stroke: 1 px transparent;
    font-weight: 400;
    font-family: Rubik,sans-serif;
}
.holder-cols-checkout .box-checkout:not(.active):not(.disabled):not(.box-resume):not(.box-payment) {
    background: #ffffff;
    box-shadow: 0 0 1em #00000026;
    border-radius: 40px;
}
.holder-cols-checkout .box-checkout:not(.active):not(.disabled):not(.box-resume):not(.box-payment) .title {
    color: #f1b616!important;
}

.checkout-step.enabled .connect, .checkout-step.enabled .holder-icon {
    background: #00b1ea;
}

a {
    text-decoration: none;
    color: #4d4d4d;
}
.holder-cols-checkout .box-checkout {
    width: 100%;
    position: relative;
    padding: 27px 21px 23px;
    margin: 0 0 20px;
    background: #FFF;
    border: 2px solid transparent;    
    border-radius: 40px;
    box-sizing: border-box;
    transition: all .2s;
}
.holder-cols-checkout .box-checkout.active {
    cursor: default;
    border-color: #f1b616;
    border-radius: 40px;
}


.c-green-2 {
    color: #00a801!important;
}

.holder-cols-checkout .box-checkout:not(.active):not(.disabled):not(.box-resume):not(.box-payment) .title {
    color: #00a801!important;
}

.col-checkout:not(.col-3) .box-checkout.active:not(.upsell) {
    width: auto;
    margin: 0 10px 18px;
    padding-left: 14px;
    padding-right: 14px;
    border: 0;
    border-top: solid 4pX #f5f5f5;
    box-shadow: none;
    border-radius: 40PX;
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 32%);
}


.holder-cols-checkout .box-checkout.disabled {
    cursor: default;
    pointer-events: none;
    -moz-opacity: .5;
    -khtml-opacity: .5;
    -webkit-opacity: .5;
    opacity: .5;
    border-top: solid 4 px #f1b616;
    box-shadow: none;
    border-radius: 40PX;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    filter: alpha(opacity=50);
}

.holder-cols-checkout .box-checkout.box-resume {
    width: auto;
    margin: 0 10px 20px;    
    padding-left: 14px;
    padding-right: 14px;
    border: 0;
    border-top: solid 4px f5f5f5;
    box-shadow: none;
    border-radius: 40PX;
    box-shadow:0 1px 4px 0 rgb(0 0 0 / 32%);
}

.holder-cols-checkout .box-checkout.box-resume .cart_total {
    color: #5abd35;
}
.holder-cols-checkout .box-checkout:not(.active):not(.disabled):not(.box-resume):not(.box-payment) .holder-number {
    background-color: #ffffff;
}
.holder-cols-checkout .box-checkout:not(.active):not(.disabled):not(.box-resume):not(.box-payment) .holder-number {
    background-color: #51ac08;
}
.input-group.input-group-prepend .input-group-addon {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-right: 0;
    border-radius: 40px;
}
.green {
    color: #00a801!important;
}

.icon-mercadopago {
    background-image: url(https://http2.mlstatic.com/frontend-assets/ui-navigation/5.14.4/mercadopago/logo__large.png);
}

.holder-cols-checkout .payments .payment.selected {
    background: #f5f5f5;
    border-color: #000000;
}

/* Rodapé - ALTERAR INFORMAÇÕES */

span.f11.black-50::after {
    content: ' Atendimento via WhatsApp: (31) 98929-0170 \A Seg a Sex - 09:00 às 18:00 \ CNPJ: 32.076.021/0001-87 ©️ Todos os direitos reservados.';
    display: block;
    margin-top: 15px;
    white-space: pre-wrap;
    line-height: 1.8;
  }

.medium {
    font-weight: 500;

}

.c-text-success-2 {
    color: #36b376!important;
}

.black-50 {
    color: grey!important;;

  }
/* SITE BLINDADO*/ 
body > div.inner-body > footer > div > div > div:before {
    content: url();
    background-image: url(https://api.siteblindado.com/v1/seal/aw/www.cea.com.br/seal.png);
    background-size: 115px 32px;
    display: inline-block;
    width: 115px;
    height: 32px;
    content: "";
    margin-bottom: 15px;
}

  @media (max-width: 700px)
footer .security-label {
    display: none;
    margin-bottom: 25px;
}

header {
    background: #00b1ea;
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 32%);
}
</style>

Curtir Curtir ×
Link para o comentário
  • 0
pprs
Level 4

pprs Um Ano no Fórum Primeiro Mês ✔ Primeira Semana ✔

Postado
  • Autor
Postado
38 minutos atrás, rafhamas disse:

Ta na mão 

 

<style>
  /** custom css **/
  .btn-primary, .btn-primary:hover {background: #000000 }
  .holder-countdown {background: #000000}
  <style>
  /** custom css **/


  .payments .payment.pix,
.payments .payment.credit-card {
}


}
li.checkout-step:nth-child(1) > div:nth-child(2):after {
    content: url("https://cdn.shopify.com/s/files/1/0294/0374/2339/files/user.png?v=1618002515");
    text-indent: -1px;
    display: block;
    color: #000;
    line-height: 0px;
    margin-top: -12px;
}

.checkout-step .holder-icon {
    width: 40px;
    height: 40px;
    background: #FFF;
    border:2px solid #0086ff;
    color:#0086ff;
    margin-bottom: 6px;
    text-indent:-9999px;
}

.checkout-step .connect {
    background-color: #e1e1e1;
    top:22px;
}
li.checkout-step:nth-child(2) > div:nth-child(2):after {
    content: url("https://cdn.shopify.com/s/files/1/0294/0374/2339/files/bag.png?v=1618002556");
    text-indent: -1px;
    display: block;
    color: #000;
    line-height: 0px;
    margin-top: -12px;
    margin-left: 2px;
}

li.checkout-step.enabled:nth-child(2) > div:nth-child(2):after {
    content: url("https://cdn.shopify.com/s/files/1/0294/0374/2339/files/bag_white.png?v=1618002549");
}

li.checkout-step.enabled:nth-child(3) > div:nth-child(2):after {
    content: url("https://cdn.shopify.com/s/files/1/0294/0374/2339/files/dolar_white.png?v=1618002592");
}

li.checkout-step:nth-child(3) > div:nth-child(2):after {
    content: url("https://cdn.shopify.com/s/files/1/0294/0374/2339/files/dolar.png?v=1618002577");
    text-indent: -1px;
    display: block;
    color: #000;
    line-height: 0px;
    margin-top: -10px;
    margin-left: 2px;
}

.holder-cols-checkout .box-checkout.box-resume .cart_total {

  color:#00a801;

}

 

.holder-cols-checkout .cart-resume .detail.total{

  color:#00a801;

}

li.checkout-step:nth-child(1) > div:nth-child(2):after {
    content: url("https://cdn.shopify.com/s/files/1/0294/0374/2339/files/user.png?v=1618002515");
    text-indent: -1px;
    display: block;
    color: #000;
    line-height: 0px;
    margin-top: -12px;
}
 
/* Emissão Nota Fiscal */

label[for=cpf]::after {
  content: ' (Emissão Nota Fiscal)';
}

.payments .payment > label {
    position: relative;
    display: flex;
}

.payments .payment > label[for="payment-billet"]:after {
    background: #a2a2a2;
    display: block;
    line-height: inherit;
    color: #FFF;
    padding: 4px 5px;
    border-radius: 3px;
    position: absolute;
    font-weight: bold;
    font-size: 9px;
    right: 10px;
    letter-spacing: 0.03em;
    top: 26%;
    content: 'APROVAÇÃO EM 3 DIAS';
}

.holder-cols-checkout .payments .payment-header .discount-flag {
    position: absolute;
    display: none;
}

.payments .payment > label[for="payment-pix"]:after,
.payments .payment > label[for="payment-credit-card"]:after
{
    background: #51ac08;
    display: block;
    line-height: inherit;
    color: #FFF;
    padding: 4px 5px;
    border-radius: 3px;
    position: absolute;
    font-weight: bold;
    font-size: 10px;
    right: 10px;
    letter-spacing: 0.03em;
    top: 26%;
    content: 'APROVAÇÃO IMEDIATA';
}

.payments .payment > label[for="payment-credit-card"]:after {
    top: 13%;
}
</style>

.holder-cols-checkout .payments .payment-header .discount-flag {
    position: absolute;
    padding: 4px 4px 3px;
    right: 12px;
    background: #f1b616;
    color: #f4f6f8;
    border-radius: 40px;
}

footer .security-label {
    display: none;
    margin-bottom: 25px;
}
.holder-cols-checkout .payments .payment.selected {
    background: #deceff54;
    border-color: #000000;
}

.holder-countdown::after {
    content: "";
    display: block;
    background: linear-gradient(to right, #ffff4a 0, #fcd000 4%, #ffc112 5%, #a3d3fd 50%, #dbeeff 84%, #00d62e 119%);
    height: 5px;
    width: 100%;
    position: relative;
    top: 10px;
}

.holder-countdown {
    padding: 9px 0 !important;
}

.logo {
    position: absolute;
    top: 40px;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

.item-security {
    visibility: hidden;
}

.holder-cols-checkout .cart-resume .detail.total {
    color: #59b2ea;
    padding-top: 12px;
    padding-bottom: 6px;
}

.holder-cols-checkout .box-checkout.box-resume .cart_total {
    color: #f1b616;
}

.form-horizontal .holder-input.valid:after {
    position: absolute;
    top: 14px;
    right: 15px;
    font-family: FontAwesome;
    color: #00a801;
    content: "\f00c";
}

.holder-cols-checkout .box-checkout.active .box-title .holder-number {
    background: 509fe4;
    border-color: #f1b616!important;
    color: #fff;
    border-radius: 40px;
}

.holder-cols-checkout .cart-resume .detail.total {
    color: #00a801;
    padding-top: 12
px
;
    padding-bottom: 6
px
;
}
#form-promocode button, #form-promocode input {
    
    BORDER-RADIUS: 40PX;
}
.holder-cols-checkout .box-checkout:not(.active):not(.disabled):not(.box-resume):not(.box-payment) .holder-number {
    background-color: #51ac08;
}

.form-horizontal .form-group .error, .form-horizontal .form-group.group-error .holder-selectskin:not([readonly]), .form-horizontal .form-group.group-error .input:not([readonly]), .form-horizontal .form-group.group-error .textarea:not([readonly]) {
    border-color: #E50F38;
    background: #FEECEF;
    BORDER-RADIUS: 40PX;
}

.holder-cols-checkout .box-checkout input {
    max-height: 40px;
    BORDER-RADIUS: 40PX;
}


}

.input-group .input-group-addon {
    display: table-cell;
    width: 64px;
    font-size: 13px;
    line-height: 14px;
    color: #333;
    border-collapse: separate;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    border-radius: 40px;
    font-weight: 500;
}
/* ULTIMO DIA DE PROMOÇÃO */

.holder-cols-checkout .holder-container-resume .item-holder-quantity-price::after {
    content: "ESQUENTA BLACK FRIDAY";
    font-size: 11px;
    padding: 3px 5px;
    color: #fff;
    font-weight: 600;
    background: #000000;
    border-radius: 5px;
    display: inline-block;
    align-self: end;
}

/* Tamanho do Preço */
.holder-cols-checkout .cart-resume .detail.total .value {
    font-size: 22px;
}
/* 12x no Cartão */
.holder-cols-checkout .cart-resume .detail.total .value:after {
    content: 'em até 12x no cartão';
    color: #4b4b4b !important;
    display: block;
    font-weight: bold;
    font-size: 12px;
}

.btn-text.btn-purple /* COR DO BOTÃO DE CUPOM - ALTERAR SE PREFEIR */ {
    color: #000000;
      border-radius: 40PX;
}

.btn-primary, .btn-primary:hover {
    background: #00b1ea;
    border-radius: 40PX;
}

  /* Adicionar Icone dos Correios */

.option.clearfix {
    background-image: url(https://www.propeg.com.br/ad-viewer/Correios/Integrada/macbook.png)!important;
    background-size: 27px!important;
    content: ""!important;
    background-repeat: no-repeat!important;
    background-position-x: 145px!important;
    background-position-y: 90%!important;
}
/* Adicionar Icone dos Correios */

.option.clearfix {
    background-image: url(https://www.propeg.com.br/ad-viewer/Correios/Integrada/macbook.png)!important;
    background-size: 27px!important;
    content: ""!important;
    background-repeat: no-repeat!important;
    background-position-x: 145px!important;
    background-position-y: 90%!important;
}

.yellow /* COR CRONOMETRO - ALTERAR SE PREFEIR */ {
    color: #FFC926!important;
}
body {
    overflow-x: hidden;
    font-size: 13px;
    background: #59b2ea26;
    text-shadow: 0 0 1px rgb(0 0 0 / 1%);
    -webkit-text-stroke: 1 px transparent;
    font-weight: 400;
    font-family: Rubik,sans-serif;
}
.holder-cols-checkout .box-checkout:not(.active):not(.disabled):not(.box-resume):not(.box-payment) {
    background: #ffffff;
    box-shadow: 0 0 1em #00000026;
    border-radius: 40px;
}
.holder-cols-checkout .box-checkout:not(.active):not(.disabled):not(.box-resume):not(.box-payment) .title {
    color: #f1b616!important;
}

.checkout-step.enabled .connect, .checkout-step.enabled .holder-icon {
    background: #00b1ea;
}

a {
    text-decoration: none;
    color: #4d4d4d;
}
.holder-cols-checkout .box-checkout {
    width: 100%;
    position: relative;
    padding: 27px 21px 23px;
    margin: 0 0 20px;
    background: #FFF;
    border: 2px solid transparent;    
    border-radius: 40px;
    box-sizing: border-box;
    transition: all .2s;
}
.holder-cols-checkout .box-checkout.active {
    cursor: default;
    border-color: #f1b616;
    border-radius: 40px;
}


.c-green-2 {
    color: #00a801!important;
}

.holder-cols-checkout .box-checkout:not(.active):not(.disabled):not(.box-resume):not(.box-payment) .title {
    color: #00a801!important;
}

.col-checkout:not(.col-3) .box-checkout.active:not(.upsell) {
    width: auto;
    margin: 0 10px 18px;
    padding-left: 14px;
    padding-right: 14px;
    border: 0;
    border-top: solid 4pX #f5f5f5;
    box-shadow: none;
    border-radius: 40PX;
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 32%);
}


.holder-cols-checkout .box-checkout.disabled {
    cursor: default;
    pointer-events: none;
    -moz-opacity: .5;
    -khtml-opacity: .5;
    -webkit-opacity: .5;
    opacity: .5;
    border-top: solid 4 px #f1b616;
    box-shadow: none;
    border-radius: 40PX;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    filter: alpha(opacity=50);
}

.holder-cols-checkout .box-checkout.box-resume {
    width: auto;
    margin: 0 10px 20px;    
    padding-left: 14px;
    padding-right: 14px;
    border: 0;
    border-top: solid 4px f5f5f5;
    box-shadow: none;
    border-radius: 40PX;
    box-shadow:0 1px 4px 0 rgb(0 0 0 / 32%);
}

.holder-cols-checkout .box-checkout.box-resume .cart_total {
    color: #5abd35;
}
.holder-cols-checkout .box-checkout:not(.active):not(.disabled):not(.box-resume):not(.box-payment) .holder-number {
    background-color: #ffffff;
}
.holder-cols-checkout .box-checkout:not(.active):not(.disabled):not(.box-resume):not(.box-payment) .holder-number {
    background-color: #51ac08;
}
.input-group.input-group-prepend .input-group-addon {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-right: 0;
    border-radius: 40px;
}
.green {
    color: #00a801!important;
}

.icon-mercadopago {
    background-image: url(https://http2.mlstatic.com/frontend-assets/ui-navigation/5.14.4/mercadopago/logo__large.png);
}

.holder-cols-checkout .payments .payment.selected {
    background: #f5f5f5;
    border-color: #000000;
}

/* Rodapé - ALTERAR INFORMAÇÕES */

span.f11.black-50::after {
    content: ' Atendimento via WhatsApp: (31) 98929-0170 \A Seg a Sex - 09:00 às 18:00 \ CNPJ: 32.076.021/0001-87 ©️ Todos os direitos reservados.';
    display: block;
    margin-top: 15px;
    white-space: pre-wrap;
    line-height: 1.8;
  }

.medium {
    font-weight: 500;

}

.c-text-success-2 {
    color: #36b376!important;
}

.black-50 {
    color: grey!important;;

  }
/* SITE BLINDADO*/ 
body > div.inner-body > footer > div > div > div:before {
    content: url();
    background-image: url(https://api.siteblindado.com/v1/seal/aw/www.cea.com.br/seal.png);
    background-size: 115px 32px;
    display: inline-block;
    width: 115px;
    height: 32px;
    content: "";
    margin-bottom: 15px;
}

  @media (max-width: 700px)
footer .security-label {
    display: none;
    margin-bottom: 25px;
}

header {
    background: #00b1ea;
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 32%);
}
</style>

valeu demais tmj

Curtir Curtir ×
Link para o comentário
  • 0
Lord Paulistinha Level 2

Lord Paulistinha Primeiro Mês ✔ Primeira Semana ✔ Colaborador

Postado
Postado
Em 23/04/2022 em 20:52, rafhamas disse:

Ta na mão 

 

<style>
  /** custom css **/
  .btn-primary, .btn-primary:hover {background: #000000 }
  .holder-countdown {background: #000000}
  <style>
  /** custom css **/


  .payments .payment.pix,
.payments .payment.credit-card {
}


}
li.checkout-step:nth-child(1) > div:nth-child(2):after {
    content: url("https://cdn.shopify.com/s/files/1/0294/0374/2339/files/user.png?v=1618002515");
    text-indent: -1px;
    display: block;
    color: #000;
    line-height: 0px;
    margin-top: -12px;
}

.checkout-step .holder-icon {
    width: 40px;
    height: 40px;
    background: #FFF;
    border:2px solid #0086ff;
    color:#0086ff;
    margin-bottom: 6px;
    text-indent:-9999px;
}

.checkout-step .connect {
    background-color: #e1e1e1;
    top:22px;
}
li.checkout-step:nth-child(2) > div:nth-child(2):after {
    content: url("https://cdn.shopify.com/s/files/1/0294/0374/2339/files/bag.png?v=1618002556");
    text-indent: -1px;
    display: block;
    color: #000;
    line-height: 0px;
    margin-top: -12px;
    margin-left: 2px;
}

li.checkout-step.enabled:nth-child(2) > div:nth-child(2):after {
    content: url("https://cdn.shopify.com/s/files/1/0294/0374/2339/files/bag_white.png?v=1618002549");
}

li.checkout-step.enabled:nth-child(3) > div:nth-child(2):after {
    content: url("https://cdn.shopify.com/s/files/1/0294/0374/2339/files/dolar_white.png?v=1618002592");
}

li.checkout-step:nth-child(3) > div:nth-child(2):after {
    content: url("https://cdn.shopify.com/s/files/1/0294/0374/2339/files/dolar.png?v=1618002577");
    text-indent: -1px;
    display: block;
    color: #000;
    line-height: 0px;
    margin-top: -10px;
    margin-left: 2px;
}

.holder-cols-checkout .box-checkout.box-resume .cart_total {

  color:#00a801;

}

 

.holder-cols-checkout .cart-resume .detail.total{

  color:#00a801;

}

li.checkout-step:nth-child(1) > div:nth-child(2):after {
    content: url("https://cdn.shopify.com/s/files/1/0294/0374/2339/files/user.png?v=1618002515");
    text-indent: -1px;
    display: block;
    color: #000;
    line-height: 0px;
    margin-top: -12px;
}
 
/* Emissão Nota Fiscal */

label[for=cpf]::after {
  content: ' (Emissão Nota Fiscal)';
}

.payments .payment > label {
    position: relative;
    display: flex;
}

.payments .payment > label[for="payment-billet"]:after {
    background: #a2a2a2;
    display: block;
    line-height: inherit;
    color: #FFF;
    padding: 4px 5px;
    border-radius: 3px;
    position: absolute;
    font-weight: bold;
    font-size: 9px;
    right: 10px;
    letter-spacing: 0.03em;
    top: 26%;
    content: 'APROVAÇÃO EM 3 DIAS';
}

.holder-cols-checkout .payments .payment-header .discount-flag {
��   position: absolute;
    display: none;
}

.payments .payment > label[for="payment-pix"]:after,
.payments .payment > label[for="payment-credit-card"]:after
{
    background: #51ac08;
    display: block;
    line-height: inherit;
    color: #FFF;
    padding: 4px 5px;
    border-radius: 3px;
    position: absolute;
    font-weight: bold;
    font-size: 10px;
    right: 10px;
    letter-spacing: 0.03em;
    top: 26%;
    content: 'APROVAÇÃO IMEDIATA';
}

.payments .payment > label[for="payment-credit-card"]:after {
    top: 13%;
}
</style>

.holder-cols-checkout .payments .payment-header .discount-flag {
    position: absolute;
    padding: 4px 4px 3px;
    right: 12px;
    background: #f1b616;
    color: #f4f6f8;
    border-radius: 40px;
}

footer .security-label {
    display: none;
    margin-bottom: 25px;
}
.holder-cols-checkout .payments .payment.selected {
    background: #deceff54;
    border-color: #000000;
}

.holder-countdown::after {
    content: "";
    display: block;
    background: linear-gradient(to right, #ffff4a 0, #fcd000 4%, #ffc112 5%, #a3d3fd 50%, #dbeeff 84%, #00d62e 119%);
    height: 5px;
    width: 100%;
    position: relative;
    top: 10px;
}

.holder-countdown {
    padding: 9px 0 !important;
}

.logo {
    position: absolute;
    top: 40px;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

.item-security {
    visibility: hidden;
}

.holder-cols-checkout .cart-resume .detail.total {
    color: #59b2ea;
    padding-top: 12px;
    padding-bottom: 6px;
}

.holder-cols-checkout .box-checkout.box-resume .cart_total {
    color: #f1b616;
}

.form-horizontal .holder-input.valid:after {
    position: absolute;
    top: 14px;
    right: 15px;
    font-family: FontAwesome;
    color: #00a801;
    content: "\f00c";
}

.holder-cols-checkout .box-checkout.active .box-title .holder-number {
    background: 509fe4;
    border-color: #f1b616!important;
    color: #fff;
    border-radius: 40px;
}

.holder-cols-checkout .cart-resume .detail.total {
    color: #00a801;
    padding-top: 12
px
;
    padding-bottom: 6
px
;
}
#form-promocode button, #form-promocode input {
    
    BORDER-RADIUS: 40PX;
}
.holder-cols-checkout .box-checkout:not(.active):not(.disabled):not(.box-resume):not(.box-payment) .holder-number {
    background-color: #51ac08;
}

.form-horizontal .form-group .error, .form-horizontal .form-group.group-error .holder-selectskin:not([readonly]), .form-horizontal .form-group.group-error .input:not([readonly]), .form-horizontal .form-group.group-error .textarea:not([readonly]) {
    border-color: #E50F38;
    background: #FEECEF;
    BORDER-RADIUS: 40PX;
}

.holder-cols-checkout .box-checkout input {
    max-height: 40px;
    BORDER-RADIUS: 40PX;
}


}

.input-group .input-group-addon {
    display: table-cell;
    width: 64px;
    font-size: 13px;
    line-height: 14px;
    color: #333;
    border-collapse: separate;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    border-radius: 40px;
    font-weight: 500;
}
/* ULTIMO DIA DE PROMOÇÃO */

.holder-cols-checkout .holder-container-resume .item-holder-quantity-price::after {
    content: "ESQUENTA BLACK FRIDAY";
    font-size: 11px;
    padding: 3px 5px;
    color: #fff;
    font-weight: 600;
    background: #000000;
    border-radius: 5px;
    display: inline-block;
    align-self: end;
}

/* Tamanho do Preço */
.holder-cols-checkout .cart-resume .detail.total .value {
    font-size: 22px;
}
/* 12x no Cartão */
.holder-cols-checkout .cart-resume .detail.total .value:after {
    content: 'em até 12x no cartão';
    color: #4b4b4b !important;
    display: block;
    font-weight: bold;
    font-size: 12px;
}

.btn-text.btn-purple /* COR DO BOTÃO DE CUPOM - ALTERAR SE PREFEIR */ {
    color: #000000;
      border-radius: 40PX;
}

.btn-primary, .btn-primary:hover {
    background: #00b1ea;
    border-radius: 40PX;
}

  /* Adicionar Icone dos Correios */

.option.clearfix {
    background-image: url(https://www.propeg.com.br/ad-viewer/Correios/Integrada/macbook.png)!important;
    background-size: 27px!important;
    content: ""!important;
    background-repeat: no-repeat!important;
    background-position-x: 145px!important;
    background-position-y: 90%!important;
}
/* Adicionar Icone dos Correios */

.option.clearfix {
    background-image: url(https://www.propeg.com.br/ad-viewer/Correios/Integrada/macbook.png)!important;
    background-size: 27px!important;
    content: ""!important;
    background-repeat: no-repeat!important;
    background-position-x: 145px!important;
    background-position-y: 90%!important;
}

.yellow /* COR CRONOMETRO - ALTERAR SE PREFEIR */ {
    color: #FFC926!important;
}
body {
    overflow-x: hidden;
    font-size: 13px;
    background: #59b2ea26;
    text-shadow: 0 0 1px rgb(0 0 0 / 1%);
    -webkit-text-stroke: 1 px transparent;
    font-weight: 400;
    font-family: Rubik,sans-serif;
}
.holder-cols-checkout .box-checkout:not(.active):not(.disabled):not(.box-resume):not(.box-payment) {
    background: #ffffff;
    box-shadow: 0 0 1em #00000026;
    border-radius: 40px;
}
.holder-cols-checkout .box-checkout:not(.active):not(.disabled):not(.box-resume):not(.box-payment) .title {
    color: #f1b616!important;
}

.checkout-step.enabled .connect, .checkout-step.enabled .holder-icon {
    background: #00b1ea;
}

a {
    text-decoration: none;
    color: #4d4d4d;
}
.holder-cols-checkout .box-checkout {
    width: 100%;
    position: relative;
    padding: 27px 21px 23px;
    margin: 0 0 20px;
    background: #FFF;
    border: 2px solid transparent;    
    border-radius: 40px;
    box-sizing: border-box;
    transition: all .2s;
}
.holder-cols-checkout .box-checkout.active {
    cursor: default;
    border-color: #f1b616;
    border-radius: 40px;
}


.c-green-2 {
    color: #00a801!important;
}

.holder-cols-checkout .box-checkout:not(.active):not(.disabled):not(.box-resume):not(.box-payment) .title {
    color: #00a801!important;
}

.col-checkout:not(.col-3) .box-checkout.active:not(.upsell) {
    width: auto;
    margin: 0 10px 18px;
    padding-left: 14px;
    padding-right: 14px;
    border: 0;
    border-top: solid 4pX #f5f5f5;
    box-shadow: none;
    border-radius: 40PX;
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 32%);
}


.holder-cols-checkout .box-checkout.disabled {
    cursor: default;
    pointer-events: none;
    -moz-opacity: .5;
    -khtml-opacity: .5;
    -webkit-opacity: .5;
    opacity: .5;
    border-top: solid 4 px #f1b616;
    box-shadow: none;
    border-radius: 40PX;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    filter: alpha(opacity=50);
}

.holder-cols-checkout .box-checkout.box-resume {
    width: auto;
    margin: 0 10px 20px;    
    padding-left: 14px;
    padding-right: 14px;
    border: 0;
    border-top: solid 4px f5f5f5;
    box-shadow: none;
    border-radius: 40PX;
    box-shadow:0 1px 4px 0 rgb(0 0 0 / 32%);
}

.holder-cols-checkout .box-checkout.box-resume .cart_total {
    color: #5abd35;
}
.holder-cols-checkout .box-checkout:not(.active):not(.disabled):not(.box-resume):not(.box-payment) .holder-number {
    background-color: #ffffff;
}
.holder-cols-checkout .box-checkout:not(.active):not(.disabled):not(.box-resume):not(.box-payment) .holder-number {
    background-color: #51ac08;
}
.input-group.input-group-prepend .input-group-addon {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-right: 0;
    border-radius: 40px;
}
.green {
    color: #00a801!important;
}

.icon-mercadopago {
    background-image: url(https://http2.mlstatic.com/frontend-assets/ui-navigation/5.14.4/mercadopago/logo__large.png);
}

.holder-cols-checkout .payments .payment.selected {
    background: #f5f5f5;
    border-color: #000000;
}

/* Rodapé - ALTERAR INFORMAÇÕES */

span.f11.black-50::after {
    content: ' Atendimento via WhatsApp: (31) 98929-0170 \A Seg a Sex - 09:00 às 18:00 \ CNPJ: 32.076.021/0001-87 ©️ Todos os direitos reservados.';
    display: block;
    margin-top: 15px;
    white-space: pre-wrap;
    line-height: 1.8;
  }

.medium {
    font-weight: 500;

}

.c-text-success-2 {
    color: #36b376!important;
}

.black-50 {
    color: grey!important;;

  }
/* SITE BLINDADO*/ 
body > div.inner-body > footer > div > div > div:before {
    content: url();
    background-image: url(https://api.siteblindado.com/v1/seal/aw/www.cea.com.br/seal.png);
    background-size: 115px 32px;
    display: inline-block;
    width: 115px;
    height: 32px;
    content: "";
    margin-bottom: 15px;
}

  @media (max-width: 700px)
footer .security-label {
    display: none;
    margin-bottom: 25px;
}

header {
    background: #00b1ea;
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 32%);
}
</style>

esse script faz o que no checkout? 

Curtir Curtir ×
Link para o comentário
  • 0
SEOStrategist Level 1

SEOStrategist Colaborador Conversador Primeiro Post

Postado
Postado
Cara, tem um script que eu usei e deu uma melhorada sinistra no visual do checkout. O lance é que ele muda as cores, adiciona uns icones e dá uma repaginada na aparência pra ficar mais profissa. Vou colar aqui pra vc dar uma olhada. Só ajusta as cores e imagens pro estilo da tua marca, flw? ```css /* Customização do Checkout - Yampi */ .holder-cols-checkout .box-checkout.active .box-title .holder-number { background: #509fe4; border-color: #f1b616!important; color: #fff; border-radius: 40px; } /* Alterar a cor do botão */ .btn-primary, .btn-primary:hover { background: #00b1ea; border-radius: 40px; } /* Icones personalizados nos passos do checkout */ li.checkout-step:nth-child(1) > div:nth-child(2):after { content: url("URL_DA_IMAGEM_DO_ICONE_1"); display: block; margin-top: -12px; } li.checkout-step:nth-child(2) > div:nth-child(2):after { content: url("URL_DA_IMAGEM_DO_ICONE_2"); display: block; margin-top: -12px; } /* Customização das mensagens de erro */ .form-horizontal .form-group .error, .form-horizontal .form-group.group-error .holder-selectskin:not([readonly]), .form-horizontal .form-group.group-error .input:not([readonly]), .form-horizontal .form-group.group-error .textarea:not([readonly]) { border-color: #E50F38; background: #FEECEF; border-radius: 40px; } /* Rodapé com informações da loja */ span.f11.black-50::after { content: ' Atendimento via WhatsApp: SEU_NUMERO_AQUI Seg a Sex - HORARIO_AQUI CNPJ: SEU_CNPJ_AQUI © Todos os direitos reservados.'; display: block; white-space: pre-wrap; line-height: 1.8; } ``` Espero que ajude a dar aquele up no teu checkout. Vê se curte e qualquer coisa ajusta conforme tua necessidade. Lembrando que é importante saber um pouco de CSS pra personalizar certinho, mas nada que umas googladas não resolvam. Taca-le pau nesse checkout!
Curtir Curtir ×
Link para o comentário
Atenção: Este conteúdo tem mais de 6 meses desde que foi postado. Verifique se o método ensinado nele ainda é válido para os dias atuais.
mister blackmaads
Infelizmente, seu conteúdo contém termos que não permitimos. Caso esteja tentando publicar seu número de WhatsApp, lembre-se que isso é proibido expor no Fórum.
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emojis são permitidos.

×   Seu link foi automaticamente incorporado.   Mostrar como link

×   Seu conteúdo anterior foi restaurado.   Limpar o editor

×   Não é possível colar imagens diretamente. Carregar ou inserir imagens do URL.

Processando...
×
Seguir 0
Ir para lista de Perguntas
×
Level 1
Você está no
Level 1
36 pontos até o próximo level
×