Announcement bar settings
This guide describes the Announcement bar section.
Use the section to display messages about sales, special discounts, and new products at the top of your store's pages.
How to access the Announcement bar section
Access this section through the theme customizer:
- Navigate to Online Store > Themes
- Select “Customize” on your active theme
- In the left sidebar (Header group) you’ll find the announcement bar situated below the Header section.
How to configure the Announcement bar section
Basic Components
The “Announcement bar” section consists of two primary components:
- General settings
- Block. Available block types include:
General settings
Select a setting described in the following table.
| Setting | Description |
| Color scheme | The Color Scheme feature enables you to personalize every aspect of your theme's colors. You can create and manage a list of color schemes in the Theme Settings under the Colors tab. These schemes allow you to define background colors, text colors, button and link styles, icons and badges colors, border and input field colors. Once a color scheme is created, you can apply it to specific sections or blocks, such as the announcement bar. When applied, all associated colors in that section will automatically update, ensuring a cohesive and professional look across your website. |
| Show separator line | By swiping the button to the right, you can add a line to visually separate the announcement bar from the header. This is especially useful when using a light background color to ensure clarity and distinction between these sections. |
| Font weight | The option allows you to control the font weight of announcements and the currency and language selectors. Font weight defines the thickness or boldness of text on your store. Available options for heading:
|
Social media icons
| Setting | Description |
| Show icons on desktop | Enable the option to add social media icons to announcement bar. |
Announcements
| Setting | Description |
| Auto-rotate announcements |
|
| Change every (choose seconds) | Select how often announcements rotate, in seconds. |
|
Scroll speed
|
The option allows you to control the slide transition speed. Simply choose the desired value using the slider. |
| Text font size | The option allows you to control the font size of announcements. Simply select the desired value using the slider. |
Country/region selector
| Setting | Description |
| Enable country/region selector (To add a country/region, go to your market settings) | If you add a country selector to your theme, then your customers can choose their country or region from a dropdown list of countries and regions that you've added in your Shopify Payments settings. The local currency is also displayed in the dropdown list beside each country or region. *If your store is on the Shopify Plus plan, then your store automatically sets your customers' country or region and currency based on their IP address. |
Language selector
| Setting | Description |
| Enable language selector (To add a language, go to your language settings) | Providing content in your customers' native language can improve sales by making it easier for them to understand your marketing, product details, shipping, and return policies. This is particularly important for international customers. To enable multiple languages on your Shopify store, you can create separate URLs for each translated version of your content. When a customer lands on a translated URL, your store will automatically display the corresponding translated version, if available. *Make sure that you have a multi-setup of languages in your store settings. |
Section padding
| Setting | Description |
| Top padding | The "Top padding" setting allows you to adjust the amount of space at the top of the section using a slider. |
| Bottom padding | The ''Bottom padding" setting functions similarly to the “Section top padding” setting but controls the space at the bottom of the section. |
| Top padding mobile | The "Top padding mobile" setting allows you to adjust the amount of space at the top of the section specifically for mobile devices using a slider. |
| Bottom padding mobile | The "Bottom padding mobile" setting works similarly to the "Top padding mobile" setting but controls the space at the bottom of the section for mobile devices. |