2. Setting Up Your Homepage

For Plain Jane and Interactive

Watch the video

⚠️ Note: The Dynamic Background section has been deprecated in the latest versions of Plain Jane and Interactive. Use Page Canvas instead—it offers the same functionality for background images, videos, colors, etc.

⚠️ Note: This guide does not apply to Plain Jane Starter users.

What You'll Learn

• How to customize your homepage layout in Plain Jane v3 and Interactive v2
• How to add and configure Center, Side-Aligned, and Compact menus
• When to use each layout for best results
• How to link menus and manage navigation
• How to skip the homepage entirely if desired

---

🛠️ For New Users: Setting Up a Menu

1. Go to Online Store > Navigation in your Shopify Admin.
2. Click Add Menu and name it something like Test Menu.
3. Add menu items like:
   • Men → link to your Men's collection
   • Lookbook → link to a custom page or homepage
   • Contact → link to Shopify's built-in contact page
4. Click Save.

---

🎨 Layout 1: Center Menu

This is the most popular layout (e.g., Supreme-style homepage).

How to Set It Up

1. Open your theme in the Customize editor.

2. Make sure these sections are present:
   • Preloader
   • Email Popup
   • Page Canvas
   • Center Menu

💡 Tip: Page Canvas replaces the deprecated Dynamic Background section. Use it for background images or colors.

Link Your Menu

• Click the Center Menu section

• On the right panel, choose your menu from the dropdown (e.g., Test Menu)

Social Media Icons

• Toggle icons on
• Paste full URLs to your profiles (e.g., TikTok, Threads, Tumblr)

💡 Tip: Don't add scrollable content below the center menu. Keep it clean and simple.

---

🎨 Layout 2: Side-Aligned Menu

Good for brands that want minimal vertical menus.

Setup Steps

1. In the theme editor, remove the Center Menu.
2. Click Add Section > Side Aligned Menu

3. Select your menu from the right panel

Customization Options

• Adjust font size, link spacing, and colors
• Toggle login link visibility (requires customer accounts enabled)
• Choose logo alignment (left or right)
• Change font family under Theme Settings > Typography

💡 Tip: Avoid stacking product sections beneath this layout—it’s not scroll-friendly.

---

🎨 Layout 3: Compact Menu

This layout features a hamburger icon in the top right.

Setup Steps

1. Add the Compact Menu section

2. Link your menu under Theme Settings > Global Menu Settings

3. Center or align your logo however you'd like

Add Background + Content

• Use the Page Canvas section to:
  • Set a background color or upload an image

• Add sections like Collection List or Product Carousel

⚠️ Warning: This is the only layout recommended for scrollable homepages.

---

🚀 Skipping the Homepage (Optional)

Want to take visitors straight to a collection?

1. Go to Theme Settings > Homepage Settings
2. Enable Skip Enter Screen
3. Set the destination page (e.g., a specific collection)

💡 Tip: This is useful for product-focused brands that don’t need a homepage.

---

📌 Final Notes

• Use Page Canvas for all homepage background customization
• Keep your layout minimal and functional
• Always save and refresh to preview your changes

Supported Layouts:

• Center Menu (static landing)
• Side-Aligned Menu (minimal vertical nav)
• Compact Menu (scrollable homepage builder)

Need Help?

• 💬 For Tech Shpport Join Us 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