Turn static images into interactive showcases. Hotspots expand on hover to reveal labels, and clicks open rich tooltips with images and CTAs—grabbing attention, driving engagement.
Make it with Workshop
Build your own component with AI
The Interactive_Product_Showcase component enables users to create engaging product displays with interactive hotspots and tooltips.
Add multiple interactive hotspots on a background image.
Customize hotspot icons, colors, and sizes.
Display tooltips with titles, descriptions, and optional images.
Support for customizable button actions in tooltips.
Responsive design for various screen sizes.
Open the Framer project where you want to use the component.
Go to the Framer Marketplace and find the Interactive_Product_Showcase component.
Click on "Add to Project" to install it.
Drag the component from the components panel into your canvas.
Select the Interactive_Product_Showcase component on your canvas.
In the properties panel, set the Background Image to your desired product image.
Define the Hotspots by adding details such as position (X, Y), title, description, and optional button text and link.
Customize the Hotspot Button Style to select the icon type, size, and colors.
Adjust the Tooltip Style to modify the appearance of tooltips, including size and shape.
Set typography options for tooltips in the Tooltip Typography section.
Enable or disable the Tooltip Button based on your needs.
src (String) - URL of the background image.
srcSet (String, Default: undefined) - Optional responsive image sources.
alt (String, Default: "Background") - Alt text for accessibility.
Configures interactive hotspot markers.
id (String, Default: undefined) - Unique identifier for the hotspot (hidden).
x (Number, Default: 50) - Horizontal position from left (0-100%).
y (Number, Default: 50) - Vertical position from top (0-100%).
title (String, Default: "Hotspot Title") - Title shown on hover and in tooltip.
description (String, Default: "Hotspot description") - Detailed description shown in tooltip.
tooltipImage (ResponsiveImage, Default: undefined) - Image displayed at the top of the tooltip.
buttonText (String, Default: "View Details") - Call-to-action button label.
buttonLink (String, Default: "https://example.com") - URL opened when the button is clicked.
tooltipPosition (Enum, Default: "auto") - Tooltip positioning: auto or custom.
tooltipVertical (Enum, Default: "top") - Vertical position: top or bottom (hidden if tooltipPosition is not custom).
tooltipHorizontal (Enum, Default: "right") - Horizontal position: left or right (hidden if tooltipPosition is not custom).
Controls the appearance of hotspot buttons.
icon (Enum, Default: "plus") - Icon style: plus, arrow, or pulse.
iconSize (Number, Default: 12) - Size of the icon in pixels.
color (Color, Default: #3b82f6) - Background color of the hotspot button.
iconColor (Color, Default: #ffffff) - Color of the icon and text.
Configures the appearance of hotspot labels.
show (Boolean, Default: true) - Whether to show the label on hover.
font (FramerFont, Default: {}) - Typography settings for the label text.
Controls tooltip appearance.
size (Enum, Default: "medium") - Tooltip size: small, medium, or large.
shape (Enum, Default: "rounded") - Tooltip shape: rounded or square.
backgroundColor (Color, Default: #ffffff) - Background color of the tooltip.
textColor (Color, Default: #1f2937) - Text color within the tooltip.
Configures tooltip text styles.
titleFont (FramerFont, Default: {}) - Typography settings for the tooltip title.
descriptionFont (FramerFont, Default: {}) - Typography settings for the tooltip description.
Controls the appearance of the button in tooltips.
show (Boolean, Default: true) - Whether to display the call-to-action button.
textColor (Color, Default: #ffffff) - Text color of the button.
font (FramerFont, Default: {}) - Typography settings for the button text.
