Hey everyone,
Does anyone know if there’s a way to add a fixed bar in the header with promotional messages directly in VTEX, or do you need to implement HTML/CSS code?
For example, something like “You’re $199.00 away…” — it doesn’t need to have any functionality, I just want to display a message.
Hi @plataformaous, how’s it going?
Is your store IO or Legacy?
Generally, you’ll need to implement it via HTML code.
If you’re on the LEGACY CMS, it might be inside a customElement and you could edit it without needing to touch the entire codebase.
If you’re on VTEX IO and the component was added to storeBlocks, it can be edited via the Site Editor without needing to touch the code either.
So you just need to check whether you’re in one of these cases before making a decision.
Note: if you’re not on any of these versions and it’s directly in the code, ideally a development specialist should handle it, ok?
I’m here if you need anything.
Best,
Estevão
Thanks! I’ll give it a try. It’s still the Legacy one =D
I managed to insert a simple piece of code directly into the HTML. However, the problem is that the bar pushed the menu down, covering 22px of the content. It’s not a big deal, but I need to fix it. I think I’m missing something — maybe adding some padding so that the entire layout respects the space taken up by the bar.
I’ll leave a screenshot here along with the code I used, in case you have any ideas.
<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>
@plataformaous It might be the menu style and not the bar itself specifically. Check if there’s any CSS style from the menu that’s conflicting and needs to be adjusted.
In the bar’s style you can try adding that padding you already noticed, but I didn’t see anything beyond what’s already there.
Look into the menu style issue, and the right approach is to use the LID method to test changes without impacting production, ok?
Cheers,
Estevão.