Are you a Shopify developer, designer or agency? It pays to be a Fluorescent partner. Apply today.

Announcement bar

The Announcement bar displays up to 3 rotating announcements at the top of every page. Let customers know about current promotions or sales, new product lines, or other need-to-know updates with optional links to other pages.

Announcement bar cycling through multiple announcements

Add announcements

Add up to 3 announcements with optional links and custom colors. For multiple announcements, you can set the time between announcements when rotating.

In your theme editor (Customize):

  1. Click the arrow beside the Announcement bar section to reveal the announcement blocks.

    Announcement bar content
  2. Click + Add announcement or select a placeholder announcement to edit.

    The Announcement bar is a static section. All announcements will appear sitewide.

  3. Add Announcement text.

    We recommend that announcements use less than 10 words.

  4. (Optional.) Paste or select an Announcement Link to make the announcement text a clickable link.

  5. (Optional.) Change the announcement's Background color and Text color.

    We recommend using WebAIM's contrast checker when matching colors to make sure your text is clear and readable for everyone.

  6. Remember to click Save in the top-right corner.

Set time between announcements

By default, multiple announcements will rotate every 5 seconds. You can choose to display each message between 3 to 15 seconds.

Slider for time between announcements
Slider for time between announcements

In your theme editor (Customize):

  1. Click on the Announcement bar section.

    This opens the section settings.

  2. Move the slider to set the time between announcements from 3 to 15 seconds.

    Rotating announcements pause when customers hover over the announcement bar.

  3. Remember to click Save.

Hide the announcement bar

The Announcement bar automatically hides when there are no announcements.

Announcement bar with all announcements hidden
Announcement bar with all announcements hidden

In your theme editor (Customize):

  1. Click the show/hide button next to each announcement block or click Remove block in the block settings.

  2. Remember to click Save.

Announcement bar section settings

The announcement bar has the following settings:

Configuration Settings

Time between announcements

The number of seconds that each announcement is displayed. Choose between 3 and 15.

Announcement block settings

Each announcement has the following settings:

Configuration Settings

Announcement text

The text or message displayed for an announcement.

We recommend between 4 and 8 words.

The url or page customers are taken to when they click the announcement.

Background color

The color used for the background of the announcement bar.

Text color

The color used for the announcement text.

Contact

🇨🇦 Fluorescent Design Inc.

Send us a message
  • Toronto OfficeMonday to Friday, 10am to 6pm ET
  • Victoria (B.C.) OfficeMonday to Friday, 10am to 6pm PT
  • Average Response Time~1 Business Day
* Excludes statutory holidays. All offices closed to the public.