Scrolling image #1 - #2 - #3 - #4 - #5

by Admin on Aug 25, 2025

The Scrolling image section is a dynamic and eye-catching way to showcase images using glide smoothly across the screen. It is designed to capture attention, highlight collections, products, and make browsing more interactive for customers.

1. Section Components

Section	Scrolling image	Display products, collections, or other content in a sliding image format.
Available block	Image	Add an individual image and a link to redirect customers.

2. Location & Setup

To add & set up the Scrolling image section:

Open the Shopify Theme Editor (Online Store > Themes > Customize)
Decide where you want to place the new section in Template.
Click "Add Section".
Select "OT: Scrolling image (#number of variant)".

3. Highlight Features

Flexible customization options: Adjust headings, fonts, sizes, borders, and colors; fine-tune layouts for both desktop and mobile.
Smooth scrolling effects – Control speed, direction, and hover-pause for an interactive browsing experience.
Multiple layout variants: Choose from 5 pre-built Scrolling image styles, offering versatility for different store designs.

4. Common Use Cases

🤔 How to set up Scrolling image section?

STEP 1: Add the section

Add Scrolling image section to your desired position.

STEP 2: Add & customize Image blocks

Under Scrolling image section, add Image blocks and open its settings panel:

Select an Image for the block.
Paste a URL to redirect customers when clicking on the image.
Enter an Image title.

💡 Tip: Here, you can feature product/collection images and paste links to redirect customers to the desired product/collection.

STEP 3: Customize general elements

Click on the Scrolling image settings panel, then you can:

Enter the Heading of the section.
Adjust Heading size, Heading tag, Heading font.
Add some Text for further description about the section. You can adjust Text size and Font as well.

STEP 4: Click "Save" and preview.

🤔 How to customize the look of section?

To modify the look of the section, follow this:

STEP 1: Click on the Scrolling image settings panel.

STEP 2: Customize the Image elements

Scroll down to Images setting group:

Choose the Image title position, size and alignment.
Adjust border for the image at Corner radius.

Corner radius: 0%	Corner radius: 50%	Corner radius: 100%

Choose Image ratio (1:1, 16:9, 4:3…).

STEP 3: Customize Desktop/Mobile layout

In the Desktop layout and Mobile layout setting groups:

Adjust image width.
Choose section width.
Enable section divider if you wish.
Adjust padding.

STEP 4: Customize Color for the section

In the Color setting group, choose colors for section elements such as section background, heading, text, border…

STEP 5: Click "Save" when done.

🤔 How to customize scrolling effect for the section?

STEP 1: Click on Scrolling image to open its settings panel.

STEP 2:

Scroll down to the Scrolling setting group, then:

Choose the position of navigation arrows at Show navigation arrows.
(Optional) Turn on "Show scroll border" to border the scrolling area. Don't forget to choose color for Line and border.
Choose the scrolling Speed (From 6-50s) and Direction.
Toggle "Pause on hover" to stop scrolling when hovering on the section.