Sempre vejo algumas pessoas aqui na loja integrada precisando de ajuda com customização, e afins. Então decidir colocar alguns CSS e HTML meus e alguns do próprio grupo, para tentar ajudar vocês. Vamos lá eu sempre vou tentar resumir o que o código faz e como se aplica na loja.
Contador de Ofertas
EXEMPLO
COMO UTILIZAR
Dentro do painel da Loja Integrada acesse Configurações > Incluir Código HTML > Adicionar Código. Defina os campos como descrito abaixo antes de continuar:
$(document).ready(function(){
contadorAdd({
ativar: 'sim',
título: ‘A oferta termina em’,
ano: '2018’,
mes: '01’,
dia: '10’,
hora: '18',
segundos: '10'
});
});
ATENÇÃO: Para o contador funcionar corretamente você deve trocar as informações de ano, mês, dia, hora e segundo para as informações da sua campanha.
Após adicionar o código vá até Configurações > Banners. Crie um novo banner na posição Mini Banner e dê o título de Contador (não usar outro nome)
Endereço no rodapé
Isso vai ajudar as pessoas que querem colocar seu endereço no rodapé do seu site. Como no exemplo a baixo é assim que vai ficar
Tive que colocar o link no pastebin pois o tópico estava escrevendo como HTML
COMO UTILIZAR
Dentro do painel da Loja Integrada acesse Configurações > Incluir Código HTML > Adicionar Código. Defina os campos como descrito abaixo antes de continuar:
CLIQUE AQUI PARA IR PARA O PASTEBIN
Abaixo vou deixar o link do código HTML
CLIQUE AQUI PARA IR PARA O PASTEBIN
Remover o Pop up lateral na pagina de produtos
Para as pessoas que não gostam quando seus clientes acessem as paginas dos produtos e aparece aquele Pop up lateral com o botão comprar, esse código css vai ajudar a remover
EXEMPLO
COMO UTILIZAR
Dentro do painel da Loja Integrada acesse Configurações > Editar CSS > e cole o código abaixo
/* Pop up produto pagina produto */
.pagina-produto .acoes-flutuante.borda-principal.hidden-phone.hidden-tablet {
display: none !important;}
Aba Institucional no rodapé
Se você quiser criar no seu rodapé a área de institucional do seu site, para mostrar as paginas extras criadas como exemplo. Sobre nós, Perguntas Frequentes, Termos & Condições, Contato. e também escrever os direitos reservados do seu site vou mostrar um exemplo a baixo do meu site. Eu também removi a marca D’agua
COMO UTILIZAR
Dentro do painel da Loja Integrada acesse Configurações > Incluir Código HTML > Adicionar Código
para acessar o link com o código html é só clicar abaixo
Clique aqui para ir no pastebin
Como criar efeito mosaico nos banners
Com ela é possível inserir mais 4 banners no estilo mosaico abaixo do carrossel padrão da Loja Integrada, confira
O CSS introduzido nessa extensão traz um suave efeito de ampliação ao passar o mouse sobre as imagens como mostra o exemplo acima. Essa funcionalidade é totalmente responsiva
COMO UTILIZAR
Dentro do painel da Loja Integrada acesse Configurações > Incluir Código HTML > Adicionar Código
Editando o código:
Observando o código, temos o seguinte:
As partes sublinhadas em azul representam a posição dos banners no mosaico, não é necessário mexer nisso, serve apenas para se posicionar;
As parte sublinhadas em amarelo representam os links dos banners, remova os caracteres “###” e coloque o link da página do produto, categoria ou qualquer outro link que queira entre as aspas. Utilize apenas links HTTPS para não dar problema do certificado SSL. Se caso for usar links de páginas externas adicione o termo target=”_blank” logo depois do link, com isso a página irá abrir um uma nova guia
Ainda nessa mesma linha, observe o termo “title=”NOME QUE APARECE AO PASSAR O MOUSE SOBRE A FOTO”“, o próprio exemplo indica o que é, substitua esse texto entre as aspas e coloque o que quiser;
As partes sublinhadas em vermelho representam os links das imagens. Observa que no mosaico existem duas imagens maiores e duas imagens menores. Para que fique correto será necessário criar essas imagens no tamanho correto. As imagens menores possuem o tamanho em pixels de 433 x 300 e as maiores tem o tamanho de 701 x 300. Recomendamos criar as imagens exatamente nesse tamanho para não ocorrer erros. Você poderá criar as imagens nos formatos PNG ou JPG, fica a seu critério. Após criar as imagens faça upload no servidor da sua loja para que seja gerado o link seguro em HTTPS, ou clique aqui se não souber onde é. Copie o link e substitua no local indicado em vermelho na imagem.
CLIQUE AQUI PARA ACESSAR O CÓDIGO
POR ENQUANTO SÃO ESSES, VOU ATUALIZANDO O TÓPICO COM MAIS INFORMAÇÕES FUTURAMENTE
