A Shopify store owner using the Dawn theme successfully removed an announcement bar (“FREE SHIPPING ON ORDER OVER $199”) through the theme customizer, but it continues to appear on the live site despite being invisible in the editor.
Troubleshooting suggestions provided:
Current status:
The issue remains unresolved. The store owner clarified they only have one market (Australia) and want to remove the old hardcoded announcement bar to replace it with a new one. Community members offered CSS solutions and suggested creating a new announcement bar through code in the header file, but concerns exist that hiding CSS might also affect the new announcement bar.
Hi,
I succeed remove announcement bar when I customize the theme. However, when I preview the site, the announcement bar is still there.
I want to get rid of the FREE SHIPPING ON ORDER OVER $199
This is when I clicked preview and it still exists despite I already removed when I customize the theme.
Within the customize site, I no longer see it.
@cheriesapparel - did you remove it from customize settings or custom css? can you please share your website link?
If you have multiple markets make sure you’re using proper market when making edits in Customizer.
Share your store url so that I can provide you solution code.
Thanks
Hello there @cheriesapparel I think you should try this CSS custom code approach if you haven’t already
Got code editor find the announcement-bar.liquid file. Find this line code:
Open the base.css file and write the css to hide the code by targeting this class: “page-width utility-bar__grid utility-bar__grid–3-col” like:
#shopify-section-sections--24611281502496__announcement-bar .utility-bar{
display: none !important;
}
Let me know if it works for you!
Chéries: Premium Sleepwear That Elevates Comfort and Confidence. – Chéries Apparel
Hello this is the site, the announcement bar is at the header. I cannot see it anymore when I customize the page; however when I open it public or view it still stays there “FREE SHIPPER OVER $199”. This is what I want to get rid off.
I only have Australia as my market but I am not sure what’s the problem causing it.
Chéries: Premium Sleepwear That Elevates Comfort and Confidence. – Chéries Apparel
Hello this is the site, the announcement bar is at the header. I cannot see it anymore when I customize the page; however, when I open it public or view it still stays there “FREE SHIPPER OVER $199”. This is what I want to get rid of.
Chéries: Premium Sleepwear That Elevates Comfort and Confidence. – Chéries Apparel
Hello this is the site, the announcement bar is at the header. I cannot see it anymore when I customize the page; however, when I open it public or view it still stays there “FREE SHIPPER OVER $199”.
Yes, can you show me how to get it remove please? I think it’s the hardcoded, i already try other methods but it’s still there.
@cheriesapparel please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css
.utility-bar {display: none; visibility: hidden;}
But i want to display a different announcement bar, will my new ones get hidden too? I just need to get if of that old announcment bar under edit code, so then i can recreate new one
@cheriesapparel we can create new as well by adding code to header file
Hello @cheriesapparel
You can check this issue via below three ways and see if can resolve this issue:
Hard refresh your browser by pressing ctrl+F5 to see if it is related to the change not updated properly.
Kindly check if this announcement bar is from third party app and if so, better contact related app support team and remove the related code inserted on your store theme completely. This shall be disappeared accordingly.
This bar is added by CSS and you need to remove whole CSS code to let it work. If it is still not working, better contact the theme developer for further help. Thank you!