How to Create an Interactive Space

What You’ll Learn

🛠️ How to add the Interactive Space section 🖼️ How to upload your background image 🎯 How to position your space for immersive layouts

---

1. Add the Interactive Space Section

You can only use one Interactive Space section per page.

To add:

1. Go to Online Store > Customize

2. Open the page you want to edit (e.g. Homepage)

3. Click Add section

4. Choose Interactive Space

⚠️ If one already exists, it won’t show up in the section list again.

---

2. Upload Your Background Image

This is the image your shoppers will interact with.

To add it:

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

2. Click the Background block

3. Upload your image

4. Use a 16:9 ratio for best results:

   • 1920 x 1080 (HD)

   • 2560 x 1440 (Hi-DPI)

   • 3840 x 2160 (4K)

💡 Save and refresh after uploading. Sometimes positioning auto-corrects on reload.

---

3. Customize Basic Layout Settings

Click the Interactive Space section (not the blocks) to access global settings:

• Logo – Optional logo shown in top-left

• Logo Size (px) – Resize the uploaded logo

• Show Logo on Interactive Page – Toggle visibility

• Show Swipe Gesture (Mobile) – Adds swipe cue for mobile

• Spacing – Add margin to top/bottom (desktop and mobile)

---

4. Optional: Use on a Dedicated Page

Want this on a separate page instead of your homepage?

1. Go to Online Store > Pages

2. Click Add Page

3. Name it (e.g. “Women’s Room” or “Fall Collection”)

4. Under Theme Template, choose:

   • space-2, space-3, etc. up to space-7

5. Click Save

Then:

• Go to Customize

• Load your new page using the dropdown

• Add the Interactive Space section

🔗 Use menus or transition arrows to link between interactive pages.

Need Help?

• 💬 Join our community on Discord: https://discord.gg/hcc2GvgZc6
• 📧 Email us at: [e-mail]

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