> For the complete documentation index, see [llms.txt](https://vshop.gitbook.io/vshop/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vshop.gitbook.io/vshop/header-group/top-bar.md).

# Top Bar

Display a top information bar to highlight messages, links, or store utilities such as social icons, language, and currency selectors.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2Fo9TKGOFluImz7Xj9dm4f%2Fimage.png?alt=media&amp;token=24673678-60ef-49b3-8ea1-3a8dd3006588" alt=""><figcaption></figcaption></figure>

To customize the Top Bar in our theme please follow the steps:

{% hint style="success" %}
Steps

1. In the theme editor (Customize), go to **Header Group**, then click **Add section**.
2. Locate T**op Bar**
3. **Save**
   {% endhint %}

## **Section Settings**&#x20;

The **Top Bar** appears above your store header and is ideal for displaying short messages, promotions, or quick-access elements such as language, currency, or social links.\
It helps highlight important information while keeping your store header clean and focused.

### **Settings General**

* **Layout** – Choose between *Full width* or *Boxed layout* for the top bar display.
* **Color scheme** – Select a predefined color scheme to match your store’s overall design.
* **Show social** – Toggle to display social media icons.
* **Show language** – Enable to show your store’s language switcher.
* **Show currency** – Enable to display your store’s currency selector.
* **Message** – Add a custom message, short announcement, or promotion.\
  Supports text formatting, links, and inline HTML for full customization.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FRzkVtCu6ZiiYZkXFuR1m%2Fimage.png?alt=media&amp;token=6a78b0b3-6d84-4fb6-896a-1b0151b7cb81" alt=""><figcaption></figcaption></figure>

***

### **Settings Tablet, Mobile**

Customize the visibility of elements on smaller screens:

* **Hide all on tablet, mobile** – Hide the entire top bar.
* **Hide social on tablet, mobile** – Hide social icons only.
* **Hide message on tablet, mobile** – Hide the announcement text.
* **Hide language on tablet, mobile** – Hide the language selector.
* **Hide currency on tablet, mobile** – Hide the currency selector.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FnMiCXj8IU96WZtezGYFm%2Fimage.png?alt=media&amp;token=a89b99fc-d26d-4758-948f-69c589d07fe3" alt=""><figcaption></figcaption></figure>

***

💡 **Tip:**\
Use the Top Bar to display time-limited offers or store-wide notices (like “Free shipping for orders over $50”).\
Keep the message short and impactful to grab customer attention without cluttering the page.