> 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-blocks/running-text.md). # Running Text The Running Text block displays scrolling, animated text that continuously moves across the screen. This is perfect for announcements, promotions, or important messages that need to grab attention. The text automatically repeats and scrolls in a smooth animation, creating an eye-catching effect. You can add up to five different text items that will appear in sequence, separated by customizable characters. This block is ideal for highlighting sales, shipping information, or any time-sensitive content.
{% hint style="info" %} ### How to set it up 1. Go to **Online Store** > **Themes** > **Customize**. 2. Navigate to the section where you want to add the button (like **Image with text**, **Media banner**, or **Popup**). 3. Click **Add block** and select **Running text**. 4. Make your changes, preview live, then click **Save**. {% endhint %} *** ### Settings #### Content * **Text 1**: The first text item that will appear in the scrolling animation. This is required and has a default value. * **Text 2**: An optional second text item to display in the animation. * **Text 3**: An optional third text item to display in the animation. * **Text 4**: An optional fourth text item to display in the animation. * **Text 5**: An optional fifth text item to display in the animation. * **Size**: Choose how large your text appears. Options range from XS (smallest) to 2XL (largest). Larger sizes create more visual impact. #### Layout * **Full width**: When enabled, the running text block spans the full width of the page. When disabled, it respects the section's content width. * **Padding**: Adjust the padding (spacing) around the running text block. Values range from 0 to 100 pixels, in increments of 4 pixels. * **Fix to bottom**: When enabled, fixes the block to the bottom of the page. This only works if the block is the last block in the section and the parent container is not sticky. #### Separator * **Separator type**: Choose the character that appears between repeated text instances. Options include None, Comma, Dot, Pipe, Bullet, Dash, Diamond, Heart, Star, or Four Pointed Star. The default is Bullet. * **Separator spacing**: Adjust the space around the separator character. Values range from 5 to 50 pixels, in increments of 5 pixels. This controls how much space appears before and after each separator. #### Animation * **Animation direction**: Choose which direction the text scrolls. Select "Left to right" for text moving from left to right, or "Right to left" for text moving from right to left. * **Animation speed**: Control how fast the text scrolls. Values range from 5 to 300 seconds. Lower values create faster animation, while higher values create slower, more relaxed scrolling. * **Pause animation on hover**: When enabled, the scrolling animation pauses when visitors hover their mouse over the text. This is enabled by default and helps visitors read the content more easily. #### Style * **Color scheme**: Choose the color scheme for the running text block. This controls the colors of the text and background to match your section's design. * **Text color**: Choose a custom color for the text. Remove the color to inherit the block's selected color scheme. * **Background color transparent**: When enabled, makes the section background transparent, allowing the content behind it to show through. #### Item layout * **Border radius**: Adjust the rounded corners of each text item. Values range from 0 to 50 pixels, in increments of 2 pixels. Set to 0 for sharp corners. * **Border width**: Adjust the border thickness around each text item. Values range from 0 to 10 pixels, in increments of 1 pixel. Set to 0 to remove the border. * **Padding**: Adjust the padding (spacing) inside each text item. Values range from 0 to 50 pixels, in increments of 2 pixels. * **Color scheme**: Choose the color scheme for individual text items. This allows you to style the items differently from the overall block. #### Accessibility * **Include content for screen readers**: When enabled, provides an accessible version of the content for screen readers. This is enabled by default to ensure your content is accessible to all visitors. * **Section label for screen readers**: Enter a label that helps screen readers understand the purpose of this section. For example: "Running announcement". This improves accessibility for visitors using assistive technologies. *** ### Tips * Keep your text items short and impactful for the best scrolling effect. Longer text can be harder to read while scrolling. * Use the separator spacing to create visual breathing room between your text items. * The pause on hover feature is helpful for longer messages, allowing visitors to read the content. Test different animation speeds to find what works best for your content - too fast can be hard to read, while too slow might not grab attention. * Use the item layout settings to create styled boxes around your text items for a more polished look. *** ### Available in {% columns %} {% column %} {% content-ref url="/pages/ngvmw20Bi2qqvrk8HoQv" %} [Image with text](/docs/theme-sections-by-category/media/image-with-text.md) {% endcontent-ref %} {% content-ref url="/pages/wdbz2FLtTxJRNgV4HxUJ" %} [Multirow](/docs/theme-sections-by-category/media/multirow.md) {% endcontent-ref %} {% content-ref url="/pages/hQcTo8BCbYDMVkKHUl5Y" %} [Footer](/docs/group-sections/footer-group/footer.md) {% endcontent-ref %} {% endcolumn %} {% column %} {% content-ref url="/pages/Wmt8TDWWKKgM4L4MnFhX" %} [Media Banner](/docs/theme-sections-by-category/banners/media-banner.md) {% endcontent-ref %} {% content-ref url="/pages/UGNfqaG5AipM18ieNTsI" %} [Rich Text](/docs/theme-sections-by-category/informative/rich-text.md) {% endcontent-ref %} {% endcolumn %} {% endcolumns %}