# Scrolling content

{% hint style="warning" %}
This section was added in v3.1.0 on March 11, 2024. See our [Changelog](/stiletto/readme/changelog.md) and [theme update guide](/stiletto/general/theme-updates.md) to learn more.
{% endhint %}

Add the **Scrolling content** section to display a moving banner for eye-catching promotions and store updates.

* Add **text**, **images**, and **icons** with links
* Change the **style**, **spacing**, and **colors**
* Control the **speed** and **direction** of scrolling

## Set up section

***

{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](/stiletto/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [insert dynamic content with metafields](/stiletto/general/adapting-your-theme/dynamic-content-with-metafields.md)
{% endhint %}

In the editor side panel, click **(+) Add section** and select **Scrolling content**. Click and hold the drag handles **`⋮⋮`** to re-order sections.

Click the section to edit the general **section styles:** [Padding](/stiletto/sections/theme-sections/using-sections.md#section-padding) | [Top divider](/stiletto/sections/theme-sections/using-sections.md#section-top-divider) | [Animation](/stiletto/sections/theme-sections/using-sections.md#section-animations)

 

## Add scrolling content

***

Add **Text**, **Image**, and **Icon** blocks to show as the scrolling content. You can add multiple blocks of the same type. 

* Under the **Scrolling content** section, click **(+) Add block**.
* Use the drag-and-drop handles **`⋮⋮`** to rearrange the blocks.
* Click a block to edit content and settings.

### Text

***

Use the **Text** block to display a custom message with an optional link. In the section settings, you can select the font, size, and color of all text blocks.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click the **Text** block to open the settings. The default block is labelled "Announce your sale".

   > Click **(+) Add block** to create more **Text** blocks.

   > Click **Remove block** or the eye icon to delete or hide a block.
2. Enter **Text** to show in the scrolling content.
3. (*Optional*.) Select or paste a **Link** to make the text a clickable link.
4. In the sections panel, click **Scrolling content** to open the section settings.
5. Select the **Font** to use for all text blocks: Either the **Heading** or **Body** font from your theme settings.
6. Select the **Size** for all text blocks: Either **Small**, **Medium**, **Large**, **Extra Large**.
7. Scroll down and click the **Text** color swatch to change the color of all text blocks.
8. Click **Save**.

</details>

&#x20;

`Click Text block to find settings`

<table><thead><tr><th width="186">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Text</mark></td><td>Enter text to show in the scrolling content.</td></tr><tr><td><mark style="color:blue;">Text link</mark></td><td>Add a link to redirect visitors when they click the text.</td></tr></tbody></table>

`Click Scrolling content to find settings`

<table><thead><tr><th width="193">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Font</mark></td><td>Choose the font for the text blocks, as selected in your theme settings: <strong>Heading</strong> or <strong>Body</strong>.</td></tr><tr><td><mark style="color:blue;">Text size</mark></td><td>Select the font size for the text blocks: Either <strong>Small</strong>, <strong>Medium</strong>, <strong>Large</strong>, <strong>Extra Large</strong>.</td></tr></tbody></table>

&#x20;

### Images

***

Use the **Image** block to upload a custom image. You can adjust the size of the image and add an optional link.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click **(+) Add block** and select **Image**.

   > You can add multiple **Image blocks**. Click **Remove block** or the eye icon to delete or hide a block.
2. Click the **Image block** to open the settings.
3. Click **Select Image** to select or upload an image.

   > There are no required image dimensions. We recommend a minimum width of **`200px`**.
4. Use the **Image size** sliders to change the image width for desktop and mobile screens.

   > Make sure the image size does not exceed the width of your uploaded image.
5. (*Optional*.) Select or paste a **Link** to make the entire image a clickable link.
6. Click **Save**.

</details>

&#x20;

`Click Image block to find settings`

<table><thead><tr><th width="180">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image</mark></td><td><p>Select or upload an image.</p><p></p><p>We recommend a <code>.png</code> image with a transparent background and minimum dimensions of 50px by 50px.</p></td></tr><tr><td><mark style="color:blue;">Image size</mark></td><td>Adjust the width of the image for desktop screens.</td></tr><tr><td><mark style="color:blue;">Mobile image size</mark></td><td>Adjust the width of the image for mobile screens.</td></tr><tr><td><mark style="color:blue;">Image link</mark></td><td>Add a link to redirect visitors when they click the image.</td></tr></tbody></table>

&#x20;

### Icons

***

Use the **Icon** block to display a free icon or upload your own icon image. You can adjust the size of the icon and add an optional link.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click **(+) Add block** and select **Icon**.

   > You can add multiple **Icon blocks**. Click **Remove block** or the eye icon to delete or hide a block.
2. Click the **Icon block** to open the settings.
3. Select an **Icon name** to display one of 30+ free icons.
4. (*Optional*.) Upload your own icon image.

   > There are no required image dimensions. We recommend a `.png` image with a transparent background and minimum dimensions of 50px by 50px
5. Use the **Icon size** sliders to change the icon width for desktop and mobile screens.

   > Make sure the image size does not exceed the width of your uploaded image.
6. (*Optional*.) Select or paste a **Link** to make the entire icon a clickable link.
7. Click **Save**.

</details>

`Click Icon block to find settings`

<table><thead><tr><th width="220">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Icon</mark></td><td>Select from 30+ icons to show in the scrolling content.</td></tr><tr><td><mark style="color:blue;">Custom icon image</mark></td><td><p>Upload your own icon to show in the scrolling content. <br></p><p>We recommend a <code>.png</code> image with a transparent background and minimum dimensions of 50px by 50px.</p></td></tr><tr><td><mark style="color:blue;">Icon width</mark></td><td>Increase or decrease the width of the icon for desktop screens.</td></tr><tr><td><mark style="color:blue;">Mobile icon width</mark></td><td>Increase or decrease the width of the icon for mobile screens.</td></tr></tbody></table>

&#x20;

## Scrolling behavior

***

In the section settings, change the **speed** and **direction** of scrolling.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click the **Scrolling content** section to open the settings.
2. Use the **Scroll duration** slider to increase or decrease the number of seconds it takes for the content to scroll from beginning to end.
3. Choose to scroll content towards the **Left** or **Right**.
4. Click **Save**.

</details>

&#x20;&#x20;

`Click Scrolling content to find settings`

<table><thead><tr><th width="170">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Scroll duration</mark></td><td>Adjust the number of seconds it takes for the content to scroll from beginning to end.</td></tr><tr><td><mark style="color:blue;">Scroll direction</mark></td><td>Choose the direction of scrolling: <strong>Left</strong> or <strong>Right</strong>.</td></tr></tbody></table>

&#x20;

## Content styles

***

After adding the blocks, you can customize the content styles, which apply to all blocks in the section.

* Adjust the **gap** between the blocks
* Change the **spacing** above and below the content
* Show a **color border** at the top and bottom
* Change the background **color**

{% hint style="info" %}
If you want to remove all space between other sections, set the **Padding** sliders to `0` and set the padding under **Section style** to **None**.
{% endhint %}

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click the **Scrolling content** section to open the settings.
2. Use the **Gap** slider to increase or decrease the space between content blocks: between `0` and `100` pixels.
3. Use the **Padding** sliders to increase or decrease the space at the **Top** and **Bottom** of the content: between `0` and `50` pixels.

   > To remove all space between other sections, set these options to `0` and set the padding under **Section style** to **None**.
4. Choose to show a thin border line for the scrolling content. Select **None**, **Top and bottom**, **Top only**, or **Bottom only**.
5. Select the color of the **Text**, **Background**, and **Border** (if enabled).
6. Click **Save**.

</details>

&#x20;&#x20;

`Click Scrolling content to find settings`

<table><thead><tr><th width="124">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Gap</mark></td><td>Increase or decrease the space between content blocks: between <code>0</code> and <code>100</code> pixels.</td></tr><tr><td><mark style="color:blue;">Padding</mark></td><td>Increase or decrease the space at the <strong>Top</strong> and <strong>Bottom</strong> of the scrolling content: between <code>0</code> and <code>50</code> pixels. To remove all space between other sections, set these options to <code>0</code> and set the padding under <strong>Section style</strong> to <strong>None</strong>.</td></tr><tr><td><mark style="color:blue;">Border</mark></td><td>Show a thin border line above or below the scrolling content. Select <strong>None</strong>, <strong>Top and bottom</strong>, <strong>Top only</strong>, or <strong>Bottom only</strong>.</td></tr><tr><td><mark style="color:blue;">Colors</mark></td><td>Select the color of the <strong>Text</strong>, <strong>Background</strong>, and <strong>Border</strong> (if enabled).</td></tr></tbody></table>

&#x20;

***

> **Related links**
>
> [Gallery carousel](/stiletto/sections/theme-sections/gallery-carousel.md)\
> [Slideshow](/stiletto/sections/theme-sections/slideshow.md)\
> [Theme sections](/stiletto/sections/theme-sections.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/stiletto/sections/theme-sections/scrolling-content.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.