> For the complete documentation index, see [llms.txt](https://webvista-studio.gitbook.io/krank/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webvista-studio.gitbook.io/krank/sections/product-and-collection/hotspot-banner.md).

# Hotspot Banner

The **Hotspot Banner** module allows you to mark specific product hotspots on an image and provide quick links to guide users to the related products. It is ideal for displaying scene images with multiple products, allowing users to click on hotspots to navigate directly to the corresponding product detail page.

***

### 🎨 **Color Scheme**

* Choose or customize the banner’s color scheme, including background, text, and buttons.
* Recommendation: Match your brand’s primary colors to maintain a consistent visual identity.

### 🖼 **Image Settings**

* **Upload Image**: Click the upload button to select a scene image.
* **Image Ratio**: Options include Auto, 8:5, 16:9, and 20:9. Adjust based on page layout and device display needs.
* **Full-Width Display**: Enable full-width mode to make the banner span the entire screen width.

### 🧱 **Block Settings**

* **Hotspot Configuration**
  * Click “Add Hotspot” to mark product positions on the image.
  * Adjust the horizontal and vertical position of each hotspot to precisely cover the product.
  * Each hotspot can be linked to a specific product; clicking it navigates users to that product’s detail page.
* **Select Hotspot Product**
  * Assign a product to each hotspot.
  * The system will automatically generate the redirect link.

### 📱 **Mobile**

* The banner supports responsive layouts and adapts to mobile devices.
* Ensure hotspots are properly positioned across different screen sizes for accurate interaction.

### ✅ **Usage Recommendations**

* Ideal for displaying scene images with multiple products.
* Combine with call-to-action buttons or text to increase click-through rates and conversions.
* Keep the number and placement of hotspots reasonable to avoid overcrowding or overlap.