Features

Advanced Message Types

Written guide 3 min read Intermediate

The Quick Announcement Bar app can display messages with customized effects, such as stackable, rotating, sliding/fading, and marquee messages, to make your announcements more noticeable.

The app can only insert one bar per page. If you’re looking to display 2 or more messages together, you can use Stackable Messages to simulate multiple bars inside one QAB bar.

Like so:

Three stacked announcement bars in red, blue, and yellow, each displaying its own message
  1. Start by creating a new bar. You’ll be shown tiles to choose a message type. Choose Stacked messages:
Message type selection tiles with Stacked messages highlighted

Alternatively, you may click on Change Type, and a pop-up will appear:

Content and style configuration panel with the Change type link highlightedMessage type selection pop-up with Stacked messages selected
  1. There will be message fields that you can configure to your liking. You can also click on Add a message to add more stacks.
Message content fields for a stacked bar with an Add a message button
  1. Click on Save.

And that’s all there is to it. Repeat for other bars if needed.

  1. First, create a bar and customize it to your liking. If you have not set up a bar, you can read this guide, which will walk you through creating a bar within a few minutes.
  2. Once you’re done creating a bar, click on Edit.
Quick Announcement Bar dashboard with the Edit button for an existing bar
  1. To have a bar rotate to the next one, set the Hide bar after X seconds option to a number greater than zero — for example, 3 to rotate every 3 seconds.
Hide bar after X seconds setting set to 3
  1. Click on Save.
  2. Create another bar to add to the rotation. To keep a consistent look with the first bar, you can simply duplicate the first one and do some minor changes.
Animated demo of duplicating a bar from the Quick Announcement Bar dashboard
  1. If you’re creating a new bar from scratch, set the same Hide bar after X seconds option on this bar too:
Hide bar after X seconds setting for the second rotating bar
  1. Click on Save. The two bars will now rotate between each other.

By default, the order in which the bars rotate is determined by which one was created first. To modify the order, click on Sort Rotation Order then click on the Up/Down icons depending on how you want to order the bars. Be sure to Save after setting the new order.

Animated demo of two active bars rotating in the Quick Announcement Bar dashboard

Follow these steps to create a bar that has messages slide in, pause, then slide out.

Animated demo of a message sliding into the top of a storefront page
  1. To begin, click on Change type found above the message field. A pop-up will then appear. Click on Sliding Messages:
Content and style configuration panel with the Change type link highlightedMessage type selection pop-up with Sliding/Fading messages selected
  1. In the following prompt, you will be able to enter the messages you wish to display (up to 5) as well as configure the time per message, sliding direction, etc.
Sliding message configuration with time per message and sliding direction settings
  1. Click Save.

You can create a “Marquee” style scrolling message that displays a repeating message on a loop:

Animated demo of a marquee message scrolling across the top of a storefront page
  1. To begin, click on Change type found above the message field. A pop-up will then appear. Click on Marquee Messages:
Content and style configuration panel with the Change type link highlightedMessage type selection pop-up with Marquee messages selected
  1. In the following prompt, you will be able to enter the scrolling message you wish to display. In the same area you can also modify the scrolling speed and the scrolling direction.
Marquee message configuration with scrolling direction, speed, and font settings
  1. Click Save. You should see the message scrolling through the bar now.

If you need any assistance or have questions about this feature, feel free to reach us at help@hextom.com.