Preview Section | Password = Chingi
1 2

Version: 0.9.0

Latest Update:

PARALLAX BANNER/STORY PANEL | ONLY DESKTOP OPTIMIZED [UPDATE FOR MOBILE SOON]

PARALLAX BANNER/STORY PANEL | ONLY DESKTOP OPTIMIZED [UPDATE FOR MOBILE SOON]

$5.00 USD
$5.00 USD
Sale Sold out
Taxes included. Download Available in less than 2 minutes

Parallax Story Panel [PREVIEW BEFORE BUYING]

MOBILE NOT 100% SUPPORTED, BUT WORKS

Full-width parallax panels with overlay text, up to four movable buttons, and custom height. Currently mobile support is limited—mobile devices use scroll‐based parallax with no fixed background.

Key features

  • Full-screen panels — each panel covers at least 100vh before revealing the next.
  • Parallax effect — JS-based scroll parallax for desktop & mobile, unique image per panel.
  • Overlay controls — headings, subheadings, rich text, and overlay color/opacity.
  • Up to 4 buttons — label, URL, X & Y position (%) per panel, fully movable.
  • Lightweight — pure Liquid, CSS, and minimal JS; no external libraries.

Editable settings

  • Section margin & padding
  • Panel height (defaults to viewport height)
  • Overlay color & opacity
  • Panel blocks:
    • Background image picker
    • Heading, subheading, rich text body
    • Text color
    • Buttons: text, URL, X/Y position (up to 4)

How to add the section

  1. In Shopify admin go to Online Store › Themes, click the kebab menu (⋮) next to your theme and choose Edit code.
  2. Inside the sections folder, click Add a new section.
  3. Name the file: parallax-story.liquid and click Create section.
  4. Copy the entire code from this file and paste it into parallax-story.liquid, replacing any placeholder code.
  5. Click Save.
  6. Open the Theme Editor (Customize), click Add section, and choose Parallax Story Panel.
  7. Configure global settings, add your panels and buttons, then Save your theme.
View full details