# Scrolling content

{% hint style="warning" %}
This section was added in v3.1.0 on March 11, 2024. See our [Changelog](https://help.fluorescent.co/stiletto/readme/changelog) and [theme update guide](https://help.fluorescent.co/stiletto/general/theme-updates) 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](https://help.fluorescent.co/stiletto/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/stiletto/general/adapting-your-theme/dynamic-content-with-metafields)
{% 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](https://help.fluorescent.co/stiletto/sections/using-sections#section-padding) | [Top divider](https://help.fluorescent.co/stiletto/sections/using-sections#section-top-divider) | [Animation](https://help.fluorescent.co/stiletto/sections/using-sections#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](https://help.fluorescent.co/stiletto/sections/theme-sections/gallery-carousel)\
> [Slideshow](https://help.fluorescent.co/stiletto/sections/theme-sections/slideshow)\
> [Theme sections](https://help.fluorescent.co/stiletto/sections/theme-sections)