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){$("-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:
<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%;
}

Central de Atendimento

<script type="text/javascript">
$(function(){

window.open('http://websro.correios.com.br/sro_bin/txect01$.QueryList?
P_LINGUA=001&P_TIPO=001&P_COD_UNI='+numerosro,'_blank');
}
);
var telefone = $('.span6 table.table tbody tr:nth-child(3) td:nth-
child(2) span').html();
$('.numerotelefone').html(telefone);
var whatsapp = $('.span6 table.table tbody tr:nth-child(4) td:nth-
child(2) span').html();
$('.numerowhatsapp').html(whatsapp);
var skype = $('.span6 table.table tbody tr:nth-child(5) td:nth-child(2)
span').html();
$('.nomeskype').html(skype);
$(".dropdown").hover(
function() {
stop( true, true ).fadeIn("fast");
$(this).toggleClass('open');
$('b', this).toggleClass("caret caret-up");
},
function()
<style>
.barra-inicial {
display: none!important;
}
.centraldeatendimento {
position: absolute;
top: 29px;

.dropdown ul.dropdown-menu {
margin-top: 0px;
margin-left: 0px;
background: #FFFFFF;
width: 235px;
padding: 0px 12px;
text-align: center;
left: -45px;
}
.rastreio {
background: #2A2A2A;
padding: 5px 15px 5px 15px;
border-radius: 3px;
font-family: Open Sans;
color: #fff;
font-weight: 700;
}
.rastreio:hover {
color: #ffd700;
}
.duvidas {
margin-top: 5px;
font-size: 15px;
color: #CC2229;
font-weight: 900;
font-family: Open Sans;
}
.email {
margin-top: 5px;
font-size: 15px;
color: #ffd700;;
font-weight: 900;
font-family: Open Sans;
}
.telefone {
font-size: 15px;
font-family: Open Sans;
font-weight: 900;
padding-top: 5px;
padding-bottom: 5px;
color: #ffd700;;
}
.whatsapp {
font-size: 15px;
font-family: Open Sans;
font-weight: 900;
padding-top: 5px;
padding-bottom: 5px;
color: #ffd700;;
}
.skype {
font-size: 15px;
font-family: Open Sans;
font-weight: 900;
padding-top: 5px;
padding-bottom: 5px;
 color: #ffd700;;
}
label {
font-size: 8px;
font-weight: bold;
color: #2A2A2A;
margin-top: -5px
}
p.numerotelefone {
margin: 0 0 10px;
text-transform: none;
font-size: 13px;
}
p.numerowhatsapp {
margin: 0 0 10px;
text-transform: none;
font-size: 13px;
}
p.nomeskype {
margin: 0 0 10px;
text-transform: none;
font-size: 13px;
}
p.email {
margin: 0 0 10px;
text-transform: none;
font-size: 13px;
}
p.faleconosco {
margin: 0 0 10px;
text-transform: none;
font-size: 13px;
}
p.telefonehora {
font-size: 10px;
margin-top: -12px;
color: #34A853;
text-transform: uppercase;
}
p.hora {
font-size: 10px;
margin-top: -7px;
color: #34A853;
text-transform: uppercase;
}
.botao.pequeno {
font-size: 12px;
padding: 3px 10px;
color: white;
text-transform: uppercase;
font-weight: bold;
}
.open>.dropdown-menu {
min-width: 100px;
}
</style>
<div class="centraldeatendimento">
<div class="centraldeatendimentop">
<ul class="menudropmenu">
<li class="dropdown">
 <p class="telefone">TELEFONE</p>
<p class="numerotelefone"></p>
<p class="divider"></p>
<p class="whatsapp">WHATSAPP</p>
<p class="numerowhatsapp"></p>
<p class="divider"></p>
<p class="skype">SKYPE</p>
<p class="nomeskype"></p>
<p class="hora">Horrio de Atentimento: </nbr>Segunda
Sexta das 9h s 17h</p>
<p class="divider"></p>
<p class="wrapper-form-profile-order-tracking hover">
<div class="input-wrapper">
<label for="OrderTracking">Digite seu cdigo de
rastreamento dos correios</label>
</div>
<p class="divider"></p>
<p class="duvidas"></p>
<p class="email"></p>
<p class="faleconosco"><span></span>
<a href="#modalContato" data-toggle="modal" data-
target="#modalContato">Fale Conosco</a>
</p>
</li>
</ul>
</div>
</div>