Scrolling Slideshow

Copy

Open in ChatGPT

Ask ChatGPT about this page

Open in Claude

Ask Claude about this page

The Scrolling slideshow dynamically displays multiple images or content in vertical sequence, commonly used to grab attention, highlight promotions, or tell a visual story.

1. Section Components

Section	Scrolling slideshow	Displays multiple images/videos or content in vertical sequence.
Available blocks	Slide	Add an individual image/video slide to the section.

2. Location & Setup

To add & set up the Scrolling slideshow 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 Slideshow".

3. Highlight Features

Flexible media support: Combine high-quality images and Shopify-hosted videos for visually rich storytelling.
Interactive navigation: Enable rotating slides, skip buttons, scrolling icons, and navigation dots for smooth browsing.
Product integration: Feature individual products directly in slides with adjustable card size, border, and blur for a polished presentation.

4. Common Use Cases

🤔 How to set up Scrolling slideshow?

STEP 1: Add the section

Add Scrolling slideshow section to your desired position.

STEP 2: Add & customize Slide blocks

Under Scrolling slideshow section, add Slide blocks and open its settings panel to set up:

Setting	How to set up?
Media	Upload a high-quality Image optimized for desktop and mobile. Upload a Video under Shopify-hosted video.
Overlay & navigation	Adjust Overlay opacity, choose an overlay color, or apply a Gradient overlay to enhance slide visibility. Add a Slide link to make the entire slide clickable.
Content	Add Heading, Subheading, and optional descriptive text. Adjust content alignment, text size, content position and so on.
Color	Adjust colors for slide elements: text, heading, content background...

STEP 3: Click "Save".

🤔 How to customize the Scrolling slideshow section's look?

STEP 1: Click on the Slideshow section to open its settings panel

STEP 2: Adjust display options

Enable Used as Hero to make the section the main banner.
Set Image size for desktop and mobile.
Enable or disable slide features such as Rotate between slides, Show Skip button, Navigation Dots, or Show Scrolling icon to enhance interaction and navigation.

STEP 3: Customize section font and color

At Font setting group, enable Use Custom Font, then select custom font families for Heading, Subheading, and Text.
At Color settings group, adjust color for Controls, which applies to Skip, Scroll icons, navigation dots,...

STEP 4: Customize desktop/mobile layout

At Desktop layout/Mobile layout settings group, adjust padding for the section.

STEP 5: Click "Save" when done.

🤔 How to display products in Scrolling Slideshow?

To showcase products in the Scrolling Slideshow:

STEP 1: Open the settings

With each slide in the section, you can display 1 product.

Click on the Slide block you want to add a product to.

STEP 2: Add products

At Product settings group:

Select product to highlight in the slide (You can only select 1 product).
Enter a short Text (e.g., “Check out our products”) to introduce the featured items.

STEP 3: Customize product card display

Enable Add divider border to visually separate product content.
Turn on Product Card Border and adjust Border thickness and Corner radius for rounded effects.
Select Desktop card type (Small or Large) and adjust Desktop card size (in %) to define the product card’s scale.

Desktop card type: Small	Desktop card type: Large

Modify Background blur to create a soft visual focus behind the product card.

STEP 4: Click "Save"

5. Layout Recommendations

The Scrolling slideshow section has appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us!

📂 Scrolling Slideshow

Check out demo here.

6. Support Information

Need help? Contact our support team at Omni Themes Support .