> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/ella-7-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/ella-7-documentation/sections-and-blocks/scroll-showcase.md).

# Scroll showcase

The Scroll showcase section creates a pinned collage that animates as the customer scrolls.

The section uses Custom Section layout settings (direction, width, background, overlay) plus a static **Scroll showcase** block that controls the pin animation.

### There are 2 ways to add a Section to your store

#### 1. Add a pre-made section from our demo?

Read the instructions here

#### 2. Add the Scroll showcase section manually?

* From your Shopify admin, go to Online Store -> Themes.
* Find the theme that you want to edit, and then click Customize.
* In the Templates -> Add section -> choose **Scroll showcase**.

### Scroll showcase - Settings Guide

Section settings are the same layout / size / appearance / padding controls as Custom Section. See Custom Section for the full table.

Use these to control the outer container (page width, background media, overlay, padding). The collage animation is configured inside the **Scroll showcase** block.

#### Scroll showcase block

This block is included by default. It pins the collage while the page scrolls.

| Setting                 | Type     | Default | Description                                         | Visibility                |
| ----------------------- | -------- | ------- | --------------------------------------------------- | ------------------------- |
| Enable scroll animation | Checkbox | Yes     | Pin the collage and animate images while scrolling. | Always                    |
| Scroll distance         | Range    | 260vh   | How long the section stays pinned (160–400vh).      | When animation is enabled |

Child blocks you can add inside Scroll showcase:

* Heading / Text / Button / Group
* **Scroll showcase stamp** — circular rotating text
* **Scroll showcase image** — collage photos (main or overlay)

#### Scroll showcase image

| Setting       | Type    | Default | Description                                                                                         |
| ------------- | ------- | ------- | --------------------------------------------------------------------------------------------------- |
| Image         | Image   | —       | Collage photo                                                                                       |
| Link          | URL     | —       | Optional link wrapping the image                                                                    |
| Cluster       | Select  | Left    | Place the image in the left or right cluster                                                        |
| Role          | Select  | Main    | **Main** can show a featured product card. **Overlay** sits on top and never shows the product card |
| Rotate        | Range   | -31deg  | Image rotation (-45 to 45deg)                                                                       |
| Corner radius | Range   | 24px    | Image roundness (0–40px)                                                                            |
| Product       | Product | —       | Featured product card (Main role only)                                                              |

#### Scroll showcase stamp

A circular badge with rotating text, typically placed in the center of the collage. Configure the stamp text, font, color, separator icon, and rotation speed in the block settings.

### Default structure

The preset includes:

* Section header (Heading + Description + Button)
* Scroll showcase stamp
* Four Scroll showcase images (left/right clusters, main + overlay)
* Spacer + Button

You can add more images or hide the stamp. Keep at least one **Main** image if you want a featured product card.

### Need More Help?

If you experience any difficulties or require extra support with your Ella theme, feel free to contact our support team through our Ticket System — we’ll get back to you within 24 hours.

Simply scan the QR code below to join our Facebook community and stay updated with the latest news, tips, and announcements.

Join HaloThemes Community