Announcement bar

The Announcement Bar section is designed to provide a sitewide alert or announcement and secondary navigation above the main header. It is ideal for displaying important messages or updates to visitors as soon as they land on your site. You can customize the text, add hyperlinks, and select a navigation menu to be displayed within the Announcement Bar.

Padding settings allow you to control the space above and below the content for both desktop and mobile views. Visibility settings enable you to choose when the Announcement Bar is shown, allowing for custom mobile layouts.

Practical uses include highlighting ongoing sales or special promotions, informing visitors about changes in store hours or shipping policies, and providing quick access to important sections of your site. By effectively using the Announcement Bar, you can ensure that important information is prominently displayed, enhancing the browsing experience and driving engagement.

Overview #

The Announcement Bar section serves as a sitewide alert or announcement and provides secondary navigation above the main header. This section is perfect for displaying important messages or updates to visitors as soon as they land on your site.

Key components and functionality #

Text

The text setting allows you to customize the message displayed in the Announcement Bar. This is a simple text field where you can enter any message you want to convey to your visitors. The default message is "Welcome to our store".

Link

This setting enables you to add a hyperlink to the announcement text. You can direct visitors to a specific page or external site by entering the URL in this field.

Menu

The menu setting allows you to select a navigation menu to be displayed within the Announcement Bar. By default, the main-menu is selected, but you can choose any menu that suits your needs.

Padding

Padding settings control the space above and below the Announcement Bar content. You can adjust the padding for both desktop and mobile views:

  1. Top padding (desktop): Adjustable from 0 to 120 pixels, with a default of 8 pixels.
  2. Bottom padding (desktop): Adjustable from 0 to 120 pixels, with a default of 8 pixels.
  3. Top padding (mobile): Adjustable from 0 to 120 pixels, with a default of 8 pixels.
  4. Bottom padding (mobile): Adjustable from 0 to 120 pixels, with a default of 8 pixels.

Visibility

Visibility settings allow you to control when this section is shown. This is helpful for creating custom mobile layouts. You can choose to display the Announcement Bar on all devices, only on desktop, or only on mobile. The default setting is do not hide.

Usage examples #

  1. Promotional Announcements: Use the Announcement Bar to highlight ongoing sales or special promotions. Customize the text to say "50% off on all items this weekend!" and link it to the sale page.

  2. Important Updates: Inform visitors about changes in store hours or shipping policies. For example, "We are now open on Sundays!" with a link to the contact page for more details.

  3. Secondary Navigation: Utilize the menu setting to provide quick access to important sections of your site, such as "Shop," "About Us," and "Contact."

By effectively using the Announcement Bar section, you can ensure that important information is prominently displayed to your visitors, enhancing their browsing experience and driving engagement.