Aproveitando, sua loja está com algum código quebrado para o mobile
Bom dia, eu uso os códigos abaixo para colocar a quantidade do carrinho no mobile, mas como o @Leonardo_Vicentini_F falou tem que ir alterando os valores e testando para ver como fica.
Rodapé
Todas as páginas
CSS
.atalhos-mobile li.fundo-principal {
position: relative;
}
.atalhos-mobile li.fundo-principal .qtd-carrinho {
position: absolute;
top: 5px;
right: 5px;
background: #020202;
width: 17px;
height: 17px;
line-height: 17px;
color: #ffffff;
border-radius: 50%;
font-size: 10px;
display: inline-block!important;
border:2px solid #ffffff;
}
E esse outro em
Rodapé
Todas as páginas
JAVASCRIPT
$(document).ready( function(){
if( $(window).width() < 767 && $(‘#cabecalho .carrinho .qtd-carrinho’).length ){
$(‘.atalhos-mobile li.fundo-principal’).append( $(‘#cabecalho .carrinho .qtd-carrinho’).clone() );
}
});
2 curtidas
Obrigado pelo retorno!
Sim. Acredito que essa seja a melhor solução, mas nesse momento realmente é inviável.
Em relação ao código quebrado, não sei o que fiz de errado, porque no site aparece as fotos normalmente.
Olá, Paulo!
Obrigado pelo retorno.
Eu irei utilizar os códigos enviados por você.
E como disse ao Leonardo, dei uma pesquisada em temas e nesse momento é inviável para mim. Os temas que são parecido com o modelo acima tem valores um pouco salgado nesse momento para mim.
Desculpa a pergunta conheço pouco de programação, mas por acaso você não inseriu o código para colocar duas colunas de produtos para o mobile e depois flegou a opção para usar o produtos em carrossel pois pode ser aí que esteja quebrando o layout, se sim tenta deixar em carrossel e exclui o código de duas colunas ou deixa o código e desmarca o carrossel para ver como fica.
2 curtidas
Hum! Vou tentar fazer isso!
Obrigado!
Não sei se você poderá me ajudar nesse quesito, mas tem como o Full banner também aparecer na opção móbile?
1 curtida
Olha o full banner por padrão ele já aparece no mobile,
Tenta esse código para inserir os mini banners.
Página home
Rodapé
Javascript
$(‘.row-fluid.banner.mini-banner.hidden-phone’).removeClass(‘hidden-phone’);
1 curtida
Olá pessoal !
Estou precisando de uma ajudinha com meu site, acontece que acessando pelo pc aparece a lupa de pesquisa dos produtos , e pelo celular não .
Gostaria de colocar uma lupa na versão mobile para que facilite o cliente a encontrar o produto desejado .
Agradeço desde já quem puder me ajudar.
aparece quando clica no menu… nem tinha percebido isso neste tema, achei ruim isso…
Pois é , seria melhor que a lupa estivesse fora deste menu superior para que facilitasse para o cliente .
$(function(){setTimeout(function(){if (window.innerWidth < 768) $('header.mobileChanged.fix-on-top .row-flex.align-items-center.justify-content-between').after($('#search-form'));}, 500);});
2 curtidas
Muito obrigado, Leonardo !! Agora o site ficará melhor para uso em mobile !! 
1 curtida
Oi Leonardo!
Acho que consegui arrumar o problema com o carrossel.
Eu só estou tendo problema para encontrar o código para a barra de busca. Achei alguns códigos aqui na comunidade e estou testando, mas nenhum esta funcionando.
São esses:
.conteudo-topo .busca {border: 0;background: transparent;padding: 0;}
.conteudo-topo .busca input {width: 100%;box-sizing: border-box;height: 40px;border-radius: 30px;padding: 0 40px 0 20px;}
.conteudo-topo .busca button {height: 35px;padding: 0;width: 35px;line-height: 35px;border-radius: 100%;top: 3px;right: 3px;}
.conteudo-topo .carrinho {border-radius: 30px;}
.conteudo-topo .carrinho>a i {border-top-left-radius: 20px;border-bottom-left-radius: 20px;}
Ou esse
body {
background: #fff url(//cdn.awsli.com.br/temasv2/151/bg-topo.jpg) repeat-x!important;
padding-top: 37px;
}
.barra-inicial {
background: #faeff0;
}
Estou tentando achar um que ficasse assim:
Poderia me ajudar? Aminha barra de busca esta bugada.
vários CSS’s estão quebrando o laout atua, sugiro deixar o original, para assim a gente conseguir ajudar, pq se não fica complicado.
desativando algumas CSS para restaurar…
1 curtida
Oi, Paulo!
O bug acho que consegui resolver. Eu só não estou conseguindo aplicar esse código para os mini banner aparecerem no mobile? Tem que ser naquela opção EDITAR CSS ou INCLUIR HTML? Fiz nessa última e nada.
Oi Leonardo.
Fiz o que você falou. Apaguei tudo!
não apagou tudo, mas foi o bastante para trabalhar…
@media only screen and (max-width: 767px){
button.botao.botao-busca.icon-search.fundo-secundario {
color: black;
background: transparent;
border: none;
}
input#auto-complete {
transition: none;
border: none;
box-shadow: none;
border-bottom: 1px solid black;
border-radius: 0!important;
}
button.botao.botao-busca.icon-search.fundo-secundario {
margin: 0;
padding: 0;
right: 10px;
}
a.atalho-menu.visible-phone.icon-th.botao.principal {
display: none!important;
}
.busca {
margin: 0;
}
.busca input {
width: 100%;
padding: 10px;
}
}
2 curtidas
Olá,
Em incluir HTML, eu tenho o mesmo tema padrão que você e para mim deu certo assim
Local: rodapé
Local publicação: página-home
Tipo: javascript
$(‘.row-fluid.banner.mini-banner.hidden-phone’).removeClass(‘hidden-phone’);
Apliquei o código em EDITAR CSS mas até o momento não houve nenhuma alteração. Fiz algo errado?