# Top bar

{% embed url="<https://youtu.be/SCX-caLYd10>" %}

**Top bar** section is a versatile tool for displaying essential information such as links, announcements, social media profiles, and language options. It’s the first thing visitors see, making it a key component for enhancing your store’s usability and engagement.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FuXhVDKeJMyLfFPZ5g917%2FHyper%20docs%20screenshot%20do%20not%20delete%20-%202025-12-25T152814.136.jpg?alt=media&#x26;token=a802941f-5c42-44ba-aa94-31e9791b10b1" alt=""><figcaption></figcaption></figure>

## How to add a Top bar section to your Shopify store

{% hint style="success" %}
Steps:

1. In the theme editor (**Customize**), navigate to the **Header** group and click **Add section.**
2. Select the **Top bar.**
3. Make necessary changes.
4. **Save** the setting&#x73;**.**
   {% endhint %}

## How to edit a Top bar section

### Section settings

These settings control the overall layout and appearance of the Top Bar.

* **Container width:** Choose between **Fixed width** or **Full width**, depending on your store’s design.
* **Color scheme:** Select a color scheme that aligns with your branding. A contrast with the header color works best for visibility. See how to set up Colors: [colors](https://docs.foxecom.com/hyper-theme/theme-settings/colors "mention")
* **Show separator line:** Delineate the top bar from other sections with a separator line.
* **Section padding:** Adjust the top and bottom padding to control spacing around the Top Bar.

### Block settings

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2Ft7T55RNWnauQ3BQiw9YY%2Fimage.png?alt=media&#x26;token=244680ac-0710-49e3-8e71-c7cbd0ae2963" alt=""><figcaption></figcaption></figure>

The Top Bar section supports **four different block types:**

* [Linklist](#linklist)
* [Text](#text)
* [Social links](#social-links)
* [Language & Country](#language-and-country)

{% hint style="danger" %}
📱 **For Tablet and Mobile Views**:

Only **blocks with their position set to Center** will be displayed. Ensure you center-align critical blocks for optimal visibility on smaller screens.
{% endhint %}

{% tabs %}
{% tab title="Linklist" %}
Perfect for adding a menu for quick navigation links.

* **Menu:** Select a menu from your Shopify to display in the Top Bar.
* **Position:** Choose to align the menu **Left**, **Center**, or **Right** within the Top Bar.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FsKVRagRSlB9wAU88Tiy2%2Fimage.png?alt=media&#x26;token=5e2dbaa5-d295-4d49-ac9e-ce3db65a9404" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
💡 **Tip:** Use concise labels for links to keep your navigation clean and easy to use.
{% endhint %}
{% endtab %}

{% tab title="Text" %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FJ7GlXgE43xcjyemlcQ4Y%2Fimage.png?alt=media&#x26;token=4fa9efcc-dc5c-4936-8374-70510133d909" alt=""><figcaption></figcaption></figure>

The **Text** block lets you add static announcements or promotional messages.

* **Text:** Add a short message like "🚚 Free Express Shipping on Orders Over $50!" or "📞 Contact us for bulk orders!"
* **Position:** Align the text **Left**, **Center**, or **Right**.

{% hint style="info" %}
💡 **Best practice:** Include emojis to make your message more engaging and visually appealing!
{% endhint %}

* **Highlight text:** Include a highlighted text in button style or different color.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2F3VwA3T8bJ28Z2mVhz3a0%2Fimage.png?alt=media&#x26;token=862b3139-8f4c-4c42-990b-f05a6b7fd96f" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Social links" %}
The Social links block allows you to display icons for your social media profiles.

* **Enable/Disable social platforms:** Toggle options for platforms like **Facebook, Instagram, Twitter, TikTok**, and more.
* **Position:** Align the icons to the **Left**, **Center**, or **Right**.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FAMvDlB9Qb64bcECM1SPc%2Fimage.png?alt=media&#x26;token=e84ed554-8b8a-4e48-9a08-27d875ae19a4" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
To display the social icons, make sure you have updated your social links in **Theme settings > Social media**.
{% endhint %}
{% endtab %}

{% tab title="Language & Country" %}
The Language & Country block is great for stores with international audiences.

* **Enable language selector:** Toggle this on to display a dropdown for selecting a language.

{% content-ref url="header/use-language-selector" %}
[use-language-selector](https://docs.foxecom.com/hyper-theme/pages-global-sections/header/use-language-selector)
{% endcontent-ref %}

* **Enable country/region selector:** Toggle this on to let customers choose their country or region.

{% content-ref url="header/use-country-region-selector" %}
[use-country-region-selector](https://docs.foxecom.com/hyper-theme/pages-global-sections/header/use-country-region-selector)
{% endcontent-ref %}

* **Position:** Align the selectors **Left**, **Center**, or **Right**.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2F9eYCdsLp4cXZJ1KSEE1i%2Fimage.png?alt=media&#x26;token=6556a584-efaa-4319-bacd-400e7ed69b2d" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
Ensure you’ve set up **language and market settings** in Shopify to use this feature effectively.
{% endhint %}
{% endtab %}
{% endtabs %}

***

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FkUIzEsJKOeRiz891zyf5%2Flivechat883x471%20(1).png?alt=media&#x26;token=90cbed2c-e791-49c8-9f43-49a08bed6f1f" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_hyper&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/hyper-theme/pages-global-sections/top-bar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.