Frete Grátis Tarja

Código CSS/HTML
1

Como eu adiciono um desses em minha loja?

imagem
imagem750×1128 71.7 KB

2

Olá amigo, você pode colocar um banner tarja com as informações que achar necessárias, para isso é só ir em Visual>Banner>criar banner tarja. Só tem que ter a arte pronta.

1 curtida
3
3 curtidas
4

Olá @andreculau, valeu pelo toque, posso ter interpretado mal nosso amigo @Valmir1. Se for o banner tarja é tranquilo até demais, já se for a tarja acima de tudo, lá no topo é só usar este JS no rodapé…

$(document).ready(function() {
$('body').prepend('<div style="margin: auto 0; background-color: #7cfc09; padding: 10px 0"> <p style="color: #000; text-align: center; margin: 0;">FRETE GRÁTIS ACIMA DE R$300,00</p> </div>');
3 curtidas
5

@Valmir1 as cores são do seu exemplo mas pode trocar a vontade, no MOBILE você vai usar este código podendo diminuir ou aumentar a fonte também, ok. É um código CSS

@media(max-width:767px){
    .atalhos-mobile.visible-phone.fundo-secundario.borda-principal:before {
        content: 'FRETE GRÁTIS';
        display: block;
        background: #7cfc09;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #000;
        font-size: 22px;
    }
}
2 curtidas
6

testei mais não foi o código está correto?

7

tente assim faltou fechar o código com })

$(document).ready(function() {
   $('body').prepend('<div style="margin: auto 0;background-color: #7cfc09;z-index: 9999999;padding: 10px 0;position: relative;width: 100%;"> <p style="color: #000; text-align: center; margin: 0;">FRETE GRÁTIS ACIMA DE R$300,00</p> </div>');
})
1 curtida
8

apareceu nenhum erro porém não atualiza no site…

Capturar 1.PNG
Capturar 1.PNG1908×897 137 KB

9

adicione um item no carrinho para atualizar a pagina

image
image1164×337 90.8 KB

10

tem com deixar fixo no topo?

11

tente assim

$(document).ready(function() {
   $('body #cabecalho').prepend('<div style="margin: auto 0;background-color: #7cfc09;z-index: 9999999;padding: 10px 0;position: relative;width: 100%;"> <p style="color: #000; text-align: center; margin: 0;">FRETE GRÁTIS ACIMA DE R$300,00</p> </div>');
})
2 curtidas
12

Olá @reidasublimacaoinsum, desculpe não ter respondido antes. Não tenho vindo mais na comunidade, estou migrando minha loja e tive uns contratempos, vou ter que ficar na Li por mais um tempinho. Vi que o Leonardo te ajudou, então fico feliz, se tiver mais alguma dúvida chama aí, valeu!

Só uma observação, se quiser pode trocar a cor #7cfc09 por uma de sua preferência.

1 curtida
13

Olá prezados, consegui adicionar a traja no site ficou perfeito.
Então me veio uma dúvida, é possível colocar movimento? por exemplo para ficar deslizando pro lado automaticamente, para mostrar mais que 1 mensagem ou ficar repetindo a mesma… ?

14

sim é possível fazer via CSS, tente assim:

 .barraAvisoTopo {
        overflow: hidden;
        white-space: nowrap;
       
      
    }
    .barraAvisoTopo span {
        
        right: 0; 
        animation: moveText 15s linear infinite; /*aqui vc definite o tempo de passagem na tela*/
        width: 100%;
    }

    @keyframes moveText {
        0% {
            transform: translateX(100%); 
        }
        100% {
            transform: translateX(-100%); 
        }
    }
2 curtidas