# Announcement bar

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/1ZoNRsmvzCL3M9MGkUYU/Untitled%201.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/SC6aQHor4sAbaCZIsGlO/Untitled.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/EKxsPNbunOrHocVK3NfW/Untitled%202.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/54cZgxAoIKbciIh4TxhZ/Untitled%203.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/4sr5hCr6l7ZNuxlWwrUd/Untitled%204.png" alt=""><figcaption></figcaption></figure>

## **Adding a section**

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/ErY8dfqurwDh57wbHTqL/Untitled%205.png" alt=""><figcaption></figcaption></figure>

The section is static, it is added initially and cannot be removed. This is done so that the **Announcement bar** in the **DOM** is higher than the **Header**.

## **Section settings**

### General

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/gd4pNHo4eVvfGr39zW7k/Untitled%206.png" alt=""><figcaption></figcaption></figure>

1. **`Layout`** - the setting is responsible for choosing the type of display. There are three options to choose from:
   * **`Simple text`** - plain text will be displayed, the settings for it are below in the **Simple text** block;
   * **`Countdown timer`** - a countdown timer will be displayed, the settings for it are below in the **Countdown timer** block;
   * **`Ticker`** - a text will be displayed like a ticker.
2. **`Show close button`** - the setting is responsible for displaying a cross to hide the announcement bar;
3. **`Background image`** - the setting allows you to add a background image;
4. **`Background image type`** - the setting allows you to select the type of background image display:
   * **`Stretch`** - this setting will stretch the image across the width of the entire block;
   * **`Repeat`** - this setting will make the picture repeat, the number of repetitions depends on the width of the picture.
5. **`Additional phone`** - the setting is responsible for displaying social icons;
6. **`Additional menu`** - the setting is responsible for displaying links.

### Slideshow

If you want to display a carousel in the announcement bar, please add blocks to the section.

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/mNH9MCvO5iom7RfghUYE/Untitled%207.png" alt=""><figcaption></figcaption></figure>

1. **`Enable autoplay`** - the setting allows you to enable autoplay for the carousel;
2. **`Autoplay speed`** - the setting allows you to change the autoplay speed of the carousel.

### Simple text

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/5JT17ZMSP5f8BsKTxSSq/Untitled%208.png" alt=""><figcaption></figcaption></figure>

1. **`Text desktop`** - the setting allows you to set the text content for **Desktop**;
2. **`Text mobile`** - the setting allows you to set the text content for **Mobile**. If the content is empty, the content will be taken from the **Desktop** version.

### Countdown timer

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/rtWztLoB6Ba2KzdDpVbX/Untitled%209.png" alt=""><figcaption></figcaption></figure>

1. **`Text desktop`** - the setting allows you to set the text content for **Desktop**;
2. **`Text mobile`** - the setting allows you to set the text content for **Mobile**. If the content is empty, the content will be taken from the **Desktop** version.
3. **`Year`** - the setting allows you to set the years until the end of the countdown;
4. **`Month`** - the setting allows you to set the months until the end of the countdown;
5. **`Day`** - the setting allows you to set the days until the end of the countdown;
6. **`Hour`** - the setting allows you to set the hours until the end of the countdown;
7. **`Timezone`** - the setting allows you to set the Timezone of the countdown;
8. **`Button label`** - the setting allows you to set the button label;
9. **`Button link`** - the setting allows you to set the button link.

### Ticker

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/VxK1ScZJtgoaO9qfcuwf/Untitled%2010.png" alt=""><figcaption></figcaption></figure>

1. **`Hide bullets`** - the setting allows you to hide bullets between sentences;
2. **`Text`** - the setting allows you to set the text of the ticker;
3. **`Movement speed (desktop)`** - the setting allows you to set the ticker animation speed on the **desktop**;
4. **`Movement speed (mobile)`** - the setting allows you to set the ticker animation speed on the **mobile**.

### Colors

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/XoRNZ5jGEK0V3VGB4uUy/Untitled%2011.png" alt=""><figcaption></figcaption></figure>

1. **`Background`** - the setting allows you to set the section background color;
2. **`Text`** - the setting allows you to set the text color;
3. **`Timer text`** - the setting allows you to set the timer text color;
4. **`Arrow`** - the setting allows you to set the arrow color;
5. **`Link`** - the setting allows you to set the link color;
6. **`Button label`** - the setting allows you to set the button label color;
7. **`Button background`** - the setting allows you to set the button background color;
8. **`Button border`** - the setting allows you to set the button border color;
9. **`Button label (hover)`** - the setting allows you to set the button label color on hover;
10. **`Button background (hover)`** - the setting allows you to set the button background color on hover;
11. **`Button border (hover)`** - the setting allows you to set the button border color on hover;
12. **`Button close`** - the setting allows you to set the color of the close button;
13. **`Button close (hover)`** - the setting allows you to set the color of the close button on hover;
14. **`Social icon`** - the setting allows you to set the color of the social icons;
15. **`Social icon (hover)`** - the setting allows you to set the color of the social icons on hover.

## **Block settings**

### Block Announcement

You can add a block Announcement, to the section. If blocks are added, then a carousel will be shown.

The content of the carousel slides can be a **Simple text** or a **Countdown timer**.

The settings of the **Simple text** and the **Countdown timer** are the same as in the general settings.

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/2YcpbHHSUkSV64eZKnoO/announcement-block1.png" alt=""><figcaption></figcaption></figure>

## Additional Information

1. When closing the **Announcement bar**, it is hidden and will be shown only if you close the tabs and open the store again.
2. The closing data is added to the **Session Storage** with the name - **showAnnouncementBar**.
3. If you set an incorrect date, the timer will not start and will remain with zero values.
4. When the timer expires, zero values remain.