I. Component Overview
The product heatmap component is used to mark multiple clickable hotspots on a product image. Clicking on a hotspot displays the name, description, and details link of that part. It is suitable for scenarios such as product selling point breakdown, equipment component description, and factory scene introduction.
The component offers two display styles:
- Standard style : A hotspot overlays the product image; clicking it pops up a floating explanatory card. Supports three layouts: full width, standard container, and half width two-column layout (image and text). Suitable for product showcase pages and homepage banner areas.
- Two-way interactive design : The left side features a heated image, while the right side displays a fixed explanatory text panel. Clicking on the heated area synchronizes the content on the right. Suitable for industrial products and equipment categories, recommended when there is a lot of selling point information.
II. Backend Operation Process
2.1 Adding Components
- Access the editing interface of the target page in the SX-Creval backend.
- In the content area, click "Add", find the "Product Heatmap" group in the component list, and select "Product Heatmap Component".
- After expanding the component, fill in the following information from top to bottom: Title and Description → Hotspot Style → Pop-up Style → Component Settings → Background Settings → Hotspot List.
- After clicking "Save Draft", click "Preview" to confirm the effect. Once you are satisfied, click "Publish".
2.2 Obtaining hotspot coordinates (coordinate picker)
Hotspot locations are represented by percentage coordinates of the image (X: 0 for leftmost, 100 for rightmost; Y: 0 for topmost, 100 for bottommost). The system has a built-in coordinate picking tool; the operation steps are as follows:
- After filling in the product image and at least one hotspot, click "Save Draft" and then click "Preview" to open the preview window.
- On the preview page, when you move the mouse over the product image, the cursor will change to a crosshair.
- Clicking on the target location will bring up a coordinate tooltip that displays the X and Y percentage values for that location.
- Clicking the prompt box will automatically copy the coordinates to the clipboard, and the prompt box will briefly display "Copied".
- Return to the backend editing page, enter the X value (remove the % symbol) into the "X-axis position" field of the hotspot, and enter the Y value into the "Y-axis position" field.
The coordinate picker is only available in preview mode; the coordinate tooltip will not be displayed on the officially released page. It is recommended to re-pick the coordinates after each product image change, as image size changes can cause the original coordinates to shift.
III. Configuration Field Description
3.1 Title and Description
The overall title area at the top of the component.
- Small label : A decorative small label above the title, such as "PRODUCT". Can be left blank.
- Title : Main title, preferably within 10 characters.
- Description : Supplementary explanation below the title, recommended to be no more than 60 words.
- Alignment : Left-aligned / Center-aligned / Right-aligned. Center-aligned is recommended for full-width mode, and left-aligned is recommended for half-width mode.
- Title color/Description color : Text color; white is recommended for dark backgrounds.
3.2 Hotspot Styles
控制图片上热点标记圆点的外观，所有热点共用同一样式。
- Hotspot style :
- Classic Pulse: A solid center dot with a transparent animated circle radiating outwards; this is the most commonly used pulse.
- Concentric rings: Three concentric circles, with a slow breathing animation on the outer layer.
- Soft halo: It has a blurred halo effect, making the visual effect softer.
- Star trail circle: The outer dotted circle rotates continuously, emphasizing a sense of technology.
- Numbers: Display hotspot numbers (1, 2, 3...), best used in conjunction with two-way linked styles.
- Hotspot primary color : The main color of the hotspot, affecting the color of the animation circle, border, and center point. Default is blue #3573FF.
- Hotspot size : Small (20px) / Medium (28px) / Large (36px). Select "Small" for smaller images and "Medium" or "Large" for larger images.
3.3 Pop-up Style
Control the appearance of the instruction card that pops up after clicking on a hotspot. In two-way interactive styles, some fields also affect the display of the instruction panel on the right.
- Background styles : Solid color background / Glass mimicry / No background. Glass mimicry offers a semi-transparent frosted effect, which looks good when paired with complex background images, but the text color needs to be adjusted to ensure readability.
- Pop-up background color : The background color of the pop-up layer. Solid color mode uses the fill color, while glass mode uses it in conjunction with transparency.
- Transparency (glass effective) : Integer between 10 and 100, effective only in glass mimicry mode. Recommended range: 40-70.
- Blur (glass effective) : Slight/Standard/Medium/Strong/Strong, effective only in glass mimicry mode.
- Text color : The color of all text within the pop-up layer.
- Show border : On/Off. When on, a pop-up layer displays a thin border.
- Shadow : None / Standard / Large / Extra Large. It is recommended to use "Extra Large" by default to enhance the sense of depth.
- Pop-up width : Narrow (192px) / Standard (256px) / Wide (320px). Select "Wide" when there is a lot of descriptive text.
- Display Number (Two-Way Linkage) : On/Off, only effective for two-way linked styles. When on, the large size serial number 01, 02... will be displayed to the left of the title in the right-hand description panel.
- Small label (two-way linkage) : Only valid for two-way linkage styles. It is a decorative label displayed at the top of the right-hand description panel, such as "FEATURE FOCUS". It can be left blank.
3.4 Component Settings
Control the overall layout structure, product drawings, and connecting lines.
- Display styles : Standard style / Two-way linkage. The rendering structures of the two styles are different; the layout effect needs to be checked again after switching.
- Main Image : The main product image, with key information highlighted on this image. It is recommended to upload an image with a width of at least 1200px, or 1920px, in WebP or JPG format.
- Display connection line : On/Off. When on, a dashed line is drawn between the hotspot circle and the pop-up layer to help users understand the corresponding relationship.
- Connecting line color : The color of the connecting dotted line should ideally match the main color of the hotspot.
- Connection direction (pop-up position) : Left/Right. This controls whether the pop-up appears to the left or right of the hotspot. This setting is global and shared by all hotspots. For hotspots closer to the left edge of the image, it is recommended to select "Right," and for those closer to the right edge, it is recommended to select "Left."
- Connector length (px) : The pixel distance from the edge of the hotspot to the edge of the pop-up layer. Recommended size is 60-120px, default is 100px.
- Default hotspot number to expand : The hotspot number that will be activated by default after the page loads, starting from 1.
- Container width :
- Full width: The image fills the entire width of the browser window.
- Standard container: The image is centered with standard inner margins on both sides, suitable for most scenarios.
- Half-width: Only valid for standard styles. The image occupies the right half of the column, while the title and text are displayed in the left half, forming a two-column layout with both image and text.
- Pop-up corner rounded edges : No rounded edges / Small / Medium / Large / Full rounded edges. It is recommended to maintain consistency with the overall website design style.
3.5 Background Settings
The background of the entire component block, located below the product image and hotspot hierarchy. You can set a solid color, gradient color, or background image, or leave it blank to use the page's default background. This configuration area is for general components; please refer to the " General Animation Class Documentation " for details.
3.6 Animation Settings
This field controls the entrance animation when the component enters the viewport. It is optional; leave it blank if no animation is needed. Please refer to the Background Group documentation for details.
3.7 Hotspot List
逐个配置每一个热点，每个热点包含以下字段：
- Hot Topic Title/Component Name (Required): The main title of the pop-up layer, and also the main title of the description panel on the right side of the two-way linked style. It is recommended to keep it to no more than 15 characters.
- Brief Description/Selling Points (Optional): The main text description in the pop-up layer or the right-hand description panel, recommended to be 1-2 sentences, not exceeding 60 words.
- X-axis position (0-100%) (required): The horizontal position of the hot spot on the product image. It is recommended to obtain it through a coordinate picker.
- Y-axis position (0-100%) (required): The vertical position of the hot spot on the product image. It is recommended to obtain it through a coordinate picker.
- Details page link (optional): Link to an internal page. After filling in the details, a "Learn more" link will be displayed at the bottom of the pop-up.
The hotspot list supports drag-and-drop sorting. The numbering of the "Number" hotspot style and the "Show Number" function on the right is determined by the list order, with the first item being 1, and so on. To adjust the numbering, simply drag the hotspot item to the corresponding position.
IV. Description of the two styles
4.1 Standard Styles (Full Width/Half Width)
- After the page loads, the hotspot corresponding to "default expand number n hotspot" will automatically expand into a pop-up layer.
- Clicking on another hotspot will close the current pop-up and open the new hotspot pop-up, with the connection lines updating synchronously.
- There is a close button in the upper right corner of the pop-up; clicking it will close all pop-ups.
- The pop-up appears to the left or right of the hotspot, controlled by the "Connector Direction" field.
- When the container width is set to "half-width", the page is divided into two columns: the left column contains the title text, and the right column contains product images and trending topics. The title is no longer displayed above the image. Therefore, the standard design actually has two layout styles.
4.2 Two-way linkage style
- The layout is fixed as left image and right text: the left side has 7 columns for product images and the right side has 5 columns for descriptions. On mobile devices, it automatically switches to a top-bottom layout.
- After the page loads, the content corresponding to the default active hotspot is displayed in the description bar on the right.
- After clicking on a hotspot, the description bar on the right will smoothly transition to the corresponding content through a fade-in animation.
- 同一时刻只有一个热点处于激活状态（高亮加轻微放大），没有关闭逻辑，始终保持一个激活。
- The "Half-width" option in "Container Width" is not valid for this style; both full-width and standard containers are valid.
V. Frequently Asked Questions
The hotspot location does not correspond to the image; there is an offset.
The coordinates are percentages relative to the product image itself, not screen coordinates. Please ensure that you are clicking on the product image area itself in the coordinate picker. If the image size or container width configuration changes, you need to re-select the coordinates.
The pop-up layer is cropped by the image edges and is not displayed completely.
Move the coordinates of the corresponding hotspot towards the center of the image, or switch the "connector direction" to make the pop-up layer appear on the side with more space inside the image. Note that the connector direction is a global configuration; switching it will change the direction of the pop-up layer for all hotspots. If you are using half-width or bidirectional linkage mode, it is recommended to remove the connector to avoid the pop-up layer being cropped.
The front-end page did not update after the content was modified.
Please ensure you have clicked "Publish" and not just saved the draft. Only logged-in users can preview the latest content in draft mode; regular visitors will see the previously published version.
Hotspot quantity suggestion
It is recommended to limit the number of standard styles to no more than 6, as too many hotspots can cause pop-up layers to overlap. For two-way interactive styles, it is recommended to limit them to 5 or fewer, as carefully selected selling points are more persuasive than quantity.
Can different colors be set for different hotspots?
Hotspot colors are set globally at the component level, and all hotspots share the same color. The current version does not support independent color schemes for individual hotspots.
SX-Creval / Luoyang Shangxian Technology | Creating Value, Long-Term Cooperation. This document is updated with product iterations. If the content differs from the actual backend, the actual backend shall prevail.