Parallax waterfall

Build a scrolling editorial composition from sticky content, images, video, text, and products.

Parallax waterfall creates a layered editorial sequence while optional title, text, or image content remains anchored in the viewport. Use it for lookbooks and campaign stories that need a stronger reading rhythm than a regular grid.

Add Parallax waterfall

Establish a complete static story before deciding how much movement it needs.

Open the intended templateFrom Online Store > Themes > Edit theme, choose the page where the story belongs.
Add the sectionChoose Add section > Parallax waterfall.
Build the sequenceAdd and reorder Image, Video, Text, or Product blocks. The section supports up to 32 blocks.
Review without motionCheck the content order and contrast, then enable parallax only when the static composition is already clear.

Parallax waterfall at the top of the Lookbook page, with the large sticky title Fall Winter 2026 over two staggered fashion images.

Parallax waterfall on desktop. The title stays in place while the images move past it.

Content

The Content group in the Theme Editor. The values shown are examples, not defaults.

Sticky title: Adds the title that remains anchored while the waterfall moves behind or around it.
Options or default
Default: “Lookbook”. Leave it blank to hide the title.
Use as page heading (H1): Uses the Sticky title as the page’s main heading.
Options or default
Disabled by default. Turn it on only when the Sticky title is the main title of the page. Use this option in one section only.
Sticky text: Adds supporting rich text to the anchored content.
Options or default
Default: “Stories in motion”. Leave it blank to hide the text.

Choose one main page title

Use this option only when the Sticky title is the main title visitors should understand first. Turn it on in one section only.

Media

The Media group in the Theme Editor.

Sticky image: Adds an optional image to the anchored content.
Options or default
Leave it blank for a title-and-text treatment.

Layout

The Layout group in the Theme Editor.

Full width: Lets the waterfall use the full available width.
Options or default
Enabled by default.
Horizontal gap: Sets the separation between waterfall items.
Options or default
None, Small, Medium, or Large. Default: Medium.
Desktop sticky image width: Sets the image width on desktop.
Options or default
80–1200 px, in steps of 20 px. Default: 720 px.
Mobile sticky image width: Sets the image width on mobile.
Options or default
40–400 px, in steps of 10 px. Default: 200 px.
Sticky title size: Sets the title’s visual scale.
Options or default
Small, Medium, or Large. Default: Large. Available when Sticky title is not blank.
Sticky horizontal position: Positions the anchored content across the page.
Options or default
Left, Center, or Right. Default: Center.
Sticky vertical position: Positions the anchored content within the visible page height.
Options or default
Top, Middle, or Bottom. Default: Middle.
Sticky text width: Constrains the supporting text without changing the media sequence.
Options or default
Small, Medium, or Large. Default: Large. Available when Sticky text is not blank.

Motion and controls

The Motion and controls group in the Theme Editor.

Enable parallax is on by default and also requires Theme settings > Animation > Enable parallax effects.

The visitor’s reduced-motion preference and the theme’s reduced-animation setting remove the movement while keeping the content available. Do not rely on movement to explain the order or meaning of the story.

Colors

The Colors group in the Theme Editor.

Background color: Sets the surface behind the waterfall.
Options or default
Leave blank to inherit the global background color.
Card text color: Sets the copy color used over image and video blocks.
Options or default
Default: #FFFFFF.
Card overlay opacity: Controls the contrast layer behind copy on image and video blocks.
Options or default
0–80%, in steps of 5%. Default: 15%.

Spacing

The Spacing group in the Theme Editor.

Section spacing: Sets the space around the section.
Options or default
Small, Medium, or Large. Default: Medium.
Top spacing: Adds space above the section.
Options or default
Enabled by default.
Bottom spacing: Adds space below the section.
Options or default
Enabled by default.

Blocks

Image

A linked or informational image card.

Add Image, optional Eyebrow, Heading, and Description. Image link makes the card interactive; Accessible label names that destination and falls back to the heading when blank.

Video

Responsive hosted video with still-image fallbacks.

Add Video and optionally Mobile video. Add Fallback image and Mobile fallback image so the story remains useful when video does not play or motion is reduced. Eyebrow, heading, and description can sit over the media.

Text

A reading pause inside the media sequence.

Add Eyebrow, Heading, and rich Text. Choose Left or Center Text alignment, then set Content width to Small, Medium, or Large. The default is Medium. A Link label and Link add an optional action.

Product

A product card inside the editorial sequence.

Select one Shopify product. Remove empty Product blocks before publishing so the sequence does not contain an unexplained gap.

Blocks follow the Theme Editor order. Their repeating waterfall positions determine the composition, so reorder blocks and review the complete sequence rather than treating each item as an isolated card.

Image block settings in the Theme Editor: Image, Eyebrow, Heading, Description, Image link, Accessible label.

Image block settings (the Media group is shown).

Desktop and mobile behavior

Parallax waterfall on mobile with the sticky title above a single column of images.

On mobile the images run in one column.

The waterfall adapts its item sizes to the available width. On desktop, the sticky content remains positioned within the visible page area. On mobile, it returns to the normal page flow so visitors can scroll through it naturally. The sticky image still has separate desktop and mobile width settings, and mobile video and fallback-image fields let a narrow crop differ from the main source.

Review the whole composition

Parallax waterfall is a sequence, so test relationships between items rather than one block at a time.

Reading orderConfirm the block order remains meaningful when motion is removed.
Sticky contentCheck the title, text, and image at Top, Middle, and Bottom positions on short and tall screens.
Media fallbacksVerify every video has a useful still image and that mobile-specific sources preserve the subject.
Contrast and focusCheck overlay copy, product cards, linked images, and keyboard focus against the selected colors.

Common issues

Symptom	Safe check
Items do not move	Confirm both Enable parallax and the global parallax setting are on, then check reduced-motion preferences.
Sticky content is missing	Add at least one of Sticky title, Sticky text, or Sticky image.
An H1 warning appears	Keep Use as page heading (H1) enabled in only one suitable section.
A video has no useful fallback	Add Fallback image, and add a Mobile fallback image when the narrow crop needs to differ.
A Product block is empty	Select a published product or remove the block.
Media copy is hard to read	Adjust Card overlay opacity and Card text color together.

Flexible media grid for a more regular mixed-media grid.
Media hero for one focal hero or slideshow.
Product card for the product presentation used in Product blocks.
Animation for global motion and reduced-motion controls.