--- title: Top Bar in Booster theme description: How to set up your Top Bar. --- [Skip to content](https://help.boostertheme.com/knowledge/how-to-setup-top-bar-in-booster-theme#main-content) ![logo_white_booster-Sep-13-2022-06-54-02-62-PM.png\]](https://help.boostertheme.com/hs-fs/hubfs/logo_white_booster-Sep-13-2022-06-54-02-62-PM.png?height=36&name=logo_white_booster-Sep-13-2022-06-54-02-62-PM.png) - [Home - Help Center](https://help.boostertheme.com/knowledge) Open main navigation Close main navigation - [Home - Help Center](https://help.boostertheme.com/knowledge) - [Go to boostertheme.com](https://boostertheme.com/) [Go to boostertheme.com](https://boostertheme.com/?hsLang=en) Hello. How can we help you? - There are no suggestions because the search field is empty. 1. [Home - Help Center](https://help.boostertheme.com/knowledge?hsLang=en) 2. [In-depth Tutorials](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en) 3. [More tutorials](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#more-tutorials) # Top Bar in Booster theme ## How to set up your Top Bar. **[![Top Bar](https://help.boostertheme.com/hs-fs/hubfs/image-png-Nov-24-2023-08-46-47-8506-AM.png?width=688&height=276&name=image-png-Nov-24-2023-08-46-47-8506-AM.png)](https://help.boostertheme.com/hubfs/Top%20Bar.png?hsLang=en)** The Top Bar is a horizontal section at the top of your website interface. It typically contains important and concise information such as announcements, notifications, or quick-access links. The top bar serves as a prominent and easily noticeable area to convey essential messages or provide users with swift navigation options. This feature allows you to display content like social media icons, other links, contact information, and other messages at the top of all the pages of your online shopping site. #### **In this article:** 1. [Content](https://help.boostertheme.com/knowledge/how-to-setup-top-bar-in-booster-theme#content) 2. [Social Media](https://help.boostertheme.com/knowledge/how-to-setup-top-bar-in-booster-theme#Social-media) 3. [Links](https://help.boostertheme.com/knowledge/how-to-setup-top-bar-in-booster-theme#links) 4. [Scrolling Messages](https://help.boostertheme.com/knowledge/how-to-setup-top-bar-in-booster-theme#Scrolling-messages) 5. [Contact Information](https://help.boostertheme.com/knowledge/how-to-setup-top-bar-in-booster-theme#contact) 6. [Geo Block](https://help.boostertheme.com/knowledge/how-to-setup-top-bar-in-booster-theme#geo-block) 7. [Free Shipping Progression bar](https://help.boostertheme.com/knowledge/how-to-setup-top-bar-in-booster-theme#free-shipping-bar) 8. [Enable/disable](https://help.boostertheme.com/knowledge/how-to-setup-top-bar-in-booster-theme#enable-disable) 9. [Layout](https://help.boostertheme.com/knowledge/how-to-setup-top-bar-in-booster-theme#section-layout) 10. [Height](https://help.boostertheme.com/knowledge/how-to-setup-top-bar-in-booster-theme#Height) 11. [Font size](https://help.boostertheme.com/knowledge/how-to-setup-top-bar-in-booster-theme#Font-size) 12. [Color Combination](https://help.boostertheme.com/knowledge/how-to-setup-top-bar-in-booster-theme#color-combination) 13. [CTA Button](https://help.boostertheme.com/knowledge/how-to-setup-top-bar-in-booster-theme#cta-button) --- #### **Content** You can put a maximum of 3 blocks on your bottom bar. #### **Social Media** This section will show your social media links. [**Learn how to change your social media links here**](https://help.boostertheme.com/knowledge/location-contact-and-social-media-theme-settings?hsLang=en) **[![Social media](https://help.boostertheme.com/hs-fs/hubfs/Social%20media.png?width=688&height=46&name=Social%20media.png)](https://help.boostertheme.com/hubfs/Social%20media.png?hsLang=en)** #### **Links** We offer the option to add menu links to your top or bottom bar. [![Links](https://help.boostertheme.com/hs-fs/hubfs/Links.png?width=688&height=48&name=Links.png)](https://help.boostertheme.com/hubfs/Links.png?hsLang=en) #### **Scrolling messages** With this setting, you can create multiple messages scrolling. [![Scrolling Messages](https://help.boostertheme.com/hs-fs/hubfs/How%20to%20setup%20Top%20bar%20in%20Booster%20theme%203.gif?width=252&name=How%20to%20setup%20Top%20bar%20in%20Booster%20theme%203.gif)](https://help.boostertheme.com/hubfs/Scrolling%20messages.gif?hsLang=en) #### **Contact Information** With this setting, you can choose to display your phone number and email address in your store. [![Contact](https://help.boostertheme.com/hs-fs/hubfs/Contact.png?width=688&height=42&name=Contact.png)](https://help.boostertheme.com/hubfs/Contact.png?hsLang=en) #### **Geo Block** With this feature, you can geo-personalize what your visitors see. For example: ``` %flag_emoji% This is an example for your %country% in the city of %city% %flag_svg% ``` Result:   [![Geo-block](https://help.boostertheme.com/hs-fs/hubfs/How%20to%20setup%20Top%20bar%20in%20Booster%20theme%205.jpg?width=442&name=How%20to%20setup%20Top%20bar%20in%20Booster%20theme%205.jpg)](https://help.boostertheme.com/hubfs/Geo-block.webp?hsLang=en) There are 4 different handles you can use to geo-personalize your section: - %flag\_emoji%  - %country% - %city% - %flag\_svg% #### **Free Shipping Progression bar** This feature allows you to showcase to the customer how much more is needed to get free shipping on your online store. Whenever a customer adds a new product to its cart, the bar will track it. You can set a Free Shipping text, for example Only %AMOUNT% more for free shipping! An achieved Free shipping text, for example, You are eligible for free shipping! [![Free Shipping Bar](https://help.boostertheme.com/hs-fs/hubfs/How%20to%20setup%20Top%20bar%20in%20Booster%20theme%206.gif?width=560&name=How%20to%20setup%20Top%20bar%20in%20Booster%20theme%206.gif)](https://help.boostertheme.com/hubfs/Free%20Shipping%20Bar.gif?hsLang=en) To change the Total amount go to **Theme settings** > **Free shipping bar \[APP\]** #### **Enable/disable the Top Bar** With this setting, you can enable/disable the footer option on the desktop or mobile version of the site. [![](https://help.boostertheme.com/hs-fs/hubfs/image-png-Nov-24-2023-08-21-07-9633-AM.png?width=247&height=126&name=image-png-Nov-24-2023-08-21-07-9633-AM.png)](https://help.boostertheme.com/hubfs/Enable-disable.webp?hsLang=en) #### **Section Layout** The layout is of utmost importance for any online shopping platform. In our Booster theme, four different types of section layouts are available. They are as follows: - Global default - Full Width - Full-Width Background - Boxed #### **Height** With this setting, you may make changes to the Top or Bottom Bar's height. You may change it to anything between 10 px to 100 px. [![Height](https://help.boostertheme.com/hs-fs/hubfs/Height.gif?width=688&height=303&name=Height.gif)](https://help.boostertheme.com/hubfs/Height.gif?hsLang=en) #### **Font Size** With the help of this setting, you can change the font size. [![Font Size](https://help.boostertheme.com/hs-fs/hubfs/Font%20Size.gif?width=688&height=277&name=Font%20Size.gif)](https://help.boostertheme.com/hubfs/Font%20Size.gif?hsLang=en) #### **Color Combination** This allows you to choose your Primary or Secondary combination for your colors. You can also choose the Custom combination to create a custom preset for that section only. #### Button This allows you to have a call-t0-action on the Top Bar. You have the option to modify its color combination and where the button leads to. [![Top Bar CTA Button](https://help.boostertheme.com/hs-fs/hubfs/Top%20Bar%20CTA%20Button.jpg?width=688&height=157&name=Top%20Bar%20CTA%20Button.jpg)](https://help.boostertheme.com/hubfs/Top%20Bar%20CTA%20Button.jpg?hsLang=en) You can also add animations to the button to make it stand out. Here's a video to demonstrate the options available: *- End of the article -* - [Get started](https://help.boostertheme.com/knowledge/get-started?hsLang=en#main-content) - [Installation Process](https://help.boostertheme.com/knowledge/get-started?hsLang=en#installation-process) - [Learning the basics](https://help.boostertheme.com/knowledge/get-started?hsLang=en#learning-the-basics) - [In-depth Tutorials](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#main-content) - [Sections](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#sections) - [Theme settings](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#theme-settings) - [Product Page](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#product-page) - [More tutorials](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#more-tutorials) - [More support](https://help.boostertheme.com/knowledge/more-support?hsLang=en#main-content) - [Partners app Ressource center](https://help.boostertheme.com/knowledge/more-support?hsLang=en#partners-app-ressource-center) - [Managing your subscription & theme](https://help.boostertheme.com/knowledge/more-support?hsLang=en#managing-your-subscription-theme) - [Change logs & Policies](https://help.boostertheme.com/knowledge/more-support?hsLang=en#change-logs-policies) - [Announcements and others](https://help.boostertheme.com/knowledge/more-support?hsLang=en#announcements-and-others) [![Chill listening crop-3](https://help.boostertheme.com/hs-fs/hubfs/Booster-black-logo.png?width=178&height=51&name=Booster-black-logo.png "Chill listening crop-3")](https://boostertheme.com/?hsLang=en) Copyright © 2026, Booster Theme - PreviewX Inc. ```json { "@context" : "https://schema.org", "@type" : "VideoObject", "contentUrl" : "https://22632616.fs1.hubspotusercontent-na1.net/hubfs/22632616/Top%20Bar%20CTA%20Button.mov", "dateModified" : "2024-04-02T05:29:37.850Z", "duration" : "PT35S", "height" : 2050, "name" : "Top Bar CTA Button", "thumbnailUrl" : "https://22632616.fs1.hubspotusercontent-na1.net/hubfs/22632616/Top%20Bar%20CTA%20Button.mov/medium.jpg?t=0", "uploadDate" : "2024-04-02T05:29:37.843Z", "width" : 3360 } ```