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.
2. How to set up the scrolling promotion?
a) Configuration Blocks
Text block
- Enter the text to display on the scrolling bar.
- Adjust the size of the text (range from 50% to 200%).
Icon block
- Choose from the list an icon to display on the scrolling bar. Note: We provide 21 premade icons to help you easily customize. However, you can also customize icons by using SVG code or add custom images as icons.
- 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.
- Tick the checkbox “Show as primary button” to set the button's styles to be the same as the style of the primary buttons. Otherwise, it will follow the outline button's style.
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.
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.
- Adjust the padding on bottom/top of the section (range from 0 to 100 px).
