Case Study

Advanced Hero Slider (1/3 + 2/3)

Split-screen hero slider with content and image

Overview

A custom Shopify hero section with a 1/3 - 2/3 split layout, featuring smooth transitions and mobile-optimized content.

Creating a visually striking hero section that works across all devices while maintaining the split-screen aesthetic.

Used CSS grid for the split layout with a JavaScript-powered slider for transitions, optimized for Shopify's theme architecture.

Tech Stack

ShopifyLiquidJavaScriptCSSFramer Motion

1/3 + 2/3 split screen layout

Smooth slide transitions

Mobile-optimized stacking

Customizable content blocks

Framer Motion animations