> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/volume-themes/sections/banners/scrolling-promotion-and-scrolling-promotion-banner.md). # Scrolling Promotion & Scrolling Promotion Banner Volume's Scrolling Promotion ticker and Scrolling Promotion Banner turn a shipping threshold, a promo code, or a sale into a moving line shoppers can't scroll past without noticing. A moving line of text is one of the cheapest ways to make an announcement impossible to miss. Use it for a free-shipping threshold, a live promo code, "as seen in" logos in text form, or a limited-time sale — anywhere a static banner would blend into the page. * **Scrolling Promotion** — a slim, edge-to-edge ticker on its own. * **Scrolling Promotion Banner** — the same ticker, layered over a full background image for extra visual weight. *** ### Scrolling Promotion #### How to add In the Theme Editor, click **Add section** → **Scrolling promotion**, then **Add block** → **Text** or **Button** for each item, and **Save**. #### Good to know * **Speed is measured as time to travel, not velocity** — it's "seconds to shift by 100 pixels," so a *lower* number scrolls *faster*. Merchants often set Speed high expecting a fast ticker and get the opposite. * **Text doesn't wrap or truncate** — a long line just takes longer to scroll past. Short, punchy phrases read far better than full sentences. #### Customization ideas * Mix Text and Button blocks in the same ticker — e.g. "Free shipping over $50" as text, then a "Shop now" button block — to combine an announcement with a direct CTA in one strip. * Use **Line: Both** with a generous **Line padding** to turn the ticker into a clearly separated strip rather than text floating in open space. #### Settings | Setting | What it does | | ------------------------------- | ------------------------------------------------- | | Font style | 6 text-size presets | | Line | Disable, Top, Bottom, or Both | | Line padding, Gap between items | Spacing controls, set per device | | Scroll direction | Right to left or Left to right | | Speed | Time to shift 100px — lower = faster | | Use main button | Style buttons using the theme's main button style | #### Blocks | Block | Settings | | ------ | --------------------------------------------------------------- | | Text | Desktop text, separate mobile text, optional link | | Button | Label, icon (with swap position), link, Solid or Outlined style | *** ### Scrolling Promotion Banner #### How to add In the Theme Editor, click **Add section** → **Scrolling promotion banner**, upload a **First image** (optionally a **Second image**), then **Add block** → **Text** or **Button**, and **Save**. #### Good to know * This section inherits the **same background and scroll-animation system as Fullscreen Banner with Product** — Animation mode, On scroll behavior (Parallax/Sticky/Zoom), parallax direction/speed, all with separate mobile values. If you've configured one, the other will feel familiar. * A busy or high-contrast background competes with moving text far more than it does with static text — the eye is already tracking motion, so legibility issues are more noticeable here than on a still banner. #### Customization ideas * Use **Sticky** or **Parallax** on scroll sparingly here — a moving ticker over a moving background can feel busy; a static or gently zooming background usually reads better. * Reserve this section for a single, high-priority message (a sale, a launch) rather than a general trust ticker — the added visual weight of a background image should match the importance of the message. #### Settings Text, line, spacing, direction and speed are the same as Scrolling Promotion above, plus: | Setting | What it does | | ---------------------------------------------------- | ------------------------------------------------ | | First / Second image, Link | Background banner image(s) and click destination | | Overlap | Sits under a transparent header | | Height (desktop/mobile), Vertical content position | Banner sizing and ticker placement | | Overlay (desktop/mobile) | Independent overlay color/opacity | | Content under image / Show only first image (mobile) | Mobile-specific layout fallbacks | ### Best practices * Keep the ticker message short enough to read in one pass at your chosen Speed. * Test Speed on both desktop and mobile — the same value can feel different across screen widths. --- # 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 by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://staylime.com/docs/volume-themes/sections/banners/scrolling-promotion-and-scrolling-promotion-banner.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.