Dicas Básicas CSS e HTML

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

image

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:

image

  $(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

image

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

image

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

image

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

14 curtidas

Opa, boa tarde!
Esse do contador não deu certo pra mim, não sei se é porque uso tema ou se o código está incorreto. Quando adiciono o código, aparece o X em várias linhas indicando erro. Segue imagem dos erros.40

1 curtida

Olá KiKoZI
Poderia nos passar os códigos do banner regressivo novamente?
O código atual esta com erros…

Consegui tirar os erros, porem também não funcionou
$(document).ready(function(){ contadorAdd({ ativar: ‘sim’,titulo: “Contador”,ano: ‘2018’,mes: ‘03’,dia: ‘15’,hora: ‘19’,segundos:‘0’});});

No seu caso seria apenas inserir uma vírgula em cada final de linha, menos na ultima do segundo. O meu está assim, mas também não funciona. Mas pelo menos não fica com esse X vermelho.

No meu também não funcionou. O contador fica zerado. contador%20error

Boa noite!
Sobre incluir a Aba Institucional no rodapé, eu consegui, mas o “Sobre a Loja” ficou no meio. Se eu excluir o “Sobre a Loja”, o Institucional tb some.
Como faço pra deixar nessa ordem: Institucional, Categorias e Sobre a Loja?

image

como faço para colocar no cabeçalho pra mostrar frete grátis, ganhe desconto na primeira compra, parcele sem juros? alguém poderia me ajudar mandando os códigos

1 curtida

KiKoZi,

O meu “institucional - Sobre Nós” ficou no final da pagina e não ao lado do “Categorias”. Você pode me ajudar?
image

Como você colocou esse “RASTREAR PEDIDO” ???

obrigado pela atençao

2 curtidas

Usei o código do Institucional para colocar um menu de marcas no meu rodapé, mas ele fica abaixo de tudo em vez de ficar ao lado de Categorias…

Olá, galera.

Qual CSS para aumentar o tamanho do botão “Alterar forma de pagamento” ?

Agradeço desde já.

Abraços.

alguém por favor me ajuda na dúvida acima ?

Olá, tudo bem?
Quer aprender a fazer, você mesmo, as alterações básicas que necessita? Vai no tópico aí do link e dá uma olhadinha. :wink:

Bom dia! Não consegui que funcione o contador regressivo
pode me ajudar?

Alguma modificação para funcionar? Pois também não deu aqui

1 curtida

Olá Bom dia!

Nenhuma das dicas funcionou no meu site.

Boa tarde pessoal, sou novo por aqui, estou fazendo um site, ainda não coloquei domínio próprio, estou só personalizando, já peguei muitas dicas nesses tópicos, muito obrigado, mas na versão mobile encontrei um problema; na barra de home ficou aparecendo uma barra preta, poderiam me ajudar? Tenho 2 dúvidas:

  1. Como remover essa barra preta deixando o fundo normal.
  2. Como tirar esses pontinhos do MENU e colocar a palavra MENU mesmo ao lado da pesquisa.

site: https://oh-honey.lojaintegrada.com.br/

Boa noite pessoal, alguém tem o código para colocar banner na página do carrinho?
Vi que tem algumas lojas que possuem, alguém aí???
Aguardo, abraços

1 curtida

Como você colocou o icone de frete gratis no cabeçalho?