Scrolling text (Announcement promo banner)

The Scrolling Text or Announcement Promo Banner is a powerful tool that allows you to display important announcements or promotional messages on your website. With this feature, you can create a dynamic and attention-grabbing banner that scrolls horizontally across the screen, ensuring that your message captures the visitors' attention.

By utilizing the Scrolling Text, you can effectively communicate time-sensitive information, such as limited-time offers, flash sales, new product launches, or any other announcement that you want to highlight to your audience. The scrolling motion of the text ensures that it stands out and is easily noticeable, even amidst other content on the page.

The flexibility of the Scrolling Text feature allows you to customize the text, font style, size, and color to match your brand's aesthetics and ensure optimal visibility. You can also control the speed at which the text scrolls, adjusting it to achieve the desired effect and readability.

How to access the Scrolling text section

Access this section through the theme customizer:

Navigate to Online Store > Themes
Select “Customize” on your active theme
On any theme template, click “Add section”
Search and select “Scrolling text”

To insert a new section between existing ones, follow the steps in the article "Add a section"

How to configure the Scrolling text section

Basic Components

The “Scrolling text” section consists of two primary components:

General settings – These control the overall settings of the section.

General settings in this article are organized and named according to the headings used in the theme customizer:

Scroll settings
Text settings
Button settings
Popup settings
Section settings

Blocks – Each block has its own individual settings.

Blocks settings in this article are placed after general settings, organized and named according to the block names used in the theme customizer:

Scrolling text
Icon

General settings

Scroll settings

Settings	Description
Scroll speed	The scroll speed slider allows you to adjust the speed of the scrolling text.

Text settings

Heading font	You can choose whether headings use the Heading or Body text style. To change the font family, font size, or font weight of heading or body style, go to Theme Settings > Typography. Note: Changes in the Typography tab will apply across the entire theme.
Font size	Use a slider to adjust the font size of text.
Letter spacing	Adjust the letter spacing to customize the gap between characters in the text.
Text weight	Control the thickness or boldness of the text by selecting the appropriate text weight.

Button settings

Button label	Type a label for the button in the provided field. *When you remove the label, the button will become invisible on the page.
Button link	Add a link to the button if you won’t add the pop-up to section button.
Button color style	This feature allows you to customize the color style of buttons. You have two options to choose from: Primary Secondary This setting can be applied to buttons, links, and underlined links within the section. To choose or change the colors for these button styles, go to the “Colors” tab in the theme settings and locate the “Primary button” and “Secondary button”* blocks. By changing the colors in the theme settings, the new color style will be applied throughout the entire theme.
Button style	Choose from seven button styles: Default: Solid background with text. Default with icon: Same as Default, plus an icon. Add icon in Theme Settings > Buttons > Add icon to inline button option by pasting SVG code. For detailed steps on adding an SVG icon, see the “Buttons” article in Theme Settings, and look for the “Add icon to inline button” option. For example, you can use an arrow icon. Outline: Transparent background with colored outline and text. Outline with icon: Outline style with an icon. Add icon the same way as Default with icon style. Inline: Looks like a text link. You can also add an icon using the same steps as the Default with icon style. Inline with underline: Inline style with a permanent underline. Inline with underline on hover: Inline style with underline appearing on hover.

Popup settings

Subscription pop-up with promo code (Scrolling text section)

Additionally, you have the option to integrate a subscription pop-up with a promo code into the Scrolling Text feature. This allows you to further enhance the effectiveness of your promotional messages and encourage visitors to subscribe to your newsletter or mailing list.

By incorporating a subscription pop-up within the scrolling text, you can offer an exclusive promo code as an incentive for visitors to sign up. This strategy not only captures their attention with the scrolling text but also provides them with an immediate benefit for taking action.

We can add pop-up on button instead of a link in “Scrolling text” settings.

Popup settings	Description
Show popup	Enable this toggle to display a popup on the page.
Enable test mode	Shows a popup example in the theme editor only. If you want to see all your changes in a pop-up inside the theme editor, tick the checkbox.
Heading	Type the text of heading and set up the view of text.
Description	Type the text of description and set up the view of text.
Customer tag	This is a tag that allows you to understand exactly which pop-up the user registered for, whether it is, for example, a pop-up on which he received a discount code or other information. To see this tag, go to the Shopify admin panel / Customers and open some user’s information, on the right side in Tags section you will see this tag.
Popup background color	Click the box with a color picker and color name to change the pop-up background color.
Thank you message background image	Choose a background image for the third pop-up, which appears after a user submits a pop-up with his data.
Button color style	This feature allows you to customize the color style of buttons. You have two options to choose from: Primary Secondary This setting can be applied to buttons, links, and underlined links within the section. To choose or change the colors for these button styles, go to the “Colors” tab in the theme settings and locate the* “Primary button” and “Secondary button” blocks. By changing the colors in the theme settings, the new color style will be applied throughout the entire theme.
Button style	You can choose from seven different button styles: Default button: This is the standard button style with a solid background color and text. Default button with icon Outline button: This style features a transparent background with a colored outline and text. Outline button with icon Inline button: The inline button style blends seamlessly with the surrounding text, appearing as a link with the same color. Inline button with underline: Similar to the inline button style, this option adds an underline to the text, making it more noticeable. Inline button with underline on hover — this option adds an underline to the text on hover.

Section settings

Setting	Description
Section top space	The “Section top space” setting allows you to adjust the amount of space at the top of the section using a slider.
Section bottom space	The “Section bottom space” setting functions similarly to the “Section top space” setting, but controls the space at the bottom of the section.
Background color	To change the background color of a section, click the box containing the color circle and name to open the color picker. Then, select your desired color. The chosen color will be applied as the section’s background, helping to enhance the visual appeal and match your store’s branding.
Background gradient	Use the gradient picker to create a custom gradient for your section background.

Scrolling text block

Setting	Description
Text	To add text to the section, simply enter it in the provided field. In the top menu of the field, you can find options to customize the text such as making it bold, italic, or adding a hyperlink. Additionally, you can also create bullet or numbered lists for your text.
Text color	Customize color with a color palette tool.

Icon block

Setting	Description
Icon	Choose icon from the library, free images, or upload a new image to the library.