eStockMedia Plugins
Journal Banner v2
A premium, editorial-style multi-image banner section built for luxury and high-converting Shopify stores. Features a cinematic grayscale-to-color scroll reveal on mobile and hover color activation on desktop. This component operates on an independent, scoped BEM CSS architecture with no external dependencies.
v2.0 Scroll Color Reveal Hover Activation BEM Architecture Zero External Files Shopify OS 2.0
Key Features
Scroll Color Reveal
On mobile, each banner activates full color as it enters the center of the viewport — and returns to grayscale as it exits.
Hover Color Activation
On desktop, color is triggered on hover. Inactive banners remain in elegant grayscale.
Scoped BEM Architecture
Uses strict .journal-banner__ prefixes to prevent style leaking and maintain theme-independent layouts.
Granular Typography Control
Independent font picker, size, weight, letter spacing, and color for Subtitle, Title, and Button.
Button Style System
Choose between Outline, Filled, or Text Only — with full control over colors, hover color, and border radius.
Per-Block Orientation
Each image block can be set independently to Vertical (3:4) or Horizontal (4:3) crop.
Up to 6 Image Blocks
Add between 2 and 6 image blocks per section instance.
Overlay Gradient Control
Adjustable dark gradient behind text (0–80%) for readability without text shadows.
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-banner-v2.liquid
-
Paste the Source Code
Delete all placeholder code in the new file. Paste the complete plugin source code and click Save.
-
Configure in Theme Editor
Open Customize, add the Journal Banner v2 section, then add image blocks and configure typography, colors, and button styles.
-
Set Image Orientation per Block
For each block, set the Image orientation (Vertical or Horizontal) to match your photography. This controls the crop ratio independently per block.
Section Parameters
| Parameter |
Type |
Allowed Values / Step |
Purpose |
columns |
Range |
2 to 6 (step: 1) |
Number of columns in grid |
gap |
Range |
0px to 40px (step: 2) |
Gap between images |
max_width |
Range |
800px to 1920px (step: 40) |
Section max width |
background_color |
Color |
— |
Section background |
button_style |
Select |
outline / filled / text |
Button appearance |
button_border_color |
Color |
— |
Button border color (Outline) |
button_bg_color |
Color |
— |
Button fill color (Filled) |
button_hover_color |
Color |
— |
Button hover state color |
Per-Block Settings
| Parameter |
Type |
Purpose |
crop_orientation |
Select |
Vertical (3:4) or Horizontal (4:3) |
image |
Image picker |
Block image |
subtitle |
Text |
Small label above title |
title |
Text |
Main heading |
button_label |
Text |
Button text |
link |
URL |
Click destination |
Compatibility
| Requirement |
Value |
| Shopify Architecture |
Online Store 2.0 |
| Max Image Blocks |
6 per section instance |
| Browser Support |
Chrome, Firefox, Safari, Edge (last 2 versions) |
| Mobile |
Fully responsive, scroll-triggered color reveal |
