> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/ella-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/ella-documentation/sections/all-sections-in-theme/announcement-bar.md).

# Announcement Bar

<figure><img src="/files/iv3lTzhITlO5xPaJk0Ic" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/b235eZ90FAnqxbyGbTe9" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/b9F6wBipiwQaNxo6nnd5" alt=""><figcaption></figcaption></figure>

To add this section, please follow below steps:

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Add section** and choose "**Announcement bar**".

## Section Settings

### General

<table><thead><tr><th width="297">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Layout</td><td><p>Select the layout for the announcement bar. There are 2 options:<br></p><p><mark style="color:orange;"><strong>Slider</strong></mark></p><p><mark style="color:orange;"><strong>Infinite scroll</strong></mark></p></td></tr><tr><td>Show close icon</td><td>Choose to show the close icon for the announcement bar.<br><br><em><mark style="color:orange;">Note: Only applicable when the layout setting is set to slider.</mark></em></td></tr><tr><td>Select image background</td><td>Upload/Select an image as the section background</td></tr><tr><td>Text color - Background - Background gradient</td><td>Set the color, background, and border color of the text.</td></tr><tr><td>Font size</td><td>Determine the font size of the text.</td></tr><tr><td>Font style</td><td>Select the font style of the text.</td></tr><tr><td>Font weight</td><td>Select the font weight of the text.</td></tr><tr><td>Show navigation arrows</td><td>Show arrows for the announcement bar. Only applicable to the slider announcement bar with at least 2 announcement texts.</td></tr><tr><td>Maximum content width</td><td>Determine the maximum width of the content.</td></tr></tbody></table>

### Section padding

<table><thead><tr><th width="300">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Top padding</td><td>Determines the height of the top inner space of the section. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determines the height of the bottom inner space of the section. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>

## Block Settings

### Announcement

<table><thead><tr><th width="304">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Text</td><td>Fill the text you want to show for the announcement. You can use the <strong>plain text</strong> or <strong>html text</strong> if you want to style it with your own code.</td></tr><tr><td>Color</td><td>The text color of the button.</td></tr><tr><td>Border Color</td><td>The border color of the button.</td></tr><tr><td>Background</td><td>The background color of the button.</td></tr><tr><td>Background gradient</td><td>The background gradient of the button.</td></tr></tbody></table>

### Countdown

<table><thead><tr><th width="310">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Top message text</td><td>Fill the text you want to show for countdown.</td></tr><tr><td>Countdown end date</td><td>Enter the due date for the countdown with the format: <strong>yyyy/mm/dd hour/minute/second</strong>.<br><br><em><mark style="color:orange;">Example:</mark><mark style="color:orange;"> </mark><mark style="color:orange;"><strong>2025/12/4 0:0:00</strong></mark><mark style="color:orange;"> </mark><mark style="color:orange;">or</mark><mark style="color:orange;"> </mark><mark style="color:orange;"><strong>Dec 31, 2022 18:00:00</strong></mark></em></td></tr><tr><td>Text color</td><td>Apply a color to the text of countdown.</td></tr><tr><td>Border color</td><td>Apply a border color to the text of countdown.</td></tr><tr><td>Background</td><td>Apply a background color to the text of countdown.</td></tr></tbody></table>