Scrolling promotion
Learn how to create an auto-scrolling promotion section with Sleek
A scrolling promotion section lets you display an eye-catching auto-scroll row of logos or images.
You will find it helpful in showcasing your promotions, brand lists, featured products, or any trust-boosting information.
In this article, we will show you how to add a Scrolling promotion section.
How to add a Scrolling promotion section to your Shopify store
Steps:
In the theme editor (Customize),> click Add section.
Select Scrolling promotion.
Make necessary changes.
Save the settings.
How to edit a Scrolling promotion section
Section settings
Settings
This is where you can update scroll direction, pause scroll on hover, and adjust scroll speed, item gap on desktop, and item gap on mobile.
Vertical alignment: Set how the text is aligned - Top/Middle/Bottom
Direct: The scroll direction of the section - from left to right or vice versa.
Pause scroll on hover: When hovering over the section, the scrolling stops.
Show divider between items: Add borders between the section's blocks.
Speed: The speed of the section when scrolling (0.1x to 3x).
Horizontal spacing: The spacing between items in a section.
Vertical spacing: The padding between the items and the section's container.
Block settings
There are three block types can be added to this section:
Image
Text
HTML
Collection
Image
Add an Image to promote your vendor, brand, featured products, etc.
Adjust the Image height on the desktop between 20px and 400px.
Select the Image rounded checkbox if you want the image to have rounded borders.
Then, provide the image with a specific Link to the desired page where you want to direct customers when they click it.
Additionally, you can change the Image height on the mobile device from 20px to 200px.
Text
You can use a Text block to display introductory text or any content you'd like to present.
Provide the text with a specific Link to the desired page where you want to direct customers when they click it.
This Text block allows you to adjust the Text size, Font weight, Font style, Letter spacing, Opacity, and Text style.
Moreover, if you are not into the text color of the section color scheme, you can enable the Use custom color checkbox and change the Custom color for the text.
HTML
You can add your own custom HTML to customize the section.
Collection
Add a preferable or unique Collection that you want to display on the Scrolling promotion and give this collection a Title.
If you want to use the collection name, leave the Title field blank.
You can choose a featured Image for the collection.
If you want to use the collection image, leave the Image field blank.
Change the Title size to:
Heading xs
Heading sm
Heading md
Heading lg
Heading xl
Heading 2xl
Display md
Display lg
Display xl
In addition, you can enable the Use custom width checkbox to adjust the Desktop width (200px - 800px) and Mobile width (250px - 500px) of the collection block if you prefer not to use the default width.
FAQs
Can I hide the product count from the collection card?
In your theme editor (Customize), go to Theme settings > Collection cards, then disable the Show product count checkbox.
This setting will hide the product count of all collection cards on your website.
Last updated
