Product Media Gallery is a polished Framer component designed to showcase product images and videos in a clean, professional layout. It combines thumbnail navigation with a large preview area, supports mixed media types, and automatically handles video playback for an optimized browsing experience.
Videos display a clear play icon overlay on thumbnails, while the active media smoothly fades into view in the main preview. The layout is fully customizable, responsive, and works seamlessly in preview and published modes.
This component is ideal for ecommerce, SaaS, and portfolio projects where product visuals need to feel premium, intuitive, and interactive—without writing extra code.
Supports both images and videos in a single gallery
Automatic video play/pause when switching media
Play icon overlay on video thumbnails
Thumbnail-based navigation with active state styling
Optional next/previous navigation arrows
Keyboard navigation support (left/right arrows)
Smooth fade transitions between media
Fully responsive and layout-safe in Framer
Customizable thumbnail size, spacing, and border radius
Custom arrow colors, size, position, and hover styles
Ecommerce product pages
SaaS feature showcases
Landing pages with product demos
Portfolio case studies
Startup marketing websites
App and hardware product presentations
Designers building ecommerce experiences in Framer
Products that mix images and short demo videos
Clean, modern UI with minimal interaction friction
High-quality product storytelling
Projects that need flexibility without custom code
Add images or videos using the Media List property
Select media type (image or video) per item
Set a thumbnail image for videos using Video Thumbnail
Adjust thumbnail size and spacing using Thumbnail Size and Gap
Choose thumbnail position (left or right)
Enable or disable navigation arrows
Customize arrow color, size, background, and position
Set background color and border radius to match your design
Mohd Mehraj
