Openspaces Labs
  • 🏠 Getting Started
    • Installing the Plain Jane Theme
    • Theme Versions + Features Table
  • 🧰 Theme Settings
    • Announcement Bar
    • Animations
    • Cart Drawer
    • Clock Settings
    • Collection Layout Settings
    • Cursor Settings
    • Footer Settings
    • Global Menu Settings
    • Music Player Settings
    • Logo Settings
    • Skip Home Screen
    • SEO Settings
    • Main Theme Color
    • Typography Settings
  • 🗂 Pages & Menus
    • Homepage + Menu
      • Center Menu
      • Side-Aligned Menu
      • Compact Menu Layout (Global Menu)
    • Collection Page
      • Classic Collection
      • Sidebar Collection
    • Collection List Page
    • Product Page
      • Product Section (Showcase)
      • Product Section (Thumbnail)
    • About Page
    • Contact Page
    • Lookbook Page
      • 🛠 How to Create a Lookbook Page
      • 🗂 Creating a Lookbook Archive
      • ⚙️ Lookbook Settings & Features
    • Password Page
      • How To Password Lock Store
      • How To Add and Set Timer
      • How To Collect Emails + SMS
      • Using The Store Unlock Animation
  • 🧩Sections and Features
    • Blog Feed Section
    • Collection Display Section
    • Collection List Section
    • Email Signup (Popup)
    • Email Signup (Embed)
    • FAQ Section
    • Hero Section
    • Image Selector Section
    • Image Stream Section
    • Marquee Section
    • Preloader Section
    • Product Carousel Section
    • Text Block Section
    • Video Spotlight Section
  • 🏷️Advanced
    • How to Add Size Charts to Each Product
    • Setting Up Color Swatches
    • Setting Up Model Info
    • Setting Up Pre-Orders
  • 👥Customer Accounts
    • How To Setup Customer Accounts
    • Login Page
    • Register Page
    • Account Dashboard Page
    • Address Management Page
  • 🌎Languages & SEO
    • Language Files (Locales)
    • Update Favicon
    • Meta Descriptions
  • ⭐️Plain Jane Interactive
    • How to Create an Interactive Space
    • Setting The Background
    • Adding Interactive Points
    • Using Transition Arrows
    • Best Practices for Mobile + Spacing
  • 💬 FAQ & Troubleshooting
Powered by GitBook
On this page
  • What You’ll Learn
  • 1. Add an Interactive Point Block
  • 2. Customize the Point Settings
  • 3. Add a Link to Your Point
  • 4. Add as Many Points as You Need
  • Need Help?
  1. ⭐️Plain Jane Interactive

Adding Interactive Points

What You’ll Learn

📍 How to add Interactive Points to your space 🎨 How to customize the design of each point 🔗 How to link products, collections, or pages


1. Add an Interactive Point Block

  1. In the Theme Editor, open the page with your Interactive Space section

  2. In the left sidebar, expand Interactive Space

  3. Click Add block

  4. Select Interactive Point

Each point becomes a clickable marker your visitors can interact with.


2. Customize the Point Settings

Click your new Interactive Point block to access these settings:

🔠 Dialog Box Title

  • This is the text that appears when users hover or tap

  • Example: Blow Tee or Shop Outerwear

🎨 Color Settings

  • Point Color – The main circle color

  • Dialog Box Color – The background behind the text

  • Dialog Words Color – The text color in the dialog

  • Ring Pulse Color – The animated pulse ring

🔢 Coordinates

Use X Coordinate and Y Coordinate to position your point:

  • X moves the point left or right

  • Y moves it up or down

💡 A good range is between 0 and 100, but you can go beyond for off-canvas effects.


3. Add a Link to Your Point

Use the Link field to send users anywhere you want:

  • 🛍️ Product or Collection

  • 📃 Page or Blog

  • 🔗 External site (just paste a full URL)

To link to a product or collection:

  1. Click the link icon

  2. Choose from the dropdown

  3. Or paste in the full URL manually

⚠️ Don't forget to test your link in a new tab to make sure it works.


4. Add as Many Points as You Need

There’s no limit to how many Interactive Points you can add.

To keep things clean:

  • Avoid overlapping points

  • Don’t overcrowd the image (especially on mobile)

💡 Tip: Use unique colors for different types of products or categories.


Need Help?

  • 📧 Email us at: support@openspaces.design

  • 💻 Live chat with us: Available Monday–Friday, 10AM–6PM EST, directly on our website

PreviousSetting The BackgroundNextUsing Transition Arrows

Last updated 4 days ago

💬 Join our community on Discord:

https://discord.gg/hcc2GvgZc6