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

CINEMATIC EXPERIENCE

Motion Showcase

Utilize premium background elements to structure responsive ecommerce layouts.

View Showcase
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

EDITORIAL COLLECTION

Static Masterpiece

Introduce visual consistency using high-resolution background assets.

Explore More

Journal Motion Showcase

eStockMedia Plugins

Journal Motion
Showcase

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

v1.2 MP4 · YouTube · Vimeo Touch & Swipe Zero External Files Shopify OS 2.0

Key Features

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.

Video Start Second

Define the exact second where each YouTube video begins. On every slide return and loop restart, playback resumes from that point.

Play Video in Full

Toggle per slide — when enabled, the autoplay timer is ignored and the slider waits for the video to finish before advancing.

Poster Image Support

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

Zero External Files

Entire component — CSS, HTML, JavaScript — contained in a single .liquid file. No dependencies, no conflicts.

Installation

  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 video slides, upload a poster image via Content → Files. Select it in the Video Slide block settings to eliminate the loading flash.

Video Configuration

Start at Second

Each YouTube Video Slide has a video_start_second field. Enter the second where playback should begin (default: 0). On every slide activation and on every loop restart, the video seeks to this exact position.

💡 Tip: Use two separate Video Slide blocks pointing to the same YouTube URL with different start seconds to showcase different segments of a long video.

Play Video in Full Before Advancing

When this toggle is enabled, the global slide interval is ignored for that slide. The slider waits for the video to reach its end before moving to the next slide. Works for both native MP4 and YouTube.

⚠️ Ensure your video is longer than the configured slide interval. A video shorter than the interval will finish before the timer fires — causing an immediate transition.

Section Parameters

Parameter Type Values Purpose
slider_height_desktop Range 40–100vh Slider height on desktop
slider_height_mobile Range 40–100vh Slider height on mobile
autoplay_speed Range 3s – 12s Rotation interval between slides
fade_speed Range 300–1500ms Fade transition speed
enable_zoom Checkbox true / false Ken Burns effect on image slides
show_arrows Checkbox true / false Arrow navigation buttons
show_dots Checkbox true / false Dot indicator navigation
text_effect Select blur / slide / fade Text animation per block
overlay_opacity Range 0–90% Dark overlay strength over media
video_start_second Number 0–∞ YouTube start position in seconds
play_full_duration Checkbox true / false Wait for video to finish before advancing

Block Types

Block Media Source Poster Support Notes
slide_image Shopify Image — Ken Burns zoom, text animations
slide_video MP4 / YouTube / Vimeo ✓ Start second, play full duration toggle

Compatibility

Requirement Value
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 & swipe enabled

eStockMedia — Premium Shopify Components · info@estockmedia.com · https://new.journal.estockmedia.com/