Scrolling Images is a Shopify theme section in the Section Star library. Add scrolling images.
About the Scrolling Images section
The "Scrolling Images" section transforms your Shopify storefront with a captivating scrolling image carousel. As users scroll, new images appear while accompanying text and headlines gracefully transition in and out. The section is perfect for highlighting multiple products, features, or stories in a dynamic and visually appealing manner.
Live demo
Use cases
- Product Features Carousel: Showcase the unique features of a new product. Each scroll reveals a new image with a descriptive text overlay.
- Customer Testimonials: Display customer reviews and testimonials with their corresponding profile pictures.
- Brand Story: Tell the brand's story with a series of images and narratives that transition as the user scrolls.
- Seasonal Promotions: Highlight different aspects of a seasonal promotion or holiday campaign.
- Portfolio Display: Creative agencies can use this section to showcase a portfolio of completed projects with descriptions.
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Font
Set the fonts for your section
| Setting | Type | Default |
|---|---|---|
| Override theme fonts | Checkbox | Off |
| Headline Font | Font | sans-serif |
| Text Font | Font | sans-serif |
Text
Set the text for your section
| Setting | Type | Default |
|---|---|---|
| Text Size | Range | 15 |
| Text Line Height | Select (0.75, 1.0, 1.1, 1.2, 1.3, 1.4…) | inherit |
| Headline Size | Range | 40 |
| Headline Line Height | Select (0.75, 1.0, 1.1, 1.2, 1.3, 1.4…) | inherit |
Colors
Set colors for the section.
| Setting | Type | Default |
|---|---|---|
| Background Color | Color or gradient | transparent |
| Progress Background Color | Color or gradient | linear-gradient(177deg, rgba(17, 17, … |
| Progress Foreground Color | Color or gradient | linear-gradient(177deg, rgba(17, 17, … |
| Indicator Color | Color | #111 |
Dimensions
Set the section dimensions in pixels.
| Setting | Type | Default |
|---|---|---|
| Max Width of Section | Number | 1000 |
| Max Width of Section | Number | 500 |
| Point where text appears on the screen (px) | Number | 300 |
| Padding Top | Number | 25 |
| Padding Bottom | Number | 25 |
| Padding Left | Number | 10 |
| Padding Right | Number | 10 |
| Element Spacing | Number | 15 |
| Gap between Columns | Number | 20 |
Slideshow
Set settings for your slideshow
| Setting | Type | Default |
|---|---|---|
| Round Borders on Media | Range | 5 |
| Subtle Shadow on Media | Checkbox | On |
| Media Aspect Ratio | Select (21:9, 16:9, 4:3, 1:1) | 4 / 3 |
Image block settings
| Setting | Type | Default |
|---|---|---|
| Image | Image | — |
| Headline | Inline rich text | <b>We ❤️ Scrolling Images.</b> |
| Text | Rich text | <p>Scrolling images are a great way t… |
How to add this section to a Shopify store
- Install Section Star from the Shopify App Store.
- Open the app and search the library for “Scrolling Images”.
- Click Publish, then choose a name and the theme to publish into.
- Follow the deep link into the Shopify theme customizer.
- Add the section to any page and customize it with the native theme settings.
No code is required, and the section lives in your theme as ordinary Liquid — see the full install guide.