Appearance

Hotspot Banner ​

What This Section Does ​

Add clickable hotspots to any image that reveal additional information when customers click or hover over them. These animated plus icons draw attention to specific areas of your image and provide detailed explanations without cluttering the visual presentation.

Perfect for:

  • Product detail images showing features and benefits
  • Lifestyle photos highlighting multiple products in a scene
  • Room setups or outfit displays with clickable product information
  • Educational content that explains different parts or components

How to Add It ​

Step 1: Add the Section

  1. In your Shopify admin, go to Online Store → Themes
  2. Click Customize next to your live theme
  3. Click Add section in your main content area
  4. Choose Hotspot Banner from the list

Step 2: Set Up Your Image and Hotspots

  1. Upload your main image (lifestyle photo, product scene, etc.)
  2. Click Add hotspot to create your first interactive point
  3. Position the hotspot by adjusting the X and Y coordinates
  4. Add a title and description for what the hotspot explains
  5. Repeat for additional hotspots (3-5 usually work best)

Key Settings to Configure ​

Hotspot Positioning ​

Where hotspots appear: Place them strategically on your image

  • Coordinate system: Use percentage values to position hotspots (0-100% from left/top)
  • Visual targets: Place hotspots directly on or near the features you want to highlight
  • Spacing consideration: Keep hotspots far enough apart that they don't overlap or crowd each other
  • Pro tip: Preview on mobile to ensure hotspots are positioned well on smaller screens

Content Strategy ​

What information to include: Make hotspots valuable and informative

  • Descriptive titles: Use clear, specific names like "Waterproof Material" or "Hidden Pocket"
  • Helpful details: Include information that helps customers understand benefits or features
  • Product links: Consider including links to specific products shown in the image
  • Best practice: Keep descriptions concise but informative - customers will scan quickly

Mobile Experience ​

Responsive behavior: Choose how hotspots work on small screens

  • Accordion option: On mobile, show hotspots as an expandable list below the image
  • Direct hotspots: Keep hotspots clickable directly on the mobile image
  • User experience: Accordion format often works better on mobile since hotspots can be hard to tap accurately

Pro Tips for Success ​

Best Practices

  • Use high-quality lifestyle images that naturally show multiple features or products
  • Limit to 3-5 hotspots to avoid overwhelming the image
  • Write hotspot descriptions that provide genuine value and detail
  • Test hotspot positioning on both desktop and mobile devices
  • Use the accordion option for mobile if you have many hotspots

Common Mistakes

  • Placing too many hotspots that make the image feel cluttered
  • Using vague or unhelpful hotspot descriptions
  • Positioning hotspots too close together, especially on mobile
  • Forgetting to test how hotspots look and function on smaller screens
  • Using low-quality images that don't showcase products or features clearly