Hotspot banner

Overview:

The Hotspot Banner section allows you to display up to two banner images with interactive product hotspots. These hotspots link to products and display media, titles, and pricing in a scrollable layout next to the banner.

Section Configuration:

Setting	Description
Caption	Optional text shown above the heading.
Caption Size	Controls the font size of the caption.
Caption Weight	Sets the font weight of the caption.
Heading	Main heading for the section.
Heading Size	Sets the font size of the heading.
Heading Weight	Sets the font weight of the heading.
First Image	Image for the left or top banner (depending on layout).
Second Image	Image for the right or bottom banner.
Show Add to Cart Button	Toggles the visibility of the "Add to Cart" button on product hotspots.
Content Order	Determines image placement: either image first (row) or content first (row-reverse).
Text Alignment (Desktop)	Horizontal alignment of text on desktop.
Text Alignment (Mobile)	Horizontal alignment of text on mobile.
Container Layout	Controls the section width: Page Width, Contained Content, or Full Width.
Corner Radius	Applies a corner radius style to the section background.
Color Scheme	Applies a predefined color scheme to the section.
Top Padding	Adds spacing above the section (0–100px).
Bottom Padding	Adds spacing below the section (0–100px).

Blocks Configuration:

Block: Hotspot

Each Hotspot block creates an interactive marker on one of the two banner images, linked to a product.

Setting	Description
Product	Product associated with the hotspot.
Item Index	Indicates which banner to place the hotspot on: "1" for first image, "2" for second image.
Color Scheme	Applies a color scheme to the individual hotspot.
Top Position	Controls vertical positioning of the hotspot (0–90%).
Left Position	Controls horizontal positioning of the hotspot (0–90%).

💡 Hotspots animate with a glow effect when active or hovered.