Códigos da Loja Integrada Remover Borda do carrinho
.carrinho { border-width: 0px; border-style: solid; border-color: rgba(0,0,0,0.12); position: relative; } Adicionar Instagram no rodapé da página
https://www.youtube.com/watch?v=ygnnoewg_fM
<script type="text/javascript"> $(document).ready(function() { if($('#rodape').length && $('#rodape .pagamento-selos').length) { $('#rodape').before($('#instagram-rodape').removeClass('hide')); } else { $('#instagram-rodape').remove(); }; }); Botão voltar ao topo
<script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("" #rb-top") type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$( .fadeIn()}else{$("#rb-top").fadeOut()}});$("#rbtop").click(function(){$("body,html").animate({scrollTop:0},800);return false})});
TOPO Local de publicação: Rodapé Página de publicação: Todas as páginas Tipo: HTML Mudar Tamanho da logo
.logo img { max-height: 128% !important; } Força todas as páginas para HTTPS.
Mas para isso já tem que ter comprado o Rapis SSL na Loja Integrada. Basta adicionar em MINHA LOJA > INCLUIR CÓDIGO HTML e colar ele ajustado para o Cabeçalho, em todas as páginas e tipo HTML. <script type="text/javascript"> if (window.location.protocol != "https:") { window.location.href = "https:" + window.location.href.substring(window.location.protocol.length); } Altera cor dos titulos de pagamentos e selos
/* altera cor dos titulos de pagamentos e selos */ .pagamento-selos .titulo { color: #fff !important; } Tirar quadrado atrás do Facebook
#rodape .redes-sociais.borda-principal { background: none !important; } Aumentar banner principal para a largura total da página
/* Aumenta banner principal */ .secao-banners .conteiner { max-width: none; padding-left: 0px; padding-right: 0px; margin-left: -2px; width: calc(100% + 2px); } .banner.tarja { text-align: center; }
Deixar Seção dos produtos da loja mais largo
.conteiner { max-width: none; margin: 0 auto; padding: 0 20px; } .banner.tarja { text-align: center; } Fonte Menu Superior
.menu.superior .titulo {font-size: 14px} Mudar Cor ao passar o mouse no menu
.menu.superior .nivel-um > li:hover {background-color: nome_da_cor} Mudar Cor Menu
.menu.superior { background-color: rgb(255, 255, 255); } Mudar fonte principal
body { font-family: Open Sans !important;} Colocar Imagens no menu
li.categoria-id-00000 { background: url( COLOQUE AQUI O LINK DA IMAGEM ) center top no-repeat; text-indent: 2px; } cada cartegoria é um id e uma url, terá q fazer um código para cada um para saber o id da cartegoria abra seu site, aperte f12 e vá em conteiner principal > id = cabeçalho >class conteiner > class menu superior > class nivel 1 Lembrando que para cada site o id da cartegoria será diferente! Não adianta copiar de outro site e esperar q funcione use imagens do tamanho 40x40 ou 30x30 Se o ícone ficar grudado com o menu, coloque esse código no editar css: .menu.superior .titulo { margin: 30px -1px; } Para melhorar o menu na versão mobile use: #cabecalho .conteiner .menu.superior ul {text-align: center} #cabecalho .conteiner .menu.superior .nivel-um>li {display: ; float: initial } Imagem na Sub-cartegoria
.menu.superior>ul.nivel-um>li.categoria-id-000000 >ul { background: url(COLOQUE AQUI O LINK DA IMAGEM) right top no-repeat #fff; height: ; padding-right: 248px; }
Centralizar itens do Menu
/* Centralizar os itens do menu */ #cabecalho > .conteiner > .menu.superior { text-align: center; } #cabecalho > .conteiner > .menu.superior .nivel-um > li { float: none; display: inline-block; borderleft: 0; margin-right: -3px; } Redes Sociais Flutuantes
@media only screen and (min-width: 770px){ .barra-inicial .conteiner .lista-redes { position: fixed !important; left: 10px !important; top: 60px !important; z-index: 9 !important; width: 50px !important; } .barra-inicial .conteiner .lista-redes li { float: initial !important; border: none !important; padding: 2px 0 18px 0 !important; } .barra-inicial .conteiner .lista-redes li i { padding: 6px !important; border-radius: 40px !important; box-shadow: 0 0 0 2px white inset !important; } .barra-inicial .conteiner .lista-redes li i::before { -webkit-transition: all .4s !important; -moz-transition: all .4s !important; -ms-transition: all .4s !important; -o-transition: all .4s !important; transition: all .4s !important; } .barra-inicial .conteiner .lista-redes li i:hover::before { -webkit-transform: scale(1.5) !important; -moz-transform: scale(1.5) !important; -ms-transform: scale(1.5) !important; -o-transform: scale(1.5) !important; transform: scale(1.5) !important; } .barra-inicial .conteiner .canais-contato { float: right !important } } Mudar cor do Identifique-se
#cabecalho .conteudo-topo .superior span.cor-principal {color: red;}
Aumentar imagens da forma de pagamento no carrinho
.parcelas-produto .accordion .accordion-group .accordion-heading img { max-height: 40px; }
b.text-parcelas.pull-right.cor-principal { font-size: 16px !important; } Mudar cor dos icones das redes sociais
#cabecalho .lista-redes i { background-color:#ffd5e7; border-radius: 20px; color: #f168ab; height: 24px; width: 24px; line-height: 23px;} Alterar tamanho dos icones do rodape
/* aumenta os icones do rodape */ #rodape .lista-redes i { font-size: 25px; /* <- basta alterar para o tamanho desejado o padrão é 16px*/ } Alterar nomes do Social Media
Para alterar o nome do social tem que ser via jquery. Montei o código, basta alterar o texto para o desejado, basta saber colocar html na LI, em Minha Loja - > Incluir html, escolhe o tipo HTML, posição rodapé, todas as páginas e só salvar. OBS: lembre-se de manter as aspas simples. se não vai dar erro. <script> $(document).ready(function(){ // altera nome de social para desejado $('#rodape .redes-sociais .titulo').html('NOME DESEJADO'); }); Cor e comprimento da barra de busca
/*Cor e comprimento da barra de busca*/ #cabecalho .conteiner .busca.borda-alpha form input { background: black; width: 530px; Aumentar Texto de bem vindo
/*Aumentar texto Bem vindo*/ #cabecalho a.bem-vindo { color: #d6b738; font-size: 22px; margin-left: 40px;} Icone de busca
/*Icone de busca*/ .conteiner .conteudo-topo .busca-mobile .busca.borda-alpha button { border-radius: 50px; background-color: transparent; color: #d6b738; height: 40px; Fundo transparente na busca
/*Fundo transparente da busca*/ .busca { position: relative; padding: 5px; background-color: transparent;}
Mudar o texto bem vindo
No painel vá em Incluir Código HTML e deixe como na imagem abaixo. O código a incluir é esse: <script> $(function(){ $("a.bem-vindo").text("Cadastro"); }); Mudar de posição o botão ver mais
Para o mobile tenta adicionar esse código: Ele vai ficar abaixo dos valores, mas o cliente vai entender que é para o produto acima... @media only screen and (max-width: 479px) .listagem .listagem-item .acoes-produto-responsiva { margin: 0; padding-top: 230px; left: 0; } Já para o desktop tenta esse código: Ele vai ficar acima da descrição, e na parte inferior da foto, além de um pouco menor... .listagem-item:hover .acoes-produto a { width: 70%; padding: 10px 0; margin-top: -100px; } Imagem do Botão Comprar
.pagina-produto a.botao.botao-comprar.principal.grande.botao-comprar-ajax { background: url(LINK DA IMAGEM DO BOTÃO) center center no-repeat; border: none; width: 180px; text-indent: -9999px; } Criar botão do Mercado Livre no rodapé
Criar uma pagina html no rodapé
<script type="text/javascript"> $(document).ready(function() { $('#selos-rodape li').appendTo($('#rodape .selos ul')); });
Alterando Cor do Menu Lateral
/* Cor da barra lateral */ #corpo .conteiner .menu.lateral.fechado .nivel-um li .titulo {color: #9900CC} #corpo .conteiner .menu.lateral.fechado .nivel-um li:hover .titulo {color: white} #corpo .conteiner .menu.lateral.fechado .titulo { font-weight: Bold; } /*cor de cada categoria*/ #corpo .conteiner .menu.lateral.fechado .nivel-um li.categoria-id-512540 a { background-color: white;} #corpo .conteiner .menu.lateral.fechado .nivel-um li.categoria-id-512540 a:hover { backgroundcolor: #9900CC;} Adicionar Selos no rodapé
#rodape .pagamento-selos { background-image: url("IMAGEM QUE VC QUER"); background-repeat: no-repeat; background-color: white; background-position: right 200px center; background-size: 15%; }