---
title: "ZoomableProdViewer — Framer component · Best of Framer"
description: "$8.00 · Framer component · by MJ Jung · Interactive. Screenshots, details, and remix links on Best of Framer."
canonical: "https://framer.elliotli.dev/component/zoomableprodviewer"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/ZoomableProdViewer

# ZoomableProdViewer

[View on Framer](https://framer.com/marketplace/components/zoomableprodviewer/?via=elliot-li)

![ZoomableProdViewer preview image 1](https://framer.elliotli.dev/og/component/zoomableprodviewer/8c28f6b744914e96/1600x1200.jpg)

## Summary

1.

## Description

## 1\. Introduction

The ZoomableProductViewer component enables users to zoom in on product images interactively, enhancing visual details for better product examination.

## 2\. Features

-   Interactive zoom functionality with various modes (hover, click, both)
    
-   Customizable zoom lens shape and size
    
-   Adjustable zoom level for detailed views
    
-   Option to display a hint and zoom indicator for user guidance
    
-   Configurable styles including background color and shadow effects
    

## 3\. Installation & Setup

To add the ZoomableProductViewer component to your Framer project.

-   Open your Framer project.
    
-   Navigate to the Marketplace and search for "ZoomableProductViewer".
    
-   Click the "Install" button to add the component to your project.
    
-   Drag the ZoomableProductViewer component onto your canvas.
    

## 4\. How to Use

-   **Select the Component**: Click on the ZoomableProductViewer component on the canvas.
    
-   **Upload an Image**: In the properties panel, upload a high-resolution image for better zoom quality.
    
-   **Configure Zoom Settings**:- Set the zoom level, lens size, and shape according to your preference.
    
-   **Adjust Style**: Modify the background color, border radius, and shadow settings to match your design.
    
-   **Customize UI Elements**: Enable or disable the hint and zoom indicator as needed.
    
-   **Set Interaction Preferences**: Choose how the zoom is activated (hover, click, or both) and adjust smooth follow settings.
    
-   **Preview**: Test the component in preview mode to ensure the zoom functionality works as expected.
    

## 5\. Property Controls Reference

### zoomConfigures the zoom functionality of the component.

-   **level** (Number, Default: 2.5) - The magnification level applied to the image when zoomed.
    
-   **lensSize** (Number, Default: 150) - The diameter of the zoom lens in pixels.
    
-   **lensShape** (Enum, Default: "circle") - Determines the shape of the zoom lens (circle or square).
    
-   **showLensBorder** (Boolean, Default: true) - Whether to display a border around the zoom lens.
    
-   **lensBorderColor** (Color, Default: "rgba(255, 255, 255, 0.8)") - Color of the lens border.
    
-   **lensBorderWidth** (Number, Default: 3) - Thickness of the lens border in pixels.
    
-   **safePadding** (Number, Default: 32) - Extra padding to prevent lens clipping at edges.
    

### styleControls the visual appearance of the component.

-   **backgroundColor** (Color, Default: "#0a0a0a") - Background color of the component.
    
-   **borderRadius** (Number, Default: 12) - Corner roundness in pixels.
    
-   **showShadow** (Boolean, Default: true) - Whether to display a shadow around the component.
    
-   **shadowColor** (Color, Default: "rgba(0, 0, 0, 0.3)") - Color of the shadow.
    
-   **shadowBlur** (Number, Default: 30) - Blur effect of the shadow in pixels.
    

### uiConfigures user interface elements of the component.

-   **showHint** (Boolean, Default: true) - Whether to display a hint when the user hovers over the image.
    
-   **hintText** (String, Default: "Hover to zoom") - Text displayed in the hint.
    
-   **hintPosition** (Enum, Default: "top-left") - Position of the hint relative to the component.
    
-   **showZoomIndicator** (Boolean, Default: true) - Whether to display the zoom level indicator.
    
-   **cursorStyle** (Enum, Default: "crosshair") - Style of the cursor when hovering over the component.
    

### interactionConfigures user interaction settings.

-   **zoomMode** (Enum, Default: "hover") - Determines how the zoom is activated (hover, click, or both).
    
-   **smoothFollow** (Boolean, Default: true) - Enables smooth following of the mouse cursor within the zoom area.
    
-   **followSpeed** (Number, Default: 0.15) - Speed of the smooth follow effect.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #10573

## Details

- **Author**: MJ Jung
- **Price**: $8.00
- **Published**: 2026-01-12
- **Updated**: 2026-01-12
- **Added**: 2025-12-22
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step