Setting The Background

What You’ll Learn

🖼️ How to upload a background for your Interactive Space 📐 Recommended dimensions and aspect ratios 🎯 Tips for centering, resizing, and mobile optimization


1. Open the Background Block

  1. In the Theme Editor, go to the page with your Interactive Space

  2. In the left sidebar, expand the Interactive Space section

  3. Click the Background block

This is the canvas where all your interactive points and arrows will sit.


2. Upload a Background Image

Click Select image to upload a new background.

⚠️ Important: Your background must be in a 16:9 aspect ratio for best layout and alignment.

  • 1280 × 720 (HD)

  • 1920 × 1080 (Full HD)

  • 2560 × 1440 (2K)

  • 3840 × 2160 (4K)

💡 Use a design tool like Figma, Photoshop, or Canva to create an image with the correct aspect ratio. This prevents stretching or cutoff issues on different devices.


3. Mobile Responsiveness

The image will auto-scale for mobile but:

  • Avoid placing critical hotspots near the edge

  • Test your design on both desktop and mobile in the Theme Editor

🧪 Save and refresh if things look off-center — the layout recalibrates after saving.


4. Multiple Interactive Spaces?

Each Interactive Space page can have its own unique background. Just assign the right image in each page's Interactive Space section.

💡 This is great for building themed “rooms” or categories (e.g. one space for men’s products, one for women’s, etc.)


Need Help?

  • 💬 Join our community on Discord: https://discord.gg/hcc2GvgZc6

  • 📧 Email us at: support@openspaces.design

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

Last updated