Barra de promoção fixa header

Pessoal,

Alguém sabe se tem como colocar uma barra fixa no header com mensagens de promoção direto na VTEX ou precisa implementar código html/css?

Por exemplo essa “Faltam R$199,00…”, não precisa ter uma função, só queria colocar uma mensagem.

Oi @plataformaous tudo bem?

Sua loja é IO ou Legado?

Geralmente você precisa implementar via código HTML.

Caso você esteja no CMS LEGADO ela pode estar dentro de um customElement e você poderia alterar tranquilamente sem a necessidade de mexer no código inteiro.

Caso você esteja no VTEX IO se o componente foi colocado em storeBlocks, ele pode ser editado via Site-editor sem a necessidade também de mexer no código.

Daí você só precisa avaliar se está em um desses casos para tomar a decisão.

Observação: caso não esteja em nenhuma das versões e sim direto no código, o ideal é que um especialista em desenvolvimento mexa no código, ok?

Sigo à disposição.

At.te,
Estevão

1 Like

Valeu! Vou testar. Ainda é o Legado =D

1 Like

Consegui inserir um código simples direto no html. Porém, o problema é que a barra empurrou o menu pra baixo, cobrindo 22px do conteúdo. Não é um grande problema, mas preciso corrigir. Acho que estou deixando algo passar, talvez inserir um padding pra que todo o layout respeite o espaço da barra.

Vou deixar um print aqui e o código que usei, se tiver alguma ideia.

<style>.message_top_head { padding: 3px; width: auto; background-color: #0071ce; color: white; text-align: center; font-family: Roboto, san-serif; font-size: 12px;}</style>
<div class="message_top_head"> 10% OFF na primeira compra com <strong>PRIMEIRA10</strong>!ㅤㅤ•ㅤㅤㅤFrete grátis acima de R$600</div>

Captura de tela 2023-03-03 163709

@plataformaous Pode ser que seja o estilo do menu e não da barra especificamente. Veja se tem algum estilo CSS do menu que esteja em conflito e você precise adaptar.

No estilo da barra você pode testar colocar esse padding que tu mesmo já percebeu, mas não vi nada de mais do que já tem.

Verifique essa questão do estilo do menu e o correto é você utilizar o método de LID para testar as alterações e não impactar produção, ok?

Abs,
Estevão.

1 Like