# How to Create an Interactive Space

The Interactive Space feature is unique to Plain Jane Interactive and allows you to create immersive, clickable environments where customers can explore products in context.

## 🌟 Overview

Interactive Spaces transform static product displays into engaging, explorable environments. Perfect for:

* Room settings and lifestyle shots
* Product showcases in natural environments
* Immersive brand storytelling
* Interactive lookbooks

## 📋 Setting Up Your Interactive Space

### Step 1: Add the Interactive Environment Section

1. **Navigate to Theme Customizer**
   * Go to **Online Store → Themes**
   * Click **Customize** on your Plain Jane Interactive theme
2. **Add Interactive Environment Section**
   * Click **Add section**
   * Select **Interactive Environment**
   * Choose your desired location on the page

### Step 2: Configure Your Background

1. **Upload Background Image**
   * Click on the **Interactive Environment** section
   * Under **Background**, click **Select image**
   * Choose a high-resolution image (recommended: 1600x900px or larger)
   * The image should show a scene where products can be naturally placed
2. **Background Settings**
   * **Image fit**: Choose how the image fills the container
     * `Cover`: Fills container, may crop image
     * `Contain`: Shows full image, may leave empty space
   * **Background position**: Set the focal point of your image

### Step 3: Add Interactive Points

Interactive points are clickable hotspots that reveal product information or links.

1. **Create Your First Point**
   * In the section settings, scroll to **Interactive Points**
   * Click **Add interactive point**
2. **Configure Point Settings**
   * **Product**: Link to a specific product from your store
   * **Position X**: Horizontal position (0-100%)
   * **Position Y**: Vertical position (0-100%)
   * **Point style**: Choose visual appearance
     * `Pulse`: Animated pulsing dot
     * `Plus`: Simple plus icon
     * `Dot`: Minimal dot indicator
3. **Point Content**
   * **Custom text**: Override product title if needed
   * **Custom link**: Use external link instead of product
   * **Price display**: Show/hide product pricing

## 🎯 Best Practices

### Image Selection

* Use high-quality, well-lit photography
* Ensure good contrast between products and background
* Consider mobile viewing - avoid overly complex scenes
* Recommended minimum resolution: 1200x675px

### Point Placement

* Place points directly on or near featured products
* Avoid clustering too many points in one area
* Test on mobile devices for touch-friendliness
* Use consistent point styles throughout the space

### Content Strategy

* Feature your best-selling or newest products
* Create themed environments (bedroom, kitchen, office)
* Tell a story through product placement
* Keep text concise and compelling

## 📱 Mobile Optimization

The interactive space automatically adapts for mobile devices:

* Touch-friendly point sizes
* Responsive image scaling
* Optimized animations for performance
* Simplified interactions for small screens

## 🎨 Styling Options

### Point Appearance

* **Pulse animation**: Draws attention with subtle movement
* **Color customization**: Match your brand colors
* **Size options**: Adjust for image scale and visibility

### Overlay Styles

* **Product cards**: Rich product information display
* **Minimal tooltips**: Clean, simple product info
* **Custom styling**: Advanced CSS customization options

## 🔧 Troubleshooting

### Points Not Showing

* Check that Position X and Y values are between 0-100
* Ensure the product is published and available
* Verify the section is enabled in theme settings

### Mobile Display Issues

* Test point spacing on various screen sizes
* Adjust point sizes for touch targets (minimum 44px)
* Consider reducing number of points for mobile

### Performance Optimization

* Optimize background images (use WebP format when possible)
* Limit to 8-10 interactive points per section
* Use lazy loading for better page speed

## 💡 Creative Ideas

### Room Settings

Create realistic room environments showing how products look in use:

* Living room with furniture and decor
* Kitchen with appliances and accessories
* Bedroom with bedding and lighting

### Product Collections

Group related products in natural settings:

* Outfit combinations on models
* Tool collections in workshop settings
* Beauty products in vanity arrangements

### Seasonal Displays

Update interactive spaces for holidays and seasons:

* Holiday gift guides
* Summer outdoor collections
* Back-to-school essentials

## 📊 Analytics and Performance

Track the effectiveness of your interactive spaces:

* Monitor click-through rates on interactive points
* Track conversions from interactive space to product pages
* Use Shopify analytics to measure engagement
* A/B test different point placements and styles


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.openspaces.design/plain-jane-interactive/sections-and-features/how-to-create-an-interactive-space.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.