> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Shine Running Content

**Theme:** Shine · **Section type:** All-template section

A Running content section scrolls a line of text, images, and icons across the page in a continuous loop. Use it for short promotions, shipping offers, or brand values that should catch the eye.

> **Note:** You can add this section to any template, and to the header and footer. Each section holds up to 10 blocks, with up to 5 Text blocks. The section comes with 3 Text blocks, 1 Image block, and 1 Icon block.
![Running content with gradient promotion text](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/running-1_2gp11f.jpg =666xauto)

**What you can do**
- Add the section and your text
- Add images and icons
- Change the speed and direction
- See what customers see
- Change the text size and colors
- Fix common problems

---

## Add the section and your text
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Running content**.
3. Click a **Text** block and enter the **Text**. You can add a link to the text with the link button in the text editor.
4. Optional: select a **Text color**, or a **Text gradient** for a color blend.
5. To add more text, click **Add block** > **Text**.
6. Click **Save**.

> **Tip:** Keep each Text block short, like "Free shipping over $100". Customers read running text while it moves.

## Add images and icons
1. Click **Add block** > **Image**, then select an **Image** and drag **Image width**, from 20 to 100 px.
2. Click **Add block** > **Icon**. Under **Show Icon**, choose **Theme library** and pick an icon from the **Theme library** list.
3. To use your own icon, choose **Custom SVG** and paste the SVG code in **Custom SVG**.
4. Optional: select a **Custom icon color**.
5. Drag the blocks in the left sidebar to set their order.
6. Click **Save**.

> **Tip:** Place an image or icon between Text blocks to separate the messages.

## Change the speed and direction
1. Click the **Running content** section.
2. Choose a **Speed**: **Very slow**, **Slow**, **Normal**, or **Fast**.
3. Choose a **Moving direction**: **Right to left** or **Left to right**.
4. Select **Enable pause when hover** to stop the movement when customers point at it.
5. Choose a **Text size**. Image and icon blocks follow the text size.
6. Click **Save**.

## What customers see
- **Movement:** the blocks scroll in one line, in the order you set, and repeat without a gap.
- **Hover:** with **Enable pause when hover**, the line stops while customers point at it, so they can read it or click a link.
- **Mobile:** the line keeps the same speed and direction. Large text sizes show fewer words on screen at a time.
![Running content on mobile](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/running-2_1k1vhs0.jpg)

## Settings reference
### General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the colors of the section. You edit color schemes in Theme settings > Colors. |
| Speed | Sets how fast the line moves: Very slow, Slow, Normal, or Fast. |
| Moving direction | Moves the line Right to left or Left to right. |
| Enable pause when hover | Stops the movement while customers point at the line. |
| Text size | Sets the size of the text: Headline or H1 to H6. Image and icon blocks follow this size. |

### Text block settings
| Setting | What it does |
| ---- | ---- |
| Text | Sets the text. You can make it bold or italic, or add a link. |
| Text color | Sets the text color. |
| Text gradient | Fills the text with a gradient. It replaces the Text color. |

### Image block settings
| Setting | What it does |
| ---- | ---- |
| Image | Sets the image. |
| Image width | Sets the width of the image, from 20 to 100 px. |

### Icon block settings
| Setting | What it does |
| ---- | ---- |
| Show Icon | Chooses the icon source: Theme library or Custom SVG. |
| Theme library | Picks an icon from the theme's icon list. Used with Theme library. |
| Custom SVG | Sets your own SVG code. The icon is shown at the size set by Text size. Used with Custom SVG. |
| Custom icon color | Sets the color of the icon. |

## Troubleshooting
**I can't add another Text block.**
A section holds up to 5 Text blocks and up to 10 blocks in all. To show more messages, add a second Running content section.

**My text color doesn't change.**
**Text gradient** replaces **Text color**. Clear the gradient to use a single color.

**Customers can't click the link in the text.**
The text keeps moving. Select **Enable pause when hover** so the line stops when customers point at it.

**My image looks too small or too big.**
Change **Image width** in the Image block. The image height also follows the section's **Text size**.

## Related articles
- [Shine Compacted Banner](https://doc.ecomx.co/en/article/shine-compacted-banner-1jn034g/)
- [Shine Image Banner](https://doc.ecomx.co/en/article/shine-image-banner-12txcz9/)
- [Shine Announcement Bar](https://doc.ecomx.co/en/article/shine-announcement-bar-1gybrib/)
- [Shine Typography](https://doc.ecomx.co/en/article/shine-typography-6k6p3o/)

**In other themes:** [Blum Running Text](https://doc.ecomx.co/en/article/blum-running-text-1y2r3d6/) · [Electro Running Text](https://doc.ecomx.co/en/article/electro-how-to-use-electro-running-text-section-3457zu/) · [Normcore Running Content](https://doc.ecomx.co/en/article/normcore-running-content-ai2nbf/)