Displays continuously moving text to highlight announcements, promotions, news, or brand messages.
Homepage
Promotional campaign
Store updates
Brand slogans
Shopify Admin → Online Store → Themes → Customize → Add section → Scrolling Text
Item: Adds scrolling text with an optional icon or custom image.
Setting | Description |
|---|---|
Text | Adds the scrolling message. Wrap text in |
Select icon | Adds a predefined icon. |
Custom SVG | Adds a custom SVG icon. |
Image custom | Uploads a custom image instead of an icon. |
Icon width | Controls icon size on desktop. |
Icon width (Mobile) | Controls icon size on mobile. |
Example:
Welcome to [Ecomus]
The word Ecomus will use the highlighted style.
Setting | Description |
|---|---|
Spacing between items | Adjusts space between messages. |
Speed | Controls scrolling speed. A lower value makes it move faster. |
Direction | Sets scrolling from right to left or left to right. |
Pause when hover | Stops scrolling while the cursor is over the section. |
Setting | Description |
|---|---|
Size | Selects a preset or custom text size. |
Custom font sizes | Sets different sizes for desktop, tablet, and mobile. |
Font weight | Controls text thickness. |
Letter spacing | Adjusts spacing between characters. |
Uppercase text | Displays all text in uppercase. |
Bottom border on link | Underlines linked text. |
Use border bottom | Adds a line below the entire section. |
Setting | Description |
|---|---|
Icon position between item | Displays icons between messages instead of before them. |
Color scheme | Controls the section background and text colors. |
Section padding | Adjusts spacing above and below the section. |
Rate padding (mobile) | Reduces or increases section padding on mobile. |
Keep each message short and easy to read.
Use a moderate speed so customers can read the full text.
Avoid adding too many items.
Use icons consistently across all messages.
Check text size and speed on mobile.
Enable pause on hover for longer messages.
Issue | Solution |
|---|---|
Text moves too quickly | Increase the Speed value. |
Highlighted text is not working | Make sure the text is correctly wrapped in |
Icon is not showing | Select an icon, add valid SVG code, or upload an image. |
Scrolling does not pause | Enable Pause when hover. |
Mobile text is too large | Reduce the mobile font size. |
Items appear too close together | Increase Spacing between items. |