parallax-banner.liquid — the complete section file

Here's everything you need — two files delivered:

📦 What's included

parallax-banner.liquid — the complete section file

parallax-banner-guide.html — the full visual installation guide

🚀 6-step installation (any Shopify theme)

Admin → Online Store → Themes → ⋯ → Edit code

Open the Sections folder → Add a new section → name it parallax-banner

Paste the entire .liquid file contents → Save

Go to Customize → Add section → search Parallax Banner

Upload your background image + add blocks

Save to publish live

✨ How the parallax depth works

Layer

Behaviour

.parallax-banner__bg

translateY applied via rAF at speed × scroll delta — moves slower

.parallax-banner__content-wrap

Sits at z-index: 1, untouched — scrolls normally

Background inset

Extended to -30% top/bottom so image always fills the frame

The speed slider (0–1) in the editor controls the depth intensity directly.

📱 Mobile & accessibility

Parallax auto-disabled below 750px — cleaner UX on touch devices

prefers-reduced-motion respected — static banner for users who need it

rAF + ticking flag — never runs more than once per paint frame

Full srcset (750px → 2400px) + fetchpriority="high" for LCP