Using Transition Arrows
What You’ll Learn
↔️ How to add arrows between Interactive Spaces 🎯 How to customize arrow labels, size, and style 🔗 How to link arrows to other Interactive pages
1. Add a Transition Arrow Block
In the Theme Editor, open a page with an Interactive Space
In the left sidebar, expand the Interactive Space section
Click Add block
Select Transition Arrow
Each arrow acts as a “room-to-room” navigation point.
2. Customize the Arrow
Click your new Transition Arrow block to configure:
↔️ Direction
Left or Right – which side of the screen the arrow appears on
Adjust this based on how you want users to “travel” through your store
🏷️ Label Text
What shows inside the arrow
Example:
MEN’S,WOMEN’S,NEXT,BACK
🎨 Style Options
Background Color – Fill color of the arrow
Border Color – Outline color
Word and Arrow Color – Text and arrow icon
Transparent Options – Make background or border see-through
📏 Arrow Dimensions
Width – Controls how long the arrow label stretches (e.g.
150)Use trial-and-error to match other arrows across pages
3. Position the Arrow with Coordinates
Just like with Interactive Points:
Use X Coordinate to move the arrow left or right
Use Y Coordinate to move it up or down
💡 To match arrow positions across pages, copy the X/Y values from one page and paste into another.
4. Link the Arrow to Another Page
Use the Link field to connect this arrow to another space:
Choose from your Interactive Space pages
Or manually paste in the URL
Example:
/pages/space-2⚠️ Make sure the destination page has the correct template (
space-2,space-3, etc.) assigned.
5. Test Your Navigation
Click Save 🖱️
Open your store on the live site
Click the arrow and confirm it moves to the correct page
💡 Tip: Use arrow labels like
← MEN’SandWOMEN’S →for a more immersive experience.
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