How do I add an 'x' or close button to my announcement banner

Store Design
1

I am using dawn version 3.0.

I have an announcement banner on my website, however I was wondering if there is a way to add an ‘x’ or close button for the option to close the banner.

2

Hi @mystore0232 ,

There are multiple ways to do it that will require a developer to edit your code. But for just javascript code alone this is doable. Just add the code below to your global.js under the Asset folder.

document.querySelector("#shopify-section-announcement-bar > div").insertAdjacentHTML('beforeend', '**X**');
const closeX  = document.querySelector('.closeX');
closeX.style.position = 'absolute';
closeX.style.top = '8px';
closeX.style.right = '10px';
closeX.addEventListener('click', function() {
 document.querySelector("#shopify-section-announcement-bar").style.display = "none"
})
1 Like
3

A little more css for the ‘x’.

document.querySelector(“#shopify-section-announcement-bar > div”).insertAdjacentHTML(‘beforeend’, ‘x’);
const closeX = document.querySelector(‘.closeX’);
closeX.style.position = ‘absolute’;
closeX.style.top = ‘-6px’;
closeX.style.right = ‘14px’;
closeX.style.padding = ‘0px’;
closeX.style.cursor = ‘pointer’;
closeX.addEventListener(‘click’, function() {
document.querySelector(“#shopify-section-announcement-bar”).style.display = “none”
})