Framerfy Docs – Shopify Storefronts in Framer

A scrollable product image gallery component for Framer with support for zoom, sticky floating thumbnails, horizontal/vertical orientation, and variant-based image switching.

What It Does

The Vertical Media Carousel displays a list of product images in a scrollable gallery. As the user scrolls through the images, a floating thumbnail bar appears at the bottom of the gallery — letting users quickly jump to any image by clicking its thumbnail. Key behaviors at a glance:

Scrollable image gallery — images stack vertically (or sit side-by-side horizontally) and the user scrolls through them naturally.
Auto-detecting active image — as the user scrolls, the component watches which image is in view and highlights the matching thumbnail automatically.
Sticky floating thumbnails — a pill-shaped thumbnail bar floats over the bottom of the gallery while the user is scrolling through it. It fades in when the gallery enters the viewport and fades out when the user scrolls past it.
Click-to-jump thumbnails — clicking any thumbnail smoothly scrolls the gallery to that image.
Zoom on hover — hovering over an image zooms into the area under the cursor (can be toggled off).
Variant-aware — reads a ?variant= URL query parameter and automatically scrolls to the image that matches the selected product variant.
Horizontal mode — optionally lays out images in a horizontal row instead of a vertical column.

Property Controls

All controls are accessible in Framer’s right panel when the component is selected. They are grouped into four sections: Image, Variants, Gallery, and Thumbnail.

Image

Property	Type	Default	Description
Image	String (JSON)	4 sample Unsplash URLs	A JSON array of image URLs to display in the gallery. In Framer CMS, connect this to the `"Image URLs"` variable from your CMS collection.

Variants

Property	Type	Description
Variants	String (JSON)	A JSON array of product variant objects, each containing an `id` and an `image.url`. Connect this to the `Variants` variable from your Framer CMS. When a visitor lands on the page with a `?variant=<id>` URL parameter, the gallery automatically scrolls to the image matching that variant.

Gallery

Controls the visual appearance and layout of the main image list.

Property	Type	Default	Description
Aspect Ratio	String	`1/1`	The width-to-height ratio of every image in the gallery. Use CSS ratio syntax: `1/1` (square), `4/5` (portrait), `16/9` (landscape), etc.
Orientation	Enum	`Vertical`	Controls the scroll direction of the gallery. `Vertical` stacks images top-to-bottom; `Horizontal` lays them out left-to-right.
Gap	Number (px)	`16`	The spacing between images in the gallery. Range: 0–100 px.
Border Radius	Number (px)	`8`	Rounds the corners of each image. Range: 0–50 px.
Enable Zoom	Boolean	`true`	When enabled, hovering over an image zooms into the area under the mouse cursor (2× zoom). Disable this for a static gallery experience.

Thumbnail

Controls the floating thumbnail navigation bar.

Property	Type	Default	Description
Show	Boolean	`true`	Master toggle. Turn this off to hide the thumbnail bar entirely.
Position	Enum	`Bottom`	Where the thumbnail bar is anchored. Options: `Bottom`, `Left`, `Top`, `Right`. (Note: the current layout engine positions the bar at the bottom of the visible gallery area regardless of this setting — the value is stored for future directional support.)
Thumbnail Bottom Offset	Number (px)	`20`	How far above the bottom edge of the gallery the thumbnail bar floats. Increase this if the thumbnails overlap other page elements. Range: 0–200 px. Hidden when Show* is off.*
Thumbnail Blur	Number (px)	`12`	The intensity of the frosted-glass blur effect on the thumbnail bar’s background. `0` removes the blur. Range: 0–50 px. Hidden when Show* is off.*
Thumbnail Border Radius	Number (px)	`20`	Rounds the corners of the thumbnail bar container. Range: 0–50 px. Hidden when Show* is off.*
Thumbnail Active Color	Color	`#3094cd`	The border color that highlights the currently active thumbnail (the one matching the image in view). Hidden when Show* is off.*
Thumbnail Size	Number (px)	`40`	The width and height of each thumbnail image. Range: 24–80 px. Hidden when Show* is off.*

Notes

Image URLs must be passed as a JSON array string (e.g. ["https://...", "https://..."]). Framer CMS handles this automatically when you connect the right variable.
The zoom effect is purely CSS transform-based — no library required. It zooms 2× centered on the mouse position.
The thumbnail bar auto-scrolls horizontally when there are more thumbnails than fit in the visible area.

​What It Does

​Property Controls

​Image

​Variants

​Gallery

​Thumbnail

​Notes