Adding Interactive Points

Interactive points are the clickable hotspots that make your Interactive Spaces come alive. This guide covers everything you need to know about creating, positioning, and styling these interactive elements.

🎯 What Are Interactive Points?

Interactive points are clickable areas overlaid on your background image that reveal product information, links, or custom content. When visitors hover or click these points, they see:

• Product details and pricing

• Quick add-to-cart options

• Links to product pages

• Custom text or call-to-action messages

🛠️ Adding Your First Interactive Point

Step 1: Access Point Settings

1. Open Theme Customizer

   • Navigate to Online Store → Themes

   • Click Customize on Plain Jane Interactive

2. Select Interactive Environment Section

   • Click on your Interactive Environment section

   • Scroll down to Interactive Points

3. Add New Point

   • Click Add interactive point

   • A new point configuration will appear

Step 2: Configure Point Content

Product-Based Points

1. Select Product

   • Click Select product

   • Choose from your store's product catalog

   • Product title, price, and image will auto-populate

2. Override Options

   • Custom title: Override the product name

   • Custom description: Add specific details

   • Show price: Toggle price display on/off

Custom Link Points

1. Enable Custom Link

   • Toggle Use custom link to ON

   • Enter your destination URL

   • Add custom title and description

Step 3: Position Your Point

Visual Positioning

1. X Position (Horizontal)

   • Value range: 0-100%

   • 0% = Far left edge

   • 50% = Center

   • 100% = Far right edge

2. Y Position (Vertical)

   • Value range: 0-100%

   • 0% = Top edge

   • 50% = Middle

   • 100% = Bottom edge

Positioning Tips

• Use preview mode to see point placement in real-time

• Fine-tune with small increments (1-2% adjustments)

• Test on different screen sizes to ensure proper placement

🎨 Styling Your Points

Point Appearance Options

Style Types

1. Pulse (Default)

   • Animated pulsing circle

   • Great for drawing attention

   • Subtle movement catches the eye

2. Plus Icon

   • Clean "+" symbol

   • Minimal and modern

   • Good for professional/corporate themes

3. Dot

   • Simple circular indicator

   • Most subtle option

   • Blends naturally with images

Color Customization

• Primary color: Main point color

• Secondary color: Accent or pulse color

• Text color: Content overlay text

• Background color: Point background

Size and Visibility

• Point size: Adjust diameter (default: 40px)

• Pulse intensity: Control animation strength

• Opacity: Set point transparency

• Z-index: Layer order (higher = more prominent)

📱 Mobile Considerations

Touch-Friendly Design

• Minimum size: 44px for easy tapping

• Spacing: At least 8px between points

• Contrast: Ensure points are visible on mobile

Mobile-Specific Settings

• Show on mobile: Toggle point visibility

• Mobile size multiplier: Adjust size for small screens

• Simplified animations: Reduce motion for performance

🔧 Advanced Point Configuration

Hover Effects

/* Custom hover animations */
.interactive-point:hover {
  transform: scale(1.2);
  transition: transform 0.3s ease;
}

Custom Content Overlays

• Rich text formatting: Use HTML in descriptions

• Image overlays: Add product images to tooltips

• Video content: Embed product videos

• Social proof: Include reviews or ratings

Conditional Display

• Show/hide based on device: Mobile vs desktop

• Time-based display: Seasonal or promotional content

• User behavior: Show different content for return visitors

💡 Best Practices

Strategic Placement

1. Feature Key Products

   • Highlight best-sellers or new arrivals

   • Focus on high-margin items

   • Create logical product groupings

2. Natural Positioning

   • Place points on or near actual products in the image

   • Avoid empty space or random placement

   • Consider the viewer's eye path

3. Balanced Distribution

   • Don't cluster all points in one area

   • Create visual rhythm across the space

   • Leave breathing room between elements

Content Strategy

1. Compelling Copy

   • Use action-oriented language

   • Highlight unique features or benefits

   • Keep text concise and scannable

2. Pricing Strategy

   • Show prices for immediate transparency

   • Use sale prices to create urgency

   • Consider hiding prices for luxury items

3. Call-to-Action Optimization

   • Clear, specific CTAs ("Shop Now", "Learn More")

   • Create urgency when appropriate

   • Match CTA style to your brand voice

🎪 Creative Implementation Ideas

Seasonal Campaigns

• Holiday Collections: Interactive gift guides

• Summer/Winter: Seasonal product showcases

• Back-to-School: Student essentials in dorm settings

Lifestyle Integration

• Room Makeovers: Before/after with shoppable products

• Outfit Builders: Complete look coordination

• Recipe Integration: Kitchen tools in cooking contexts

Brand Storytelling

• Behind-the-Scenes: Production process with tool highlights

• Brand Heritage: Historical timeline with product evolution

• Sustainability: Eco-friendly product features

📊 Performance Optimization

Loading Considerations

• Image optimization: Compress background images

• Point limits: Maximum 10-12 points per section

• Lazy loading: Load points as they come into view

Analytics Integration

// Track point interactions
function trackPointClick(productId, pointPosition) {
  // Send to analytics platform
  gtag('event', 'interactive_point_click', {
    'product_id': productId,
    'position_x': pointPosition.x,
    'position_y': pointPosition.y
  });
}

🐛 Troubleshooting

Common Issues

Points Not Displaying

• Check positioning values: Must be 0-100%

• Verify product status: Ensure products are published

• Section visibility: Confirm section is enabled

Mobile Display Problems

• Touch target size: Increase point size for mobile

• Viewport issues: Test on various device sizes

• Performance: Reduce animations on slow devices

Content Overlap

• Z-index conflicts: Adjust layer ordering

• Tooltip positioning: Configure overlay placement

• Responsive breakpoints: Set different positions for different screens

Performance Issues

• Slow loading: Optimize images and reduce point count

• Animation lag: Simplify effects or disable on mobile

• Memory usage: Implement lazy loading for large sections

🔍 Testing and Optimization

A/B Testing Ideas

• Point placement: Test different positions

• Visual styles: Compare pulse vs. static points

• Content types: Product info vs. custom messages

• Color schemes: Test brand colors vs. contrasting colors

Metrics to Track

• Click-through rates: Point clicks to product page visits

• Conversion rates: Purchases from interactive points

• Engagement time: Time spent interacting with points

• Mobile vs. desktop: Performance differences by device