# Announcement bar

{% hint style="danger" %} <mark style="color:red;">Theme retirement</mark> Ira is no longer available on the Shopify theme store. **Theme support and updates for current users will end after May 18, 2024**. [Learn more here](https://github.com/fluorescent/kb-ira/blob/main/pages/readme/theme-retirement.md).
{% endhint %}

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.

## 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.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

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

   ![](https://4075298574-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F072gQRkuxS6ZiYGtqLNG%2Fuploads%2Fgit-blob-8136c1db0026536316b0508921eb8cec5d35df08%2Fannouncement-blocks.jpeg?alt=media)
2. Click **(+) Add announcement** to add up to 3 announcements.

   > Click **Remove block** in the block settings to delete an announcement.
3. Click on an **Announcement block** to open the block settings.

   ![](https://4075298574-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F072gQRkuxS6ZiYGtqLNG%2Fuploads%2Fgit-blob-33f3780e4c29d08bb511cbae32c287596902e8b8%2Fannouncement-block-settings.jpeg?alt=media)
4. Enter your **Announcement text** as a message to your customers.

   > We recommend using no more than 10 words.
5. (*Optional*.) Click the **Announcement Link** field to select a page from your online store or enter a URL to direct customers to another page.
6. (*Optional*.) Change the **Background color** and **Text color** of the announcement.

   > We recommend using WebAIM's [contrast checker](https://webaim.org/resources/contrastchecker/) when matching colors to make sure your text is clear and readable for everyone.
7. Click **Save**.

</details>

## 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. Announcements with more words may need more time for customers to read them.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Click on the **Announcement bar** section to open the section settings.
2. Move the slider to set the time between announcements from **`3`** to **`15`** seconds.

   ![](https://4075298574-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F072gQRkuxS6ZiYGtqLNG%2Fuploads%2Fgit-blob-abf8df57a637ce6b91e11df1a49b9b9da7aeea0c%2Fannouncement-time.jpeg?alt=media)

   > Announcements will pause when customers hover over the announcement bar.
3. Click **Save**.

</details>

## Hide announcement bar

The **Announcement bar** automatically hides when there are no announcements.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Click the eye icon next to each announcement block or click **Remove block** in the block settings.

   ![](https://4075298574-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F072gQRkuxS6ZiYGtqLNG%2Fuploads%2Fgit-blob-08a64750d80bce9144ef245d13fe697e444fad14%2Fannouncements-hidden.jpeg?alt=media)
2. Click **Save**.

</details>

## Settings summary

Click on the **Announcement blocks** to find the following settings.

| Setting           | Description                                                                     |
| ----------------- | ------------------------------------------------------------------------------- |
| Announcement text | Enter a short sentence as a storewide message. We recommend less than 10 words. |
| Announcement link | Select a page to direct customers to when they click the announcement text.     |
| Background color  | Select a color for the entire announcement bar background.                      |
| Text color        | Select a color for the announcement text.                                       |

Click on the **Announcement bar** section to find the following settings.

| Setting                    | Description                                                           |
| -------------------------- | --------------------------------------------------------------------- |
| Time between announcements | Increase or decrease the amount of seconds to show each announcement. |

<br>

***

> **Related links**
>
> [Header](https://help.fluorescent.co/ira/pages/header)