Banner with hotspots

Create engaging and interactive banners with clickable points (hotspots) that provide additional details about your products, features, or other relevant information.

#How to add a Banner with hotspots section to your Shopify store

#How to customize a Banner with hotspots section

#Section settings

#Section header

Customize the text and alignment to ensure the banner effectively communicates your message and encourages engagement.

#Banner settings

Configure the visual and functional elements of your banner, including the background images, hotspot icons, and additional details.

• Image and Mobile image: You can upload different images for desktop and mobile view separately.
• Icon style: Choose the apprearance of the hotspot icon.

• Icon color: Customize the color of the icons based on the banner’s background:
  • Light: Ideal for darker images.
  • Dark: Perfect for lighter backgrounds.

#Block settings

Configure individual hotspots within the Banner with Hotspots section. Each hotspot is customizable, enabling you to provide additional context or highlight specific features on the banner.

#General settings

• Image: Upload an optional image to represent the content in the hotspot pop-up card.

#Content settings

• Heading: Enter a concise title for the hotspot.
• Description: Add a brief description to provide more information about the feature or product.

#Hotspot positioning

• Vertical alignment: Adjust the vertical position of the hotspot on the banner. The slider allows precise placement.

Example: Set to 50% to align the hotspot at the middle of the banner vertically.

• Horizontal alignment: Adjust the horizontal position of the hotspot.

#Hotspot on mobile

You can adjust the position of the hotspots when a mobile image is selected.