Você está na página 1de 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; max-
width: 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()}});$("#rb-
top").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; border-
left: 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 { background-
color: #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%;
}

Você também pode gostar