> For the complete documentation index, see [llms.txt](https://aries-theme.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aries-theme.gitbook.io/docs/theme-sections-by-category/promotionnal/running-content.md).

# Running Content

The Running Content section (called **Running content** in the theme editor) shows a single line of text (or a mix of text and small images) that scrolls horizontally across the page in a continuous loop. You can use it for announcements, promotions, or short messages (e.g. “Free shipping”, “New collection”, “Limited offer”). Each item can be text only, or an image with text above or below it, and each item can have an optional link. A separator character can appear between items. The section works well in the header area or just below it, and respects reduced motion for accessibility.

<figure><img src="https://2498163780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2LxG3rPCoA6sZo7ovFkR%2Fuploads%2F8yS2c0GR7k8axHj9VmOw%2FCapture%20d'%C3%A9cran%202026-02-20%20205547.png?alt=media&amp;token=e3b2f836-ee5b-4644-ac54-be0376e5f7c2" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

### How to set it up

1. Go to **Online Store** > **Themes** > **Customize**.
2. Open **Sections** > **Running Content**.
3. Make your changes, preview live, then click **Save**.
   {% endhint %}

### Settings

#### Animation

* **Animation direction**: Scroll direction: **Left to right** or **Right to left**.
* **Animation speed**: How fast the content scrolls (in seconds). Lower values mean faster animation.
* **Pause animation on hover**: When enabled, the animation pauses when the visitor hovers over the strip.

#### Style

* **Text size**: Size of the text (from XS up to 2XL). Applies to all items.
* **Color scheme**: Section background and text colors.

#### Separator

* **Separator type**: Character shown between items: **None**, **Comma**, **Dot**, **Pipe**, **Bullet**, **Dash**, **Diamond**, **Heart**, **Star**, or **Four Pointed Star**.
* **Separator spacing**: Space around the separator on desktop (0–50 px).
* **Separator spacing (mobile)**: Space around the separator on mobile (0–50 px).

#### Image settings

These apply to all blocks that use an image.

* **Image aspect ratio**: **Auto**, **Landscape**, **Square**, or **Portrait**.
* **Image width**: Width of block images (20–500 px, in steps of 20).
* **Enable global media settings**: When enabled, theme media settings (e.g. border, radius, hover) apply to block images.
* **Text position**: For blocks with an image: **Below image** or **Over image**.
* **Over image text position**: When text is over the image, where it sits (e.g. Top Left, Center, Bottom Right).
* **Below image text alignment**: When text is below the image: **Start** (left), **Center**, or **End** (right).

#### Layout

* **Full width**: When enabled, the section spans the full width of the screen.

#### Border

* **Border width**: Border around the section (0–10 px).

#### Padding

* **Top**: Space above the section (0–400 px).
* **Bottom**: Space below the section (0–400 px).

#### Item layout

* **Border radius**: Corner radius for each item (0–50 px).
* **Border width**: Border around each item (0–10 px).
* **Padding**: Inner padding for items (0–50 px). The section uses the same “Padding” label in the theme editor.

#### Accessibility

* **Include content for screen readers**: When enabled, an accessible, non-scrolling version of the content is available for screen readers.
* **Section label for screen readers**: Optional short label describing the section (e.g. “Running announcement”) for assistive technologies.

***

### Blocks

#### Running Item

Each block is one repeating unit in the strip (up to 7 blocks).

* **Image**: Optional image for this item. If set, text can appear below or over the image (see section **Text position**).
* **Text**: The text shown for this item (e.g. “Free shipping”).
* **Link**: Optional URL; makes the whole item clickable.
* **Open link in new tab**: When enabled, the link opens in a new tab (only if **Link** is set).
* **Color scheme**: Optional color scheme for this item (overrides section colors for that block).

***

### Tips

* Use short phrases so the strip stays readable while scrolling. Add several blocks to create a long, seamless loop.
* **Pause animation on hover** helps visitors read or click an item. The animation also stops for users who prefer reduced motion.
* With **Text position** set to **Over image**, use **Over image text position** to place the label (e.g. top-left or center) so it stays readable on the image.
* For a cleaner look with only text, set **Separator type** to **None** or a simple character (e.g. Bullet or Pipe) and leave block images empty.
