Seguir

school Personalizando as cores do e-commerce B2B

Através do Google Tag Manager, você pode personalizar classes específicas do CSS do e-commerce. Para fazer isso, você deve copiar as partes abaixo que queira modificar e criar uma nova TAG do tipo "HTML Personalizado" no Google Tag Manager e colar as modificações dentro da tag <style>cole aqui</style> e depois cole tudo no editor HTML do Google Tag Manager. 

Esse tipo de alteração deve ser feita por seu especialista em TI ou a agência responsável pelo seu e-commerce B2B. Não recomendamos que alguém sem experiência em HTML e CSS faça esse tipo de edição, pois não daremos suporte para qualquer modificação no e-commerce B2B realizada  através do Google Tag Manager.

Caso tenha problemas, basta remover o Tag Manager da sua conta do Meus Pedidos através do sistema online no menu "e-commerce B2B / Google Tag Manager", ou excluir a TAG problemática do Google Tag Manager.

Dividimos em partes para facilitar o uso.

Globais 
Você pode alterar classes globais. Assim, se você não utilizar nenhuma das classes de componentes mais abaixo, você pode configurar cores específicas para todos os elementos abaixo.

Todos os links do e-commerce B2B (Em breve opção para alterar todos os botões de uma só vez).

a.b2b-link {
color: #0091ea;
}
a.b2b-link:visited {
color: #0091ea;
}
a.b2b-link:hover {
color: #0091ea;
}
button.b2b-link {
color: #0091ea;
}
button.b2b-link:hover {
color: #0091ea;
}

Títulos de páginas e informações simples

.title-b2b{
    color:#3b3b3b
}
.title-b2b-link{
    color:#0091ea
}
.title-b2b-link:hover{
    color:#0091ea
}
.info-button{
    color: #f49c60
 }
 .info-buttontooltip{
     background-color: #f7ebd0 !important;
     color:#3b3b3b !important
 }
 body{
     background-color: #eaeaea
 }

---------------------

Header

header.png

.header-b2b{
    background-color: #FFFFFF;
}
.header-b2b-button{
    color: #0091ea;
    background-color: #FFFFFF;
    border-color:#d6d6d6;
}
.header-b2b-button:hover{
    color: #FFFFFF;
    background-color: #0091ea;
    border-color:#0091ea;
}
.header-b2b-companyname{
    color: #3b3b3b;
}
.header-b2b-companyname:hover{
    color: #0091ea;
}

.header-b2b-login{
    color: #0091ea;
}
.header-b2b-login:hover{
    color: #0091ea;
}
.header-b2b-search{
    color: #0091ea !important;
       background-color: #FFFFFF !important;
       border-color:#d6d6d6 !important;
}
.header-b2b-search:hover{
        color: #ffffff !important;
        background-color: #0091ea !important;
        }
.header-b2b-search::-webkit-input-placeholder{
    color: #f7f7f7;
}
.header-b2b-search::-moz-placeholder{
    color: #f7f7f7;
}


---------------------

Subheader

subheader.png

.subheader-b2b{
    background-color:#f8f8f8;
}
.subheader-b2b-companyname{
color:#757e8b;
}
.subheader-b2b-companyname:hover{
color:#0091ea;
} .subheader-b2b-companyname-active{ color:#0091ea !important; } .subheader-b2b-companybar-active{ background-color:#0091ea !important; } .subheader-b2b-arrow{ background-color: #f8f8f8 !important; box-shadow: 0 0px 40px 28px #f8f8f8 !important; }

---------------------

Sidebar Promoções e destaques

sidebar_top.png

.sidebar-b2b-top{
    background-color: #ffffff
}
.sidebar-b2b-top-tittle{
    color:#red;
    border-color:#red;
}
.sidebar-b2b-top-item{
    color:#3b3b3b !important 
}
.sidebar-b2b-top-item:hover{
    background-color: #eef1f6;
    color:#0091ea !important
}
.sidebar-b2b-top-item-active{
    background-color: #0091ea !important;
    color:#ffffff !important
}
.sidebar-b2b-top-item-active:hover{
background-color: #0091ea !important;
color:#ffffff !important
}

---------------------

Sidebar categorias

sidebar_down.png

.sidebar-b2b-down-item{
    background-color: #ffffff;
    color:#3b3b3b 
}
.sidebar-b2b-down-item:hover{
    background-color: #eef1f6;
    color:#0091ea; 
}
.sidebar-b2b-down-item-active{
    background-color: #0091ea;
    color:#ffffff; 
}
.sidebar-b2b-down-item-active:hover{
    background-color: #0091ea;
    color:#ffffff;
}

.contact-b2b{
    background-color: #ffffff;
    color:#3b3b3b
}

---------------------

Catálogo

Afeta apenas o card onde o produto aparece no catálogo.

catalogo.png

.catalog-item-b2b{
    background-color: #ffffff
}
.catalog-item-b2b-promo{
    background-color: #fe5757;
    color:#ffffff
}
.catalog-item-b2b-title{
    color:#3b3b3b !important
}
.catalog-item-b2b-subtitle{
    color:#a2a2a2 !important
}
.catalog-item-b2b-withoutStock{
    background-color: #f4f4f4; 
    color:#9b9b9b 
}
.catalog-item-b2b-originalprice{
    color:#b5b9c1 !important
}
.catalog-item-b2b-liquidprice{ 
    color:#3b3b3b; 
}
.catalog-item-b2b-button{
    background-color: #0091ea;
    border-color: #0091ea;
    color:#ffffff
}
.catalog-item-b2b-button:hover{
    background-color: #0081d1;
    border-color: #0081d1;
    color:#ffffff
}
.catalog-item-b2b-buttonaddingproduct{
    background-color: #f49c60;
    border-color: #f49c60;
    color:#ffffff !important
}
.catalog-item-b2b-buttonaddingproduct:hover{
    background-color: #f28d48;
    border-color: #f28d48;
    color:#ffffff
}
.catalog-item-b2b-subtotal{
    color:#a2a2a2;
}

---------------------

Topo do carrinho

carrinho.png
 .cart-b2b-top{
    background: #0091ea;
    color:#ffffff
}

Esse artigo foi útil?
Usuários que acharam isso útil: 0 de 0
Tem mais dúvidas? Envie uma solicitação

0 Comentários

Por favor, entre para comentar.