newJournal Plugins
Journal Pro
Slider v3
A premium, editorial-style slideshow section built for luxury and high-end conversion Shopify stores. Operates on an independent, hardware-accelerated CSS architecture that ensures performance stability and isolated custom block settings.
Hardware Accelerated
BEM Scoped
Ken Burns Effect
Journal3 Compatible
Shopify OS 2.0
Key Features
Scoped BEM Architecture
Uses strict .jps- scoping prefixes to prevent style leaking and maintain theme-independent layouts.
Granular Block Control
Modify subtitle colors, heading sizes, text colors, and exact button properties independently per slide.
Hardware-Accelerated Transitions
Fluid visual styles: Luxury Blur-in-Focus, Elegant Slide from Bottom, and Clean Fade In — all GPU-driven.
Dynamic Typography Rendering
Injects typography rules on demand using optimized style loops — zero render-blocking overhead.
Ken Burns Effect
Optional progressive scale animation per slide — toggle on/off independently without affecting other blocks.
Unlimited Slides
Add any number of Slide blocks — no hard limit. Each slide is fully independent with its own settings.
Installation
-
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-pro-slider-v3.liquid
-
Paste the Source Code
Completely remove any default boilerplate code generated by Shopify. Paste the entire provided component code and click Save.
-
Configure in Theme Editor
Click Customize on your theme. In the left panel, click Add section within any template (Home, Product, Collection, etc.). Search for Journal Pro Slider and select it.
-
Add Slide Blocks
Click Add Slide blocks to begin populating imagery, adjusting typography, and assigning call-to-action links per slide.
Section Parameters
| Parameter |
Type |
Values / Step |
Purpose |
slider_height_desktop |
Range |
40vh – 100vh (step: 5) |
Desktop viewport height |
slider_height_mobile |
Range |
40vh – 100vh (step: 5) |
Mobile viewport height |
title_size |
Range |
30px – 80px (step: 2) |
Individual slide heading size |
enable_zoom |
Toggle |
true / false |
Ken Burns progressive scale effect |
Slide Block Settings
| Setting |
Type |
Purpose |
image |
Image Picker |
Background image for the slide |
subtitle |
Text |
Small uppercase label above heading |
subtitle_color |
Color |
Subtitle text color per slide |
title |
Text |
Main heading text |
title_color |
Color |
Heading color per slide |
button_label |
Text |
CTA button text |
button_link |
URL |
CTA button destination |
btn_bg |
Color |
Button background (default: transparent) |
btn_bg_hover |
Color |
Button background on hover |
Compatibility
| Requirement |
Value |
| Theme |
Journal3 (all versions) |
| Shopify Architecture |
Online Store 2.0 |
| Max Slides |
Unlimited |
| Browser Support |
Chrome, Firefox, Safari, Edge (last 2 versions) |
| Mobile |
Fully responsive, touch-enabled |
| GPU Acceleration |
Yes — CSS transform3d, will-change: transform |
