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:

Announcement. To learn about all available settings, see the related article "Announcement"

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.

Announcements settings

Setting	Description
Loop	Enable this option to make the announcement bar scroll continuously in a circular loop without stopping. This ensures that all announcements remain visible and cycle automatically across the screen.
Center slide	Enable this option to display one announcement centered, with others on the left and right sides.
Auto-rotate announcements	Enabled: Slides in the carousel change automatically. Disabled: You need to use your cursor to move through the slides.
Change every	Select how often announcements rotate, in seconds.
Number of slides	Set how many announcements are visible at the same time within a single slide view. Note: Automatically optimized for mobile.*

*Note: To ensure the animation works correctly, you need to add at least four announcements (blocks).

Section paddings

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.