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
Open Theme Customizer
Navigate to Online Store → Themes
Click Customize on Plain Jane Interactive
Select Interactive Environment Section
Click on your Interactive Environment section
Scroll down to Interactive Points
Add New Point
Click Add interactive point
A new point configuration will appear
Step 2: Configure Point Content
Product-Based Points
Select Product
Click Select product
Choose from your store's product catalog
Product title, price, and image will auto-populate
Override Options
Custom title: Override the product name
Custom description: Add specific details
Show price: Toggle price display on/off
Custom Link Points
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
X Position (Horizontal)
Value range: 0-100%
0% = Far left edge
50% = Center
100% = Far right edge
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
Pulse (Default)
Animated pulsing circle
Great for drawing attention
Subtle movement catches the eye
Plus Icon
Clean "+" symbol
Minimal and modern
Good for professional/corporate themes
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
Feature Key Products
Highlight best-sellers or new arrivals
Focus on high-margin items
Create logical product groupings
Natural Positioning
Place points on or near actual products in the image
Avoid empty space or random placement
Consider the viewer's eye path
Balanced Distribution
Don't cluster all points in one area
Create visual rhythm across the space
Leave breathing room between elements
Content Strategy
Compelling Copy
Use action-oriented language
Highlight unique features or benefits
Keep text concise and scannable
Pricing Strategy
Show prices for immediate transparency
Use sale prices to create urgency
Consider hiding prices for luxury items
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
Last updated