Topo Ramdomico (cabeçalho) segue codigo

Segue um script para mudar o cabeçalho a cada visita ou a cada atualização

inserir na opção html javascript
Painel > Minha loja > Aparência > Código HTML adicionar

    $(document).ready(function() {

      var imgr = Math.round(Math.random()*2);   
      var imgsrc = ['class01','class02','class03'];
      $('#cabecalho').addClass(imgsrc[imgr]);
    });

e acrescentar no css via

Painel > Minha loja > Aparência > Editar CSS

.class01{
background-image: url(aqui você cola a url da imagem) !important;
background-repeat: no-repeat;
}
.class02{
background-image: url(aqui você cola a url da imagem) !important;
background-repeat: no-repeat;
}
.class03{
background-image: urlaqui você cola a url da imagem) !important;
background-repeat: no-repeat;
}

1 Curtida

Oi Anderson_Vieira!
Qual o tamanho das imagens que você recomenda para subir e qual a melhor utilidade para essa alteração?

tamanho 1920px e a melhor utilidade dependendo do seu layout você poderá
usar como chamada de algum produto especifico, na verdade tem varias já vi
um que usava um fundo transparente por cima e as imagens do topo mudava vai
da criatividade de cada um na própria loja da LI tem um layout que usa esse
recurso mais as imagens são estáticas

Excelente dica!
Gostei dessa ideia, mas posso dar só uma opinião?

É que quando vc coloca as imagens dentro do CSS, vc obriga a todos os visitantes a carregar as 3 imagens. E por muitas vezes o visitante visualiza apenas uma dessas imagens.

Então, além de deixar mais lento, pode nem ser usada uma dessas imagens.

Se fizéssemos o contrário, e ao invés de mudar a classe já definíssemos o background via JS.
Assim a imagem seria carregada somente depois do conteúdo (Lazy-load) e evitaria consumo de trafego desnecessário.

1 Curtida

Legal não tinha pensado assim realmente economizaria trafego