1. What is Scrolling Promotion?
The Scrolling Promotion section creates a dynamic, eye-catching banner that moves across your store to showcase promotions, announcements, and calls-to-action. This animated display ensures your most important messages don't get lost in the shuffle, whether you're announcing a flash sale, launching a new product, or highlighting a special event.
💡 Note: You can add this section inside the Header group to display promotions at the top of your store, making them visible on every page your customers visit.
2. Section Components
| Section | Scrolling Promotion | Creates a moving banner that displays various promotional elements with customizable styling and animation effects. |
|---|---|---|
| Available blocks | Headline | Used to show formatted text with highlighting options for key messages |
| Text | Used to show simple text content with adjustable sizing | |
| Icon | Used to add visual icons from built-in library or custom SVG | |
| Image | Used to show images with custom dimensions and styling | |
| Button | Used to create clickable buttons with different styling options |
3. Location & Setup
To add & set up the Scrolling promotion section:
- Open the Shopify Theme Editor (Online store > Themes > Customize)
- Decide where you want to place the new section. (or add it to the Header group for site-wide visibility)
- Click “Add Section”.
- Select “Scrolling promotion”.
4. Highlight Features
- Smooth Animation: Adjustable scrolling speed and direction control
- Rich Content Blocks: Mix headlines, text, icons, buttons, and images
- Text Highlighting: Use brackets [ ] to highlight specific words in headlines
- Rotating Effect: Optional tilt animation when scrolling up/down
- Hover Controls: Pause animation when users hover over the banner
- Dual Mode Styling: Separate colors for light and dark themes
5. 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.
By default, you will have the Text, Icon, Text, Button, and Icon blocks. Add more, delete the unused, or reorder 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.
STEP 4: Adjust the scrolling effect:
Click on the Scrolling promotion section, then find the Scrolling setting group. You can change the Time per scroll, Direction, Pause on hover, and more.
STEP 5 Click "Save" and preview.
🤔 How to add the rotating tilt effect to the scrolling promotion?
🔎 A scrolling promotion with a rotating effect is a great way to make your site more catchy and appealing. With this effect, the scrolling banner will tilt to the right or left when scrolling up or down.
To enable this effect:
STEP 1: In Theme Editor, add a Scrolling promotion section.
STEP 2: In the section setting panel, find the Scrolling setting group.
STEP 3: Toggle “Enable rotating effect” ON to activate the tilt animation.
STEP 4: Click "Save" and preview.
🤔 How to use a background image instead of a plain color?
Rather than a simple color, you can use an image to make it the background for your scrolling promotion, like this:
STEP 1: In the Scrolling promotion settin panel, find the Scrolling setting group.
STEP 2: In the "Background image" setting, click "Select image" and choose from your library or free resources
STEP 3: Adjust Overlay opacity (10-100%) to control background visibility
STEP 4: Scroll down to Desktop/ Mobile layout setting group, and set the appropriate Desktop/Mobile height for the background image.
STEP 5: Click "Save" and test readability of your text over the background image
6. Support Information
Need help? Contact our support team at Omni Themes Support.
