---
title: "Ecom Product Hotspot — Framer component · Best of Framer"
description: "$4.00 · Framer component · by Shouvik Biswas · Interactive. Multi-Directional Hotspot"
canonical: "https://framer.elliotli.dev/component/ecom-product-hotspot"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Ecom Product Hotspot

# Ecom Product Hotspot

Multi-Directional Hotspot

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

![Ecom Product Hotspot preview image 1](https://framer.elliotli.dev/og/component/ecom-product-hotspot/63c8d6f8433ad470/1600x1200.jpg)

## Summary

Multi-Directional Hotspot

## Description

The most advanced e-commerce annotation utility available, designed to serve as an Ecom Interactive Hotspot by embedding interactive product markers onto layouts and revealing comprehensive product specifications.

## Features

-   Multi-directional variants supporting Left, Right, Top, and Bottom tooltip positioning parameters.
-   Dual action trigger modes supporting responsive OnHover and OnClick interaction states.
-   Dedicated typography inputs with granular font size and color mapping controls for consistent layout branding.
-   Explicit heading and detail visibility toggles for flexible informational hierarchy adaptations.
-   Dual-layer point styling variables tracking inner dot and background ring color metrics.
-   Adjustable structural gap controls handling precise dot-to-box and internal container spacing metrics.
-   Custom container styling panels controlling background color fills, layout padding values, and corner radius variables.
-   Integrated backdrop-filter inputs for hardware-accelerated glassmorphism blur intensity manipulation.
-   Built-in realistic box-shadow property controls for elevated structural component depth separation.
-   UX-optimized property panel hierarchy for frictionless configuration and rapid deployment.

## How to Use

-   Place the component onto your product image asset and configure the informational content via the Heading and Specifications fields.
-   Change the position type from Relative to Absolute and configure the precise layout constraints to pin your marker over the product image.
-   Select your orientation variant and configure styling to match your branding.
-   Publish your project to take the interactive product hotspot live.

_Drive seamless context-aware product discovery directly inside your visual workspace._

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

-   All · #2184

## Details

- **Author**: Shouvik Biswas
- **Price**: $4.00
- **Published**: 2026-06-17
- **Updated**: 2026-09-15
- **Added**: 2026-06-17
- **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