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

# Scrolling Text

The Scrolling Text Section displays an animated horizontal text banner that highlights store messages — such as promotions, offers, or announcements — creating movement and catching customer attention

To customize the Scrolling Text in our theme please follow the steps:

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Add section**
2. Locate **Scrolling Text**
3. **Save**
   {% endhint %}

## Section Settings

### **General**

* **Layout** – Choose how the section stretches across the page (e.g., *Full width* for maximum visibility).
* **Color scheme** – Apply a background and text color scheme that matches your theme.
* **Font size** – Adjust text size for desktop view.
* **Font size mobile** – Set a smaller font size for mobile optimization.
* **Font weight** – Control the thickness of the text (e.g., *500* for medium bold).
* **Spacing** – Define the distance between repeating text items.
* **Spacing icon** – Choose an icon type between texts:
  * **Line** – Adds a “|” separator.
  * **Percent** – Adds a “%” symbol.
  * **Hidden** – No icon between text items.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FZGsNqf8YIpa5CR0pBaNl%2Fimage.png?alt=media&amp;token=3684b895-e821-4a68-bbd7-a3cf24134a5f" alt=""><figcaption></figcaption></figure>

***

### **Section Padding**

Customize spacing for each device type to ensure consistent layout balance.

**Desktop**

* **Padding top** – Space above the section (default: 30px).
* **Padding bottom** – Space below the section (default: 30px).

**Tablet**

* **Padding top** – Adjust spacing for tablet view (default: 30px).
* **Padding bottom** – Adjust spacing for tablet view (default: 30px).

**Mobile**

* **Padding top** – Space above section (default: 15px).
* **Padding bottom** – Space below section (default: 15px).
* **Remove default space between sections** – Toggle ON to remove automatic spacing.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2F3LAtCBo9UV4yYBiLNJ4n%2Fimage.png?alt=media&amp;token=2ebe546c-08c5-43b1-bcc5-9156fb831f2f" alt=""><figcaption></figcaption></figure>

***

## **Block Settings**

### **Block Content**

Each block represents one scrolling text item.

* **Text** – Enter the message to display (e.g., *FREE RETURNS WITHIN 10 DAYS*).

You can add multiple blocks to cycle different messages in the same scrolling banner.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2F3fBmZZoam2UqsfXpvCVL%2Fimage.png?alt=media&amp;token=83a5da02-b612-40e8-ac66-bd7e894a7bc0" alt=""><figcaption></figcaption></figure>

***

💡 **Tip:**\
Use short, high-impact messages like “Free Shipping”, “Sale up to 50%”, or “New Collection Out Now” to attract quick attention and improve conversion.