Animated Media Scroll

Key Features for Scroll-Based Visual Storytelling

Create an engaging scroll experience with synced media, changing content, flexible positioning, responsive layouts, and built-in style controls.

Get App

Scroll-Synced Content Panels

Content changes as visitors scroll through each media block, helping each message stay connected to the visual beside it.

Image or Video Media Blocks

Use either a Shopify image or hosted video inside each block to build a richer, more flexible visual story.

Pinned Desktop Story Layout

On desktop, the content panel and media stay pinned while scrolling, creating a focused step-by-step browsing experience.

Left or Right Media Position

Choose whether the media appears on the left or right side of the content area to suit your page composition.

Tab-Style Progress Labels

Each block can have a tab title, giving shoppers a simple visual cue as they move through the scrolling story.

Shared Call-to-Action Button

Add one section-level button with a custom label and link, plus an optional outline style for the CTA.

Custom Colors and Typography

Adjust heading, body, tab, background, border, and button colors along with key font sizes from the editor.

Responsive Mobile Experience

Desktop scroll effects switch to stacked content and square media on smaller screens for a cleaner mobile layout.

Animated Media Scroll Settings & Options

Control layout, CTA styling, typography, colors, spacing, width, and each media block from the Shopify theme editor.

Section Settings

Applies to the whole section

Choose which side displays the media on desktop.

Desktop Media Side

Set the corner roundness for content and media.

Content Border Radius

Choose how block headings and text are aligned.

Content Text Alignment

Set the text shown inside the shared CTA button.

Section Button Label

Choose the destination used by the shared CTA.

Section Button Link

Switch the CTA between filled and outline styles.

Button Outline Style

Set the desktop heading size used in content blocks.

Heading Font Size

Choose the background color for the whole section.

Section Background

Adjust top and bottom spacing for desktop and mobile.

Responsive Padding

Set the maximum width of the section container.

Maximum Section Width

Add Section

Block Settings

Applies to each media block

Add the image shown for this media block.

Block Image

Add a Shopify-hosted video for this block.

Block Video

Set the short label used in the progress tabs.

Media Tab Title

Add the main heading for this content block.

Block Heading

Add supporting rich text for this block.

Block Content

Add Section

Where This Section Can Be Used

Use this section anywhere you need to pair visual media with changing content and guide shoppers through a clear, scroll-led story.

Home Page
Collection Page
Product Page
Landing Page

Home Page

Introduce Your Brand Through Scroll

Use a sequence of images or videos with matching text to explain your brand, featured collections, key values, or seasonal stories as visitors scroll.

Turn brand storytelling into an interactive browsing experience

Highlight several messages without adding separate sections

Pair campaign visuals with clear supporting explanations

Guide visitors through featured collections in sequence

Keep the homepage visually engaging on desktop and mobile

Collection Page

Add Storytelling Around a Collection

Use scroll-synced media and text to explain a collection theme, styling direction, materials, categories, or campaign visuals before shoppers browse.

Explain the idea or story behind a featured collection

Show different collection themes with matching visuals

Add context before shoppers enter the product grid

Use images or videos to support seasonal merchandising

Keep collection storytelling structured and easy to follow

Product Page

Explain Product Details More Visually

Use each media block to highlight product details, materials, use cases, styling ideas, or supporting visuals in a guided scrolling sequence.

Break complex product information into clear visual steps

Pair product details with relevant images or videos

Show materials, use cases, or styling ideas in sequence

Give shoppers more context without a long text-heavy block

Create a more immersive product storytelling experience

Landing Page

Build Scroll-Led Campaign Stories

Use animated media and changing copy to present a launch, promotion, editorial story, or campaign in a clear sequence, supported by one shared call-to-action.

Lead visitors through a campaign in a planned sequence

Combine promotional copy with strong image or video media

Use one consistent CTA throughout the campaign section

Create editorial-style storytelling without extra sections

Adapt the experience cleanly across desktop and mobile

Why Choose Animated Media Scroll Section?

Turn ordinary image-and-text content into a guided scroll experience that helps shoppers understand your story without adding a complicated layout.

Built for Visual Storytelling

Combine media, copy, tabs, and one CTA in a structured section that keeps related content together while shoppers scroll.

Connect each image or video with its matching message

Present several story points inside one organized section

Keep desktop visitors focused with pinned scroll content

Use simple tab labels to show progress through the story

Switch between left and right media placement as needed

Customize colors, typography, spacing, borders, and CTA

Deliver a simpler stacked experience on mobile screens

Do this, skip that.

DO

Use one clear idea or message for each media block.
Choose images or videos that directly support the text.
Keep tab titles short and easy to scan.
Arrange blocks in a logical story or product sequence.
Check the stacked mobile layout before publishing.

DON'T

Do not mix unrelated visuals and messages in one sequence.
Do not make content blocks overly long or text-heavy.
Do not use vague tab titles that make steps unclear.
Do not rely on desktop scroll effects for mobile content.
Do not add more blocks than the story actually needs.

Frequently Asked Questions

Can I use both images and videos in the same section?

Yes. Each media block supports an image or a Shopify-hosted video, so you can mix media types across the same scrolling section.

How does the section behave on the desktop while scrolling?

On desktop, the content area and media use scroll-triggered pinning so the active message changes as visitors move through each media block.

What happens to the animated layout on mobile devices?

Below the desktop breakpoint, the pinned scroll effect is disabled and the blocks display in a simpler stacked layout with square media.

Can I place the media on either side of the content?

Yes. The Desktop Media Side setting lets you place the media on the left or right side of the content area on the desktop.

Can every block have its own button or destination link?

No. The section provides one shared section-level button with one label and one link rather than separate CTA links for each block.

What content can I add to each individual media block?

Each block includes an image, video, tab title, heading, and rich-text content field, giving you flexible control over each story step.

Can I customize colors, fonts, spacing, and borders?

Yes. The section includes controls for major colors, font sizes, border radius, desktop and mobile padding, button styles, and section width.

Is this section compatible with Shopify theme editor blocks?

Yes. It is built as a Shopify section with repeatable media blocks and theme editor settings, including a preset for quick setup.

Help Center

We're Here to Help: We believe in providing exceptional customer support!

For Support or any Questions Email Us: [email protected]

Ready When You Are: Tell Stories as Shoppers Scroll

Install SectionHub and add the Animated Media Scroll section to your theme in minutes - no coding required.