2. Setting Up Your Homepage

For Plain Jane and Interactive

⚠️ 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: [e-mail]

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