---
description: >-
  Utilize settings from the provided global section to display the top bars in
  the entire store, such as the announcement bar and additional bar.
---

# Top bars

## Announcement bar

{% hint style="info" %}
Use the "Announcement bar" to post any important information or eye-catching slogans to engage with the customers.
{% endhint %}

#### **Show announcement bar**

Tick the checkbox to display the Announcement bar at the very top of a page. The same bar will be displayed throughout the store.

#### **Mobile slider autoplay interval**

To control the interval of changing announcements from one to another, use the "Mobile slider autoplay interval" scale to set the time limit from 2 to 10 seconds.

{% hint style="success" %}
**Tip:** Type any texts in the provided fields to display an announcement on the desktop and mobile. The announcement bar can show up to three columns with different information on the desktop if you fill in the text fields for each section described below. Using two or more sections in the bar activates the slider effect on mobile.
{% endhint %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FoTJfPaWfvi3UFK8kac5f%2Fannouncement%20bar_mobile.png?alt=media&#x26;token=1d18702e-eaf3-42ba-9a4a-e935077ec831" alt=""><figcaption></figcaption></figure>

#### **First section - Third section**

In the **"Heading"** and **"Text"** fields, put any promotional information such as discounts, sales, contacts, campaigns, or announcing new features/products.

If required to direct customers to another page by pressing the text in the bar, use the **"Link"** resource selector to add a page URL. Once a link redirection is specified in the field, a navigation arrow will appear for the corresponding section upon mouse hover.

#### **Colors**

Change the top bar colors using the **"Background"**, **"Text"**, **"Icon"**, and **"Border"** pickers.&#x20;

**Background**

Use the given item to change the background color of the announcement bar.

**Text**

This item allows you to set the text color in the bar.

**Icon**

The background color of the arrow can be modified using the **"Icon"** color picker.

**Border**

To highlight the bar, define the color of the border.

In the following examples, you can see the previously mentioned settings:

{% tabs %}
{% tab title="Example 1" %}
<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2Foscz6wNp0L9C7cNdiO9V%2Fannouncement_example%201.png?alt=media&#x26;token=71ade616-18f4-4b22-88fb-e30f71e80979" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}
<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FeVDcQekmvASaBE5OGssc%2Fannouncement_example%202.png?alt=media&#x26;token=e229fbd9-19ba-4e74-bb0b-a891a78b6c6a" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Additional bar

{% hint style="info" %}
This functionality enables placing additional information in a separate line of the Header on the desktop, such as "Country/region selector", "Language selector", and "Social media icons".

<mark style="color:orange;">**Note!**</mark> By default, the bar will be hidden on mobile.
{% endhint %}

#### **Show additional bar**

Activate the option to add the extra line below the Announcement bar or at the top of the page if the last is disabled.

Specify which information should be displayed in the bar by activating each option:

#### Country/region selector

The currency switcher will be shown in the left corner with the ticked **"Enable country/region selector"**. This option requires additional settings that you can apply in _Shopify admin -> Settings -> Payments_. Learn more in the initial [documentation](https://help.shopify.com/en/manual/payments).

#### Language selector

Here you can enable the language selector to be displayed in the additional bar on the left next to the Country/region selector.&#x20;

<mark style="color:orange;">**Note!**</mark> The language switcher works with the initiated languages in your _Shopify admin -> Settings -> Languages_. Check this[ help page](https://help.shopify.com/en/manual/markets/languages/manage-languages) for the details.

#### Social media icons

Enable **"Show social media icons"** to display social buttons.

To connect icons with the social accounts, paste links in _Theme settings -> Social media_. Check this[ help page](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/social-media) for the details.

To allow customers to follow your store using the Shop app, activate the **"Enable Follow on Shop"** checkbox. For more details about this feature, check the initial[ documentation](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/follow-on-shop).

#### **Colors**

Change the text and background colors of the bar according to the look and feel of your store using the **"Background"** and **"Text"** pickers.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FjVqqX50OVm356RzchSE8%2Fadditional%20bar_desktop.png?alt=media&#x26;token=dbe9d896-b94e-48af-8873-a5d242a0f647" alt=""><figcaption></figcaption></figure>
