> For the complete documentation index, see [llms.txt](https://docs.samita.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.samita.io/extra-features/create-infinite-scroll-banner.md).

# Create an infinite-scroll banner

Build an infinite scroll banner that loops its content seamlessly for ticker-style announcements and promotions.

An infinite scroll banner is a bar whose content loops continuously from right to left, like a news ticker. Use it for repeating promotions, free-shipping notices, or short announcements you want customers to notice.

{% hint style="info" %}
An infinite scroll banner has a **single content section** — there is no **Add Group** option. If you need several messages that rotate one after another, use a [basic banner](/extra-features/create-basic-banner.md) instead.
{% endhint %}

{% stepper %}
{% step %}

## Open the Banners page

In your Shopify admin, open the **Sami Product Labels** app, click **Extra Features** in the app sidebar, then switch to the **Banners** tab.

<figure><img src="https://1598842017-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1WRTlT5AcaLSAedbCJyZ%2Fuploads%2Fgit-blob-eac3346ef6817a452d1732ac53ec2f474f661bba%2Fimage_220.png?alt=media" alt="The Banners section in the app sidebar"><figcaption><p>Open Banners from the Sami Product Labels sidebar.</p></figcaption></figure>
{% endstep %}

{% step %}

## Click Create banners, then choose Infinite Scroll

Click **Create banners**. In the **Select Type** dialog, click **Select** next to **Infinite Scroll** — the type that loops banner content infinitely for a seamless scrolling effect.

<figure><img src="https://1598842017-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1WRTlT5AcaLSAedbCJyZ%2Fuploads%2Fgit-blob-849d0943ca6f11156fe0578df93329a04e09a9cb%2Fimage_222.png?alt=media" alt="The Select Type dialog with Infinite Scroll selected"><figcaption><p>Choose Infinite Scroll to build a ticker-style bar.</p></figcaption></figure>
{% endstep %}

{% step %}

## Name the banner

The full-screen editor opens on the **Design** tab. Replace **New Banner** in the name field above the preview with a name of up to 50 characters. This name is internal and is never shown to customers.

Next to the name you also get a language selector, desktop and mobile preview toggles, and the **Active** / **Draft** status switch.

<figure><img src="https://1598842017-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1WRTlT5AcaLSAedbCJyZ%2Fuploads%2Fgit-blob-53f23bbccc9d8a033e72867067f8e6737587a1e3%2Fimage_167.png?alt=media" alt="The banner editor toolbar with the name field, language selector, preview toggles, and Active/Draft switch"><figcaption><p>The toolbar above the preview holds the banner name, language, preview device, and status.</p></figcaption></figure>
{% endstep %}

{% step %}

## Edit the scrolling content

**Section 1** starts with a single **Description** element containing sample text such as `✨ Free ship on order $40+ ✨`. Click it to open its settings on the right:

* **Content** — a rich-text editor with bold, italic, underline, emoji, alignment, and an HTML view (`</>`). The language chip shows which language you are editing.
* **Text** — font **Size** and **Color**.
* **Padding** and **Margin** — spacing around the element, in pixels.

Click **Add element** to add more items to the loop — **Message**, **Heading**, **Line break**, **Button**, **Countdown**, or **Image** — and drag the handle on the left of a row to reorder them.

<figure><img src="https://1598842017-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1WRTlT5AcaLSAedbCJyZ%2Fuploads%2Fgit-blob-710ed57bd5cd81df89105a4a21c22dafccc8addd%2Fimage_168.png?alt=media" alt="The Content panel with the Description element next to the scrolling preview"><figcaption><p>Edit the element that loops across the bar, or add more to the sequence.</p></figcaption></figure>
{% endstep %}

{% step %}

## Style the bar

In the **Style** panel:

* **Background Type** — choose **Single Color**, **Gradient Color**, or **Pattern Image**. Infinite scroll banners default to **Pattern Image**; use **Change Image** to swap the tile or **Remove** to clear it.
* **Font Style** — set the typeface, weight, and default text color.
* **Padding** — control the spacing inside the bar.

{% hint style="info" %}
Pattern images should be PNG, JPG, or SVG, at most 5 MB, and 512 × 512 px.
{% endhint %}
{% endstep %}

{% step %}

## Add a close button or make the bar clickable

Both options live in the **Button** panel and are off by default:

* Tick **Include Close Button** to place an "x" on the bar so customers can dismiss it. Two fields appear: **Color** and **Hover Color**.
* Tick **Bar Clickable** to make the whole bar a link. A **Link URL** field appears — enter the destination, and use the toggle beside it to open the link in a new tab.

<figure><img src="https://1598842017-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1WRTlT5AcaLSAedbCJyZ%2Fuploads%2Fgit-blob-7aeba9932ccd4c27295977dfe97c84766e00a02c%2Fimage_169.png?alt=media" alt="The Button panel with Include Close Button and Bar Clickable enabled"><figcaption><p>Enabling each checkbox reveals its settings — close button colors, or the link URL.</p></figcaption></figure>
{% endstep %}

{% step %}

## Set the scroll speed and timing

All four fields in the **Animation** panel are in seconds:

| Field                            | What it controls                                                      |
| -------------------------------- | --------------------------------------------------------------------- |
| **Scroll speed**                 | How long one full loop takes. A **higher** number scrolls **slower**. |
| **Disappear After**              | How long the bar stays on screen before hiding.                       |
| **Interval Between Bar Display** | The gap before the bar reappears.                                     |
| **Time For The Bar To Fade In**  | The length of the fade-in animation.                                  |

{% hint style="info" %}
Leave a field at `0` to disable that behaviour — for example, `Disappear After = 0` keeps the bar visible until the customer closes it.
{% endhint %}

<figure><img src="https://1598842017-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1WRTlT5AcaLSAedbCJyZ%2Fuploads%2Fgit-blob-bd339dccb506ec9d6121e175f3e8404331dbc556%2Fimage_170.png?alt=media" alt="The Animation panel with the Scroll speed and timing fields"><figcaption><p>Scroll speed sets the duration of one loop — increase it to slow the ticker down.</p></figcaption></figure>
{% endstep %}

{% step %}

## (Optional) Add custom CSS

Open **Advance Section** to write your own CSS in the **Custom CSS (Developer Zone)** box. The **CSS reference** list below it shows the available selectors — including `.samita_banner_groups.infinityScroll`, the wrapper used when infinite scrolling is enabled. Click a selector to insert it.
{% endstep %}

{% step %}

## Choose where the banner appears

Switch to the **Placement** tab and pick a display position:

| Position           | Behaviour                                              |
| ------------------ | ------------------------------------------------------ |
| **Top**            | Pushes page content down.                              |
| **Top Sticky**     | Pushes content down and stays visible while scrolling. |
| **Top Overlay**    | Overlaps the top of the page content.                  |
| **Overlay Sticky** | Overlaps content and stays visible while scrolling.    |
| **Bottom Sticky**  | Fixed at the bottom of the page.                       |
| **Custom**         | Place the bar anywhere using a shortcode.              |

Below the position picker, narrow the audience with **Product conditions**, **Customer conditions**, **Page conditions**, **Language conditions**, **Country conditions**, **Other conditions**, and **Visibility date**. The **Shortcode** panel gives you the snippet to paste into your theme when you choose **Custom**.

See [Configure display conditions](/extra-features/configure-display-conditions.md) for the full breakdown of each condition type.

<figure><img src="https://1598842017-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1WRTlT5AcaLSAedbCJyZ%2Fuploads%2Fgit-blob-b850e0dacb1dcec6633eaa1eb462d29c53cfed5b%2Fimage_171.png?alt=media" alt="The Placement tab showing the six display positions and the condition panels"><figcaption><p>Pick a display position, then add conditions to control who sees the banner.</p></figcaption></figure>
{% endstep %}

{% step %}

## Save and activate

Set the status switch above the preview to **Active**, then click **Save** in the top-right corner. Leave it on **Draft** to keep working without publishing.

{% hint style="warning" %}
Banners only render on your storefront if the app embed is enabled in your theme. See [Enable the app in your theme](/getting-started/enable-app-in-theme.md).
{% endhint %}
{% endstep %}
{% endstepper %}

## Next steps

* [Configure display conditions](/extra-features/configure-display-conditions.md) — control where and to whom your banner appears.
* [Create a basic banner](/extra-features/create-basic-banner.md) — build a static or rotating announcement bar instead.

{% hint style="success" %}
**Need support?**

If you run into any difficulty while following these steps, contact us at <support@samita.io>.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.samita.io/extra-features/create-infinite-scroll-banner.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.