# Announcement bar

The announcement bar allows you to share important information with your customers from any page. You can customize up to six different announcement blocks to display campaign or promotion texts. Additionally, you can add a link to an announcement bar, making it clickable and directing customers to a specific page.

<figure><img src="https://1485471486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7H1ZB4J9TQlWDiI82pRW%2Fuploads%2FwulKm5uAahrrC4d3kV7r%2Fimage.png?alt=media&#x26;token=73efbbc9-9dcc-4041-a1ca-2d1f855eec7f" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Update in version 3.0.0:** Color **Scheme 3** has been switched to **Scheme 2** to match the latest design.
{% endhint %}

## Section settings <a href="#section-settings-1" id="section-settings-1"></a>

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Color scheme</td><td><p>Changes the color of the text.</p><p>Changes the color of the background.</p><p>Changes the color of the background gradient.</p></td></tr><tr><td>Layout</td><td><p>Change the position and display method of the announcement bar:</p><ul><li>Horizontal</li><li>Vertical left side on home page</li><li>Vertical right side on home page</li></ul></td></tr><tr><td>Desktop height</td><td>Determine the height of the announcement bar on desktop.</td></tr></tbody></table>

**Running text**

{% hint style="info" %}
Running text works when there is more than one block.
{% endhint %}

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Reverse direction</td><td>Change the order or orientation of element to the opposite of its current state.</td></tr><tr><td>Speed</td><td>Change the running speed of the announcement bar.</td></tr></tbody></table>

**Text**

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font size</td><td><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Font weight</td><td><p>The font weight of the text:</p><ul><li>Regular</li><li>Medium</li><li>SemiBold</li><li>Bold</li><li>ExtraBold</li><li>Black</li></ul></td></tr></tbody></table>

**Section margin**

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top margin</td><td>Adjust the space between the top edge of a section and the elements or content above it.</td></tr><tr><td>Bottom margin</td><td>Adjust the space between the bottom edge of a section and the elements or content below it.</td></tr></tbody></table>

## Announcement **Block**

<table><thead><tr><th width="238">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Text</td><td>Add campaign or promotional text that you want to display to your customers.</td></tr><tr><td>Link</td><td>The link customers will navigate to when they click the announcement bar.</td></tr></tbody></table>