Announcement scroller

The Announcement scroller shows scrolling messages with icons, buttons, and images. Let customers know about current promotions, new products, or other need-to-know updates with links to more info.

Content area

Section styles

Scroll behaviour


In the section settings, change the duration (speed) and direction of scrolling.

  • Use the Scroll duration slider to increase or decrease the number of seconds it takes for the content to scroll from beginning to end.

  • Choose to scroll content towards the Left or Right.

Click section to find settings

Show on home page only

Scroll duration

5 - 60 seconds

Mobile scroll duration

2 - 40 seconds

Pause on hover

Scroll direction

Left Right

Layout


You can increase or decrease the space between announcements, and choose to display announcement content at full width.

Click section to find settings

Gap

0 - 200 px

Mobile gap

0 - 200 px

Full width

Vertical padding

0 - 27

Blocks


Add up to 6 different types of announcements.

Click the arrow next to the section, then click (+) Add block. Select one of six types of announcements. Click an announcement block to add text.

Icon text and button

Display an icon, text, and button inline.

Text and layout

Text

Text size

1 - 4

Horizontal space between text and button

1 - 5

Button position

Inline Below

Mobile button position

Inline Below

Icon

Icon

Use custom icon

Custom icon

Icon size

S M L XL

Icon frame

None Circle Square

Color scheme

Default Text Soft Color scheme 1 Color scheme 2 Overlay Overlay soft

Button

Link

Label

Size

XS S M L

Style

Solid Outline Text

Color scheme

Default Text Soft Color scheme 1 Color scheme 2 Overlay Overlay soft

Alert text and button

Display a flashing alert icon, text, and button inline.

Text and layout

Text

Text size

1 - 4

Space between text and button

1 - 5

Button

Link

Label

Size

XS S M L

Style

Solid Outline Text

Color scheme

Default Text Soft Color scheme 1 Color scheme 2 Overlay Overlay soft

Alert icon

Alert color

Stacked text

Display two announcements in a stacked column.

Space between announcements

1 - 5

Announcement 1 Text

Announcement 1 Text size

1 - 4

Announcement 2 Text

Announcement 2 Text size

1 - 4

Icon

Icon

Use custom icon

Custom icon

Icon size

S M L XL

Icon frame

None Circle Square

Color scheme

Default Text Soft Color scheme 1 Color scheme 2 Overlay Overlay soft

Icon

Icon

Use custom icon

Custom icon

Icon size

S M L XL

Icon frame

None Circle Square

Color scheme

Default Text Soft Color scheme 1 Color scheme 2 Overlay Overlay soft

Image

Image

Mobile image

Image ratio

Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (4:5) Custom

Mobile image ratio

Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (4:5) Custom

Corner radius

Apply circle crop to image

Image height

16 - 200

Mobile image height

16 - 200

Button

Link

Label

Size

XS S M L

Style

Solid Outline Text

Color scheme

Default Primary Secondary Soft Overlay Overlay soft

Content area

Section