# Announcement bar

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2F9BfbHG7Eep1nCDQZl4I8%2FFox-BG%20Light%20(1).jpg?alt=media&#x26;token=6adadb49-2935-4265-95be-9026ca62a4dd" alt=""><figcaption></figcaption></figure>

An announcement bar is a short snippet where you can showcase a message to your site. The **announcement bar** is an excellent way to grab your customer’s attention with important messages, promotions, or countdowns.

## **How to add an Announcement bar to your Shopify store**

{% hint style="success" %}
Steps:

1. In the theme editor (**Customize**), navigate to the **Header** group and click **Add section.**
2. Select the **Announcement bar.**
3. Make necessary changes.
4. **Save** the setting&#x73;**.**
   {% endhint %}

## How to edit an Announcement bar section <a href="#how-to-edit-an-announcement-bar-section" id="how-to-edit-an-announcement-bar-section"></a>

### Section settings

You can control how the bar displays by ticking/unticking the checkboxes.&#x20;

* **Show close button**: Activate the X button on the right-hand side of the bar.

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2Fu2Xdt2EYvKOhrEJlYa3M%2FFox-BG%20Light.jpg?alt=media&#x26;token=e93feafc-0729-4ab2-9d16-c0a5eaef34d4" alt=""><figcaption></figcaption></figure>

* **Enable carousel**:  Enable swiping through when you have multiple announcements.&#x20;
* **Auto-rotate messages**: Activate auto-scroll messages.
* **Change message every** (second): Determine the rotating message's speed when the auto-rotate messages option is enabled.

### Block settings

{% hint style="success" %}
Steps:

1. Locate **Announcement bar.**
2. Click **Add block.**
   {% endhint %}

#### Content

* **Text**: Input the information needed.
* **Link:** Direct customers to a specific page when clicking the bar.
* **Hide on pages**: Hide the Announcement bar on targeted pages.

#### Visibility

You can decide whether to hide one announcement bar from a specific view (mobile/ tablet/ desktop).

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FYi73vEEEtZru2EISvuCW%2FFox-BG%20Light%20(2).jpg?alt=media&#x26;token=00525bbb-bbf6-4c13-9353-0c4cbf1d12d0" alt=""><figcaption></figcaption></figure>
