# Announcement bar
An announcement bar is a short snippet where you can showcase a message to your site. Using an announcement bar on your website is one of the easiest ways to draw visitors' attention.
You might add an announcement bar to highlight the following information:
* shipping information,
* new stock alerts,
* any promotions, such as sales or new gift cards, etc.
In this article, we will show you how to add an Announcement bar section.
## How to add an Announcement bar section to your Shopify store
{% hint style="success" %}
Steps:
1. In the theme editor (**Customize**),> click **Add section.**
2. Select the **Announcement bar.**
3. Make necessary changes.
4. **Save** the settings**.**
{% endhint %}
## How to edit an Announcement bar section
### Section settings
Adjust the **Color scheme** for this section.
{% hint style="info" %}
In Shopify, the [Color scheme](https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme) (a set of colors) of your store can be set within the [Theme settings](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings). It helps group elements and their respective colors, making your store visually appealing and cohesive. You can apply the color schemes to different sections throughout your online store with a color scheme picker.
{% endhint %}
* **Desktop content width**: Determine the width of the announcement content on the desktop (20% - 100%).
* **Auto-rotate announcements**: Change the announcement slides automatically (when there are 2 announcements or more) across the browser or device.
* **Change every**: Set a duration for the slider to change every 3-10s (when the **Auto-rotate slides** option is enabled).
#### **Section padding**
You can modify the spacing above and below the section by adjusting the slider to change the values of the **Top padding** and **Bottom padding**.
### Block settings
#### Announcement
* **Text**: Input the information needed.
* **Link**: Direct customers to a specific page when clicking the bar.
#### Countdown timer
Add a countdown timer block and adjust the end time of the event.
The **Countdown type** offers two modes:
* **Evergreen**: A repeating countdown that resets after a specified duration (e.g., every month).
* This is useful for recurring sales, daily deals, or subscription cycles.
{% hint style="warning" %}
The Evergreen setting is only available in Sleek **version 1.8.0 and above**. ✨
See [Changelog](https://docs.foxecom.com/sleek-theme/changelog).
{% endhint %}
* **Fixed time**: A one-time countdown that ends at a specific date and time.
* Ideal for limited-time promotions, event registrations, or product launches.
{% hint style="info" %}
If you choose the **Evergreen** countdown, you must specify the **Duration** for when the timer should reset.
**Duration** determines how often the countdown restarts.
{% endhint %}
{% hint style="info" %}
If you choose the **Fixed time** countdown, you need to specify when the countdown should end.
Enter the exact date and time in the **Ends time** field when the countdown should stop.
{% endhint %}
*Date formats accepted:*
| Name | Format | Example |
| -------------- | ------------------- | ------------------- |
| 24 hour format | YYYY/MM/DD HH:MM | 2023/10/04 23:30 |
| 12 hour format | YYYY/MM/DD HH:MM aa | 2023/10/04 11:30 PM |
Insert the heading or content of the event in the **Text** field.
You can also display a call-to-action button next to the countdown timer to redirect customers to your desired pages.
Add a **Label** and **Link** for one or both, then choose a **Button style** (Primary button/ Secondary button/ Underline button)**.**
## Best practices
:white\_check\_mark: Do:
* Use short texts (make sure you try your store on mobile, where it is narrower).
* Limit the number of rotating texts to 2 or 3. While you can use more, your customers probably won't see them.
:no\_entry: Don't:
* An announcement bar can be easy to miss due to its small size. Therefore, avoid using the announcement bar for critical information. Instead, use a bigger section in the page.
