Elegant man and woman in black sequin blazers, dark studio background, fashion editorial portrait

EDITORIAL COLLECTION

Static Masterpiece

Introduce visual consistency using high-resolution background assets.

Explore More

CINEMATIC EXPERIENCE

Motion Showcase

Utilize premium background elements to structure responsive ecommerce layouts.

View Showcase
Blonde woman in red dress and sunglasses, dramatic red fabric flowing in wind, desert landscape background

EDITORIAL COLLECTION

Static Masterpiece

Introduce visual consistency using high-resolution background assets.

Explore More

EDITORIAL COLLECTION

Static Masterpiece

Introduce visual consistency using high-resolution background assets.

Explore More

Journal Motion Showcase

newJournal Plugins

Journal Motion
Showcase

An advanced cinematic media section for modern ecommerce stores. It enables fluid merging of high-resolution static images with cross-platform video streams — while enforcing aggressive performance standards for optimal Core Web Vitals.

MP4 · YouTube · Vimeo Lazy Load Zero Bandwidth Leakage Journal3 Compatible Shopify OS 2.0

Multi-Source Hybrid Engine

Supports native MP4 uploads, YouTube URLs, and Vimeo links seamlessly inside separate slide nodes.

Unlimited Slides

Add any number of Image Slide and Video Slide blocks — no hard limit. Mix and match freely within a single section.

Lazy-Load Video Pipeline

JavaScript framework dynamically initializes heavy iframes only when the target slide comes into view.

Zero Bandwidth Leakage

Automatically kills iframes and pauses assets upon slide progression to conserve mobile data.

Poster Image Support

Shows a static first frame before the video loads — no white flash, no layout shift.


  1. Create the Section File

    In your Shopify Admin go to Online Store → Themes → Edit code. Under Sections, click Add a new section and name it exactly:

    sections/journal-motion-showcase.liquid
  2. Paste the Source Code

    Delete all placeholder code in the new file. Paste the complete plugin source code and click Save.

  3. Configure in Theme Editor

    Open Customize, add the Journal Motion Showcase section, then add Image Slide or Video Slide blocks as needed.

  4. Upload Poster Image (optional)

    For native video slides, upload a poster image via Content → Files. Select it in the Video Slide block settings to eliminate the loading flash.


Section Parameters

Parameter Type Values Purpose
video_native Video Shopify CDN Native MP4 upload via Shopify Files
poster_image Image Any image Shown before video loads
video_external Video URL YouTube / Vimeo External stream via iframe
autoplay_speed Range 3s – 12s Rotation interval between slides
text_effect Select blur / slide / fade Text animation per block
overlay_opacity Range 0 – 90% Dark overlay strength over media

Block Types

Block Media Source Poster Support Notes
slide_image Shopify Image Optimized flat hero photography
slide_video MP4 / YouTube / Vimeo Lazy-loaded, zero bandwidth leakage

Compatibility

Requirement Value
Theme Journal3 (all versions)
Shopify Architecture Online Store 2.0
Max Slides Unlimited (Image + Video blocks)
Video Formats MP4 (H.264), YouTube, Vimeo
Browser Support Chrome, Firefox, Safari, Edge (last 2 versions)
Mobile Fully responsive, touch-enabled