Check out the Youtube channel

Custom 3-col announcement bar

Written by Eduard Fastovski

Sep 04, 2023

I recently helped build this simple 3-column custom announcement bar:

I’m sharing the code in case anyone else wants to do the same, or use it as a starting point for your own design.

View the Code on

To use it:

  1. Add a custom liquid section into your header. You probably need to be on a 2023 theme that supports draggable sections in the header and footer.
  2. Paste the HTML into the custom liquid field.
  3. Paste the CSS into the custom CSS field at the bottom of the section.


  • Change the background color by modifying background: black; to whichever color name or #hex color you need.
  • Change the text color by changing color: white;
  • Change the font size in the font-size: 11px; line

Don’t worry about the font family - when you add it to your site, it will inherit whatever font you’re using for paragraph text.

Want posts like this in your inbox? Subscribe to the newsletter.