Dynamically display images that scroll horizontally across the screen, offering a visually engaging way to highlight logos or lifestyle imagery using the Scrolling images section.
🧰 How to install the section in your theme
- Open Theme Updater & Backups in your Apps admin
- Open Theme sections
- Click Install below the section. You can also click Preview to see the section in a demo storefront
- On the right side of the page, use the Choose theme dropdown to select the theme you want to enhance with the new section
- Click Install
Add the section to a template
Click Customize to open the theme editor for the selected theme.
Open the template (e.g. home page, default product) and click (+) Add section in the sidebar.
Scroll down to the bottom of your default sections list and select 🧰 Scrolling Images.
Click the Scrolling Images section to open its general settings.
Section heading
Add a heading to introduce the section with the Section heading field.
Font Size
Use the sliders for Heading size, Mobile heading size to control the font sizes for the section's text components.
Scrolling settings
Scrolling speed controls the duration (in seconds) for one complete cycle of text.
Scrolling direction allows you to control the direction in which the image would scroll from and towards. By default, this is set from Left to right.
Pause scrolling on hover allows your customers to stop the scrolling animation momentarily. Removing their cursor from the section would resume the animation. Disabling this feature means that the scrolling text animation will be uninterrupted.
Image layout
Use the Image aspect ratio to choose the desired space the image will occupy. There are six options:
- Adapt to image
- Portrait (2:3)
- Portrait (4:5)
- Square (1:1)
- Landscape (3:2)
Color
Change the section heading text color by setting the color property, and set the section's background using the background-color property.
Adjust spacing
Use the Top padding and Bottom padding sliders to increase or decrease the padding of the section.
Use the Top margin and Bottom margin sliders to increase or decrease the margins of the section.
Add scrolling image block
You can add your section content through the Scrolling Images block:
Desktop image width and Mobile image width slider are also available for resizing the images that goes into the block.
Link field is also available to make each image block clickable.