You are on page 1of 7

Cdigos 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 pgina
https://www.youtube.com/watch?v=ygnnoewg_fM
<div id="instagram-rodape" class="hide">
<div class="conteiner">
<a href="https://instagram.com/lojaintegrada">Siga-nos no Instagram</a>
</div>
<!-- INSTANSIVE WIDGET -->
</div>
<script type="text/javascript">
$(document).ready(function() {
if($('#rodape').length && $('#rodape .pagamento-selos').length) {
$('#rodape').before($('#instagram-rodape').removeClass('hide'));
} else {
$('#instagram-rodape').remove();
};
});
</script>
<style>
#instagram-rodape .conteiner { padding: 0; background: transparent; box-shadow: none; maxwidth: 1180px; margin: 50px auto 15px; }
#instagram-rodape .conteiner a { font-size: 20px; font-weight: 600; }
</style>
Boto voltar ao topo
<!-- Boto voltar ao topo -->
<script
type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$(" #rb-top")
.fadeIn()}else{$("#rb-top").fadeOut()}});$("#rbtop").click(function(){$("body,html").animate({scrollTop:0},800);return false})});
</script>
<style type="text/css">
a.toTop {
background-color: #db2429;
border: 0;
border-radius: 3px;
bottom: 10px;
color: #ffffff;
cursor: pointer;
display: none;
font-size: 14px;
padding: 10px 15px;
position: fixed;
text-decoration:none;
right: 10px;
text-align: center;

width: auto;
z-index:500;
}
a.toTop:hover {background-color: #cc2532;}
</style>
<a href=''></a>
<a id='rb-top' class="toTop" style='display: none; position: fixed; bottom: 90px; right:1%;
cursor:pointer;'>
<i class="fa fa-chevron-up"></i><br>
<span style="font-size:12px;">TOPO</span>
</a>
Local de publicao: Rodap
Pgina de publicao: Todas as pginas
Tipo: HTML
Mudar Tamanho da logo
.logo img {
max-height: 128% !important;
}
Fora todas as pginas para HTTPS.
Mas para isso j tem que ter comprado o Rapis SSL na Loja Integrada.
Basta adicionar em MINHA LOJA > INCLUIR CDIGO HTML e colar ele ajustado para o Cabealho,
em todas as pginas e tipo HTML.
<script type="text/javascript">
if (window.location.protocol != "https:")
{
window.location.href = "https:" + window.location.href.substring(window.location.protocol.length);
}
</script>
Altera cor dos titulos de pagamentos e selos
/* altera cor dos titulos de pagamentos e selos */
.pagamento-selos .titulo {
color: #fff !important;
}
Tirar quadrado atrs do Facebook
#rodape .redes-sociais.borda-principal {
background: none !important;
}
Aumentar banner principal para a largura total da pgina
/* 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 Seo 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 cdigo para cada um
para saber o id da cartegoria abra seu site, aperte f12 e v em conteiner principal > id = cabealho
>class conteiner > class menu superior > class nivel 1
Lembrando que para cada site o id da cartegoria ser diferente! No 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 cdigo no editar css:
.menu.superior .titulo {
margin: 30px -1px;
}
Para melhorar o menu na verso 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 padro 16px*/
}
Alterar nomes do Social Media
Para alterar o nome do social tem que ser via jquery. Montei o cdigo, basta alterar o texto para o
desejado, basta saber colocar html na LI, em Minha Loja - > Incluir html, escolhe o tipo HTML,
posio rodap, todas as pginas e s salvar.
OBS: lembre-se de manter as aspas simples. se no vai dar erro.
<script>
$(document).ready(function(){
// altera nome de social para desejado
$('#rodape .redes-sociais .titulo').html('NOME DESEJADO');
});
</script>
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 Cdigo HTML e deixe como na imagem abaixo. O cdigo a incluir esse:
<script>
$(function(){
$("a.bem-vindo").text("Cadastro");
});
</script>
Mudar de posio o boto ver mais
Para o mobile tenta adicionar esse cdigo:
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 cdigo:
Ele vai ficar acima da descrio, e na parte inferior da foto, alm de um pouco menor...
.listagem-item:hover .acoes-produto a {
width: 70%;
padding: 10px 0;
margin-top: -100px;
}
Imagem do Boto Comprar
.pagina-produto a.botao.botao-comprar.principal.grande.botao-comprar-ajax {
background: url(LINK DA IMAGEM DO BOTO) center center no-repeat;
border: none;
width: 180px;
text-indent: -9999px;
}
Criar boto do Mercado Livre no rodap
Criar uma pagina html no rodap
<ul id="selos-rodape" class="hide">
<li>
<a href="LINK DA LISTA DOS PRODUTOS NO ML" target="_blank">
<img src="LINK DA IMAGEM" />
</a>
</li>
</ul>
<script type="text/javascript">
$(document).ready(function() {
$('#selos-rodape li').appendTo($('#rodape .selos ul'));
});
</script>

<style>
.selos li { margin-bottom: 10px; }
</style>
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%;
}

You might also like