Scrolling text settings

This guide describes the Scrolling Text section.

Use this section to add a dynamic area with moving or scrolling content to a page. You can configure it to display:

Scrolling text only
Scrolling text with icons
Icons only, scrolling in a loop

This section is great for showcasing announcements, features, brand values, or partner logos in an eye-catching way.

In addition to the scrolling content, you can also add a section heading and description at the top of the section to provide context or highlight a message.

Demo store examples: The Scrolling Text section displayed twice on the homepage—one featuring text and images in a single section, and another showcasing logos.

The main feature of this section is the ability to adjust both the scroll speed and scroll direction. Additionally, when you hover over the scrolling text, the speed slows down for easier 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
Block. Available block types include:

Scrolling text. To learn about all available block settings, see the related article "Scrolling text"
Icon. To learn about all available block settings, see the related article "Icon"

General settings

Select a setting described in the following table:

Settings	Description
Heading	This field is for adding a heading to the section. In the top menu of the field, you can find options to customize the heading. Furthermore, you can click the dynamic source button to insert a dynamic source as the title of the section.
Heading size	The heading size setting offers three options to control the size of your section heading: Small Medium Large
Description	This field is for adding a description to the section. In the top menu of the field, you can find options to customize the text. Furthermore, you can click the dynamic source button to insert a dynamic source for the description.
Description size	There are three options to control the size of your description: Small Medium Large
Heading alignment	Align the heading, or heading with description, according to your design preferences: Left Center Right
Color scheme	A color scheme consists of a predefined set of colors you can apply to this section for consistent styling. These schemes are created in the Theme Settings and are available across all sections, making customization faster and ensuring a cohesive color system throughout your store. Learn more about color schemes.

Scroll settings

Settings	Description
Scroll speed	The scroll speed slider allows you to adjust the speed of Scrolling text.
Scroll direction	Specify the direction in which the element should scroll: Left Right
Text size	Adjust the size of the scrolling text using the slider. This helps you select the most suitable size for your design.
Text color	Choose the text color using the color picker or by entering a HEX code.
Background color	Select a background color using the color picker or by entering a HEX code.
Spacing between blocks	You can adjust space between blocks: few scrolling text or scrolling text and icons
Paddings for scrolling text:	Use this setting to fine-tune spacing, especially when: The scrolling text has a different background than the section it's in. The background is the same, and you want to minimize unnecessary gaps.
Top padding	The Top Padding setting allows you to adjust the amount of space at the top of the scrolling text.
Bottom padding	The 'Bottom padding' setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the scrolling text.
Top padding mobile	The 'Top padding (Mobile)' setting allows you to adjust the amount of space at the top of the scrolling text specifically for mobile devices.
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 scrolling text for mobile devices.

Section padding

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.