Scrolling promotion #1 - #2 - #3 - #4

by Admin on Aug 18, 2025

The Scrolling promotion section creates a dynamic, eye-catching banner that moves across your store to showcase promotions, announcements, and calls-to-action.

1. Section Components

Section	Scrolling Promotion	Create a moving banner that displays various promotional elements with customizable styling and animation effects.
Available block	Text	Show simple text content with adjustable sizing
	Icon	Add visual icons from built-in library or custom SVG
	Image	Show images with custom dimensions and styling
	Button	Create clickable buttons with different styling options

2. Location & Setup

To add & set up the Scrolling banner section:

Open the Shopify Theme Editor (Online Store > Themes > Customize)
Decide where you want to place the new section in Template.
Click "Add Section".
Select "OT: Scrolling banner (#number of variant)".

3. Highlight Features

Smooth Animation: Adjustable scrolling speed and direction control
Rich Content Blocks: Mix text, icons, buttons, and images
Hover Controls: Pause animation when users hover over the banner
Dual Mode Styling: Separate colors for light and dark themes

4. Common Use Cases

🤔 How to set up the Scrolling promotion?

If you don't know where to start to set up this section, just follow this:

STEP 1:

Add the Scrolling promotion section to your theme.

STEP 2: Add/delete, rearrange the blocks inside the section.

Add more, delete the unused, or reorder Text, Icon, Button, and Image blocks to make the section fully yours.

STEP 3: Change the content of each block:

Click on the block to open its settings panel. Depending on the block you use, the setting might be slightly different.

Text block:

Enter Text to display on the scrolling banner.
Style the text by toggling Use custom font and choose Custom font.
Adjust Text size, Text color, or add Text link.

Icon block:

Choose from available icons or use custom icon with SVG code.
Adjust Icon height and Icon color.

Image block:

Upload Image to the section and adjust its ratio, height and edges.

Button block:

Set up the button on the scrolling label by entering Button label and Button link.
Choose Colors for button elements.

STEP 4: Adjust the scrolling effect:

Click on the Scrolling promotion section, then find the Scrolling setting group. You can change the Speed, Direction, and Pause on hover.

STEP 5: Click "Save" when done.