1. What is a scrolling promotion?
The Scrolling section is designed to showcase various calls-to-action and promotions dynamically. This moving display captures the attention of visitors, making it an effective tool for highlighting key offers and driving engagement.
By incorporating this section, you can ensure that important promotions do not go unnoticed. Whether you're promoting a sale, a new product, or a special event, the Scrolling Promotion section adds a lively and interactive element to your store's homepage.
| ⚠️ Note: You can now add the Scrolling promotion section inside the Header group to display dynamic promotions at the top of your store. And, the scrolling promotion remains on top and visible on all pages. |
2. How to set up the scrolling promotion?
a) Configuration Blocks
Headline block
- Enter the headline to the Text field to show on the scrolling bar. You can highlight the text by adding [ ] between the text that needs highlighting. Read this guide to explore more.
- Edit the Text size, Text outline color, and Text fill color.
- Adjust the Left/Right spacing in Desktop/Mobile layout setting.
Text block
- Enter the text to display on the scrolling bar.
- Adjust the size of the text (range from 50% to 200%).
Icon block
- Set up the icon: 3 options
-
- Choose your favorite Icon from the drop-down list. Choose "None" if you don't want any icons.
-
Find your preferred one in the Icon list, copy and paste its exact name to the “Use another icon” field. (Note: Make sure to choose Icon > "Use another icon" to activate this function.)
- Add a Custom icon (SVG code). (For assistance with custom SVG code, please contact our support.)
- Adjust the height of the icon (range from 20px to 150px).
Button block
- Enter the label of the button on the scrolling bar. If left empty, the button will be hidden.
- Enter the link the users will be redirected to when they click the button.
- Choose your preferred Button style: Primary, Secondary, or Text link.
Image block
- Choose an image to display on the scrolling bar. Click the "Select image" button to choose an image from your library or free image resources.
- Adjust the height of the image (range from 20px to 150px).
b) General settings:
- Select the heading tag for this section to enhance the SEO of the page.
- Adjust the spacing of each element on the scrolling bar (range from 10px to 150px).
- Tick the checkbox "Show section borders" to display borders around the scrolling bar.
Scrolling
- Adjust the scrolling speed to run a full round of content (range from 6s to 50s).
- Adjust the scrolling direction (Left to right or Right to left).
- Tick the checkbox “Pause on hover” to pause the scrolling bar when the user hovers over it.
- Select a Background image. Choose an image from your files or explore free images.
- Adjust overlay opacity (range from 10-100%) to control the visibility level of the overlay.
Style
- Choose the Background color of the scrolling bar to display in light/dark mode.
- Choose the text color of the scrolling bar to display in light/dark mode.
-
Choose the Heading highlight color to display in light/dark mode.
Desktop/Mobile layout
- Adjust the block spacing (range from 10 to 150px).
- Choose the desktop/mobile height for Background image.
- Adjust the bottom/top padding of the section (range from 0 to 100 px).
3. How to add a rotating 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:
In Theme Editor, add Scrolling promotion section.
Find the Scrolling setting, activate “Enable rotating effect” toggle.
